当文件导入另一个命名的导出文件时，ES6动态导入失败

Question

I have a file called a.js :

a.js :

import { set } from 'lodash';
import { myFunc } from '../helpers';

export default 'hello';

Then I am dynamically importing the above file ( a.js ) in b.js :

const aFile = await import('a.js');

When I webpack the files above I get errors such as: Can't resolve 'fs' , Can't resolve 'cldr' , Can't resolve 'cldr/supplemental' , Can't resolve 'cldr/event' , Can't resolve 'cldr/supplemental' , Can't resolve 'net' , Can't resolve 'dns' .

But when I remove the import { myFunc } from '../helpers'; from a.js , the webpack runs perfectly fine. I am positive the path ../helpers exists and myFunc is a named export in the ../helpers file.

Why is it that when I remove that line webpack build passes but otherwise it fails?

Answer 1

See if helpers.js file is importing fs, cldr, etc. Try moving myFunc from helpers.js to a separate file and see if that fixes the issue.

If that doesn't fix the issue try specifying target: 'node' in your wepback config like so:

target: 'node',
node: {
  fs: 'empty',
  net: 'empty',
  ...
  dns: 'empty',
}

The target: 'node' option tells webpack not to touch any built-in modules like fs or net. I'm not sure why, but adding the 'empty' strings seems to fix Can't resolve errors as well, depending on your configuration.

See this article: https://jlongster.com/Backend-Apps-with-Webpack--Part-I And github issue: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285600188

I ran into similar issues and this seemed to help me resolve the issue. Webpack is tricky.