I am trying to build a simple file that depends on a library built with UMD exports.
// main.ts
import { parseTree } from 'jsonc-parser';
const tree = parseTree('{ "name: "test" }');
console.log(tree);
It compiles fine, however webpack spits out dependency errors:
Hash: 85004e3e1bd3582666f5 Version: webpack 2.3.2 Time: 959ms Asset Size Chunks Chunk Names dist/bundle.js 61.8 kB 0 [emitted] main build/main.d.ts 0 bytes [emitted] [0] ./~/jsonc-parser/lib/main.js 40.1 kB {0} [built] [1] ./~/jsonc-parser/lib 160 bytes {0} [built] [2] ./~/path-browserify/index.js 6.18 kB {0} [built] [3] ./~/process/browser.js 5.3 kB {0} [built] [4] ./src/main.ts 200 bytes {0} [built] [5] ./~/vscode-nls/lib 160 bytes {0} [optional] [built] [6] ./~/vscode-nls/lib/main.js 5.46 kB {0} [built]
WARNING in ./~/jsonc-parser/lib/main.js 3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
WARNING in ./~/vscode-nls/lib/main.js 118:23-44 Critical dependency: the request of a dependency is an expression
ERROR in ./~/vscode-nls/lib/main.js Module not found: Error: Can't resolve 'fs' in '.../webpack-typescript-umd/node_modules/vscode-nls/lib' @ ./~/vscode-nls/lib/main.js 7:9-22 @ ./~/jsonc-parser/lib/main.js @ ./src/main.ts
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
filename: 'dist/bundle.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
configFileName: path.resolve(__dirname, 'tsconfig.json')
}
},
]
}
}
I want to keep my js
transpiled files as commonjs
but I want to bundle jsonc-parser
as well without recompiling it as commonjs
.
I've created a repo on github that show cases the error. Hopefully this can help you.
You can simply npm install && npm run dist
to reproduce the error.
I ran into the same issue and wanted to share two ways to workaround the problem:
If the consumed package consists of one single module, just like before the 1.0.1
version of the jsonc-parser
, you can add the following to your webpack.config.js
:
module: {
rules: [
// your rules come here.
],
noParse: /jsonc-parser|other-umd-packages/
},
If the consumed package consists of multiple files, one can use the umd-compat-loader
as a workaround. Add the umd-compat-loader
loader to your package.json
and configure the following rule
in the webpack.config.js
:
module: {
rules: [
// other rules come here.
{
test: /node_modules[\\|/](jsonc-parser|other-umd-packages)/,
use: { loader: 'umd-compat-loader' }
}
]
},
Some hints on how to properly use the test
, can be found here. Finally, but not least, the credit goes to the OP of the workaround.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With