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"
]
}