webpack: import + module.exports в том же модуле вызвал ошибку

Я разрабатываю веб-сайт с webpack. Когда у меня есть такой код:

import $ from 'jquery';
function foo() {};
module.exports = foo;

Я получил ошибку Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'.

Оказывается, что изменение import $ from 'jquery' на var $ = require('jquery') не вызывает никаких ошибок.

Почему импорт с module.exports вызывает эту ошибку? Что-то неправильно в использовании требует вместо этого?

Ответ 1

Вы не можете смешивать import и module.exports. В мире import вам нужно экспортировать вещи.

// Change this
module.exports = foo;

// To this
export default foo;

Ответ 2

Это происходит, если другие модули в нисходящем направлении имеют неожиданное дерево требований. Изменения в Вавилоне требуют импорта там, где не предполагается, что вызывает вышеупомянутую проблему @Matthew Herbst. Чтобы решить эту проблему, добавьте "sourceType": "unambiguous" в ваш файл babelrc или babel.config.js, чтобы @babel/plugin-transform-runtime не делала это изменение выражения выражения для импорта в ваши файлы commonjs. например:

module.exports = {
  presets: [
    '@quasar/babel-preset-app'
  ],

  "sourceType": "unambiguous"
}