How to generate derived sourcemaps in a monorepo with Lerna and Vite?

Question

Hi Stack Overflow community,

I'm currently working on a project using Vite, and I've run into an issue where the source maps from my own packages are not being included in the develop build, not on vite devserver nor webpack devserver.

My setup is pretty easy, I have 3 packages: common, tables and devserver. The problem I have is: the package tables includes common, and devserver includes tables. When I inspect devserver sources, tables sourcemaps are being loaded correctly but common sourcemaps are not. I tryied everything I could and didn't find the solucion. Here is my vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import path from "path";

export default defineConfig({
  plugins: [
    react(),
    dts({
      outDir: path.resolve(__dirname, "dist"),
      include: "src/**/*.ts*",
    }),
  ],
  build: {
    sourcemap: true,
    lib: {
      entry: "src/index.ts",
      name: "index",
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react"],
      output: {
        globals: {
          react: "React",
        },
      },
    },
  },
});

I am trying to setup on devserver some test app, I am using the latest Lerna so I am using npm workspaces as well. Everything works fine, vite compiles with no errors and I get the devserver working. The problem is:

The package tables references common through npm i, the code is imported successfully and it works, but it sourcemaps are not being loaded.

I tryied to setup devserver with webpack too:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.tsx',
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development',
      template: path.resolve(__dirname, 'index.html')
    }),
  ],
};

Here is my tsconfig on both projects

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "declaration": true,
    "declarationMap": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["node"]
  },
  "include": ["src","src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

The whole code source is published in

https://github.com/AlexisLeite/focus/tree/main

I have been several hours and could not find the solution. Please, I will be grateful for any orientation you could give me. Thanks

I tryied the following:

• configuring vite in several ways, according to docs.
• mounting devserver on vite and webpack
• changed vite react plugin from @vitejs/plugin-react-swc to @vitejs/plugin-react
• changed differenc tsconfig.json props

It results always the same: the sourcemaps are not being loaded for common, imported from tables as shown in the image