Debugging bundled react library in bundled react app

Viewed 33

I try to write a react library and test the components with an app. In my workspace in VS Code there is the ./lib directory and ./app directory.

Lib gets bundled by Rollup, gets type definitions via tsc and built via rollup-plugin-esbuild-transformer. A sourcemap gets created in Edge i can access the files of lib in the DevTools.

App was created via create-react-app, so webpack is responsible for all the bundling. I also linked Lib via yarn link lib.

Now when i try to set a breakpoint in an App-file everythings okay. Not so when trying to place a breakpoint in a lib-file like config.ts, this one gets ignored when placed in VS Code. When placed in Edge or by stepping down into the library functions VS Code opens a config.ts, but not the original one.

Lib: Rollup.json:

import styles from 'rollup-plugin-styles';
import esbuild from 'rollup-plugin-esbuild-transform';
import packageJson from './package.json';
const config =
{
    input: './src/index.ts',
    output: [
        {
            file: packageJson.module,
            format: 'esm',
            name: 'selftest',
            sourcemap: true,
        },
    ],
    plugins: [
        styles(),
        esbuild([
            {
                loader: 'json',
                minifyWhitespace: true
            },
            {
                loader: 'ts'
            },
            {
                loader: 'tsx',
                banner: "import * as React from 'react'",
                sourcemap: "both",
                sourceRoot: "../../selftest/src/"
            },
            {
                loader: 'js',
                include: /\.[jt]sx?$/,
                target: 'es2017',
                sourcemap: "both"
            }
        ])
    ],
    external: [
        'react-dom',
    ],
}
export default config;

Lib: tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "target": "es6",
    "lib": [
      "dom",
      "DOM.Iterable",
      "ESNext",
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "declaration": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "importHelpers": true,
    "removeComments": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
  ]
}

launch.json

{
            "name": "Attach to Edge",
            "port": 9222,
            "request": "attach",
            "type": "pwa-msedge",
            "webRoot": "${workspaceFolder}",
            "trace": true,
            "sourceMaps": true,
            "runtimeArgs": [],
            "outFiles": [
                "${workspaceFolder}/app/**/*.js",
                "C:\\Users\\pac\\workspace\\lib\\build\\*.js"
            ]
        }
0 Answers
Related