Importer un module UMD construit en utilisant webpack conduit à des erreurs de dépendances critiques

Question

J'essaye de construire un fichier simple qui dépend d'une bibliothèque construite avec des exports UMD.

// main.ts 
import { parseTree } from 'jsonc-parser'; 

const tree = parseTree('{ "name: "test" }'); 

console.log(tree); 

Il compile bien, mais webpack recrache les erreurs de dépendance:

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') 
       } 
      }, 
     ] 
    } 
} 

Je veux garder mes js fichiers transpiled comme commonjs mais je veux regrouper jsonc-parser ainsi sans recompiler comme commonjs.

J'ai créé a repo on github qui affiche les cas l'erreur. J'espère que cela peut vous aider.

Vous pouvez simplement npm install && npm run dist pour reproduire l'erreur.

Answer 1

je suis tombé sur la même question et je voulais partager deux façons de contourner le problème:

Si le paquet consommé se compose d'un seul module, comme avant la 1.0.1 version du jsonc-parser, vous pouvez ajouter ce qui suit votre webpack.config.js:

module: { 
    rules: [ 
     // your rules come here. 
    ], 
    noParse: /jsonc-parser|other-umd-packages/ 
}, 

Si le paquet consommé est constitué de plusieurs fichiers, on peut utiliser la umd-compat-loader comme solution de contournement. Ajouter le chargeur umd-compat-loader à votre package.json et configurer les éléments suivants rule dans le webpack.config.js:

module: { 
    rules: [ 
     // other rules come here. 
     { 
      test: /node_modules[\\|/](jsonc-parser|other-umd-packages)/, 
      use: { loader: 'umd-compat-loader' } 
     } 
    ] 
}, 

Quelques conseils sur la façon d'utiliser correctement le test, se trouvent here. Enfin, mais non le moindre, le crédit va à la OP of the workaround.