ES6 Динамический импорт не выполняется, когда файл импортирует другой именованный экспорт

Question

У меня есть файл с именем a.js:

a.js:

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

export default 'hello';

Затем я динамически импортирую указанный выше файл (a.js) в b.js:

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

Когда я упаковываю файлы выше, я получаю ошибки, такие как: 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'.

Но когда я удаляю import { myFunc } from '../helpers'; из a.js, веб-пакет работает отлично. Я уверен, что путь ../helpers существует, а myFunc является именованным экспортом в файле ../helpers.

Почему, когда я удаляю эту строку, сборка веб-пакета проходит, а в противном случае происходит сбой?

Answer 1

Проверьте, импортирует ли файл helpers.js файлы fs, cldr и т. Д. Попробуйте переместить myFunc из helpers.js в отдельный файл и посмотрите, устраняет ли это проблему.

Если это не решает проблемупопробуйте указать target: 'node' в вашей конфигурации wepback следующим образом:

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

Параметр target: 'node' указывает веб-пакету не трогать какие-либо встроенные модули, такие как fs или net.Я не уверен, почему, но добавление строк 'empty', похоже, также исправляет ошибки Can't resolve, в зависимости от вашей конфигурации.

См. Эту статью: https://jlongster.com/Backend-Apps-with-Webpack--Part-I И проблема github: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285600188

Я столкнулся с похожими проблемами, и это, казалось, помогло мне решить проблему.Веб-пакет хитрый.