Trying to debug a project written in Typescript using Next.js, but facing issues with bundling TS files from a local dependent common library. Only JS files are included, which is not sufficient for debugging.
The goal is to bundle all TS files from the workspace with webpack and enable source mapping for debugging in Chrome Dev Tools.
It's strange that only the compiled code of index.tsx from the ./pages folder is included in the bundle, not the actual TS file.
Utilized:
- Next.js 6.1.1
- Typescript 3.8.3
- es5
next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript({
poweredByHeader: false,
webpack: (config, {dev}) => {
if (dev) {
config.devtool = 'inline-source-map';
config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.json'];
config.output.sourceMapFilename = "[name].js.map";
}
return config;
},
distDir: '../dist',
});
.babelrc
"presets": [
"next/babel",
"@zeit/next-typescript/babel"
]
}
app package.json
{
"name": "project",
"version": "0.0.1",
"license": "UNLICENSED",
"private": true,
"description": "The project",
"author": "author <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8c989985829fad88958c809d8188c38e8280">[email protected]</a>>",
"browserslist": [
"> 0.5%",
"last 2 versions"
],
"nodemonConfig": {
"ignoreRoot": [
".git"
],
"watch": [
"src/server.js"
]
},
"dependencies": {
"@project/common": "*"
},
"devDependencies": {
"@zeit/next-typescript": "1.1.0"
}
}
common lib package.json
{
"name": "@project/common",
"version": "1.0.0",
"license": "UNLICENSED",
"main": "build/index.js",
"types": "./build/index.d.ts",
"files": [
"build/*"
],
... (additional content shortened for brevity)
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "es2015.promise", "dom"],
... (additional properties omitted for brevity)
}
}