webpack:import + module.exports在同一模块中导致错误

Question

我正在开发一个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导入会导致此错误？使用require有什么不对吗？

Answer 1

你不能混用import和module.exports.在import世界上,你需要出口东西.

// Change this
module.exports = foo;

// To this
export default foo;

Answer 2

如果下游的其他模块具有意外的需求树，则会发生这种情况。通天塔的变化要求在不应该导致上述问题的地方导入@Matthew Herbst。要解决此问题，请将其添加"sourceType": "unambiguous"到您的babelrc文件或babel.config.js中，以使@ babel / plugin-transform-runtime不会执行此require表达式更改，以将其导入commonjs文件中。例如：

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

  "sourceType": "unambiguous"
}