Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Importing UMD built module using webpack leads to Critical Dependency errors

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.

like image 332
jtheoof Avatar asked Nov 07 '22 23:11

jtheoof


1 Answers

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.

like image 114
kittaakos Avatar answered Nov 15 '22 11:11

kittaakos