webpack: import + module.exports in the same module caused error

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

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

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

  "sourceType": "unambiguous"
}

Answer 3

您可以将 require 与导出一起使用。但不导入和 module.exports.

Answer 4

在我的react-native-web案例中，只需使用一个额外的webpack规则，然后TypeError: Cannot assign to read only 属性 'exports' of object就被修复了。也许你可以参考一下。

npm install --save-dev react-app-rewired

在您的项目根目录中创建一个 config-overrides.js

// used by react-app-rewired

const webpack = require('webpack');
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    config.module.rules[1].use[0].options.baseConfig.extends = [
      path.resolve('.eslintrc.js'),
    ];

    // To let alias like 'react-native/Libraries/Components/StaticRenderer'
    // take effect, must set it before alias 'react-native'
    delete config.resolve.alias['react-native'];
    config.resolve.alias['react-native/Libraries/Components/StaticRenderer'] =
      'react-native-web/dist/vendor/react-native/StaticRenderer';
    config.resolve.alias['react-native'] = path.resolve(
      'web/aliases/react-native',
    );

    // Let's force our code to bundle using the same bundler react native does.
    config.plugins.push(
      new webpack.DefinePlugin({
        __DEV__: env === 'development',
      }),
    );

    // Need this rule to prevent `Attempted import error: 'SOME' is not exported from` when `react-app-rewired build`
    // Need this rule to prevent `TypeError: Cannot assign to read only property 'exports' of object` when `react-app-rewired start`
    config.module.rules.push({
      test: /\.(js|tsx?)$/,
      // You can exclude the exclude property if you don't want to keep adding individual node_modules
      // just keep an eye on how it effects your build times, for this example it's negligible
      // exclude: /node_modules[/\](?!@react-navigation|react-native-gesture-handler|react-native-screens)/,
      use: {
        loader: 'babel-loader',
      },
    });

    return config;
  },
  paths: function (paths, env) {
    paths.appIndexJs = path.resolve('index.web.js');
    paths.appSrc = path.resolve('.');
    paths.moduleFileExtensions.push('ios.js');
    return paths;
  },
};

同时创建 web/aliases/react-native/index.js

// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b

import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';

// And let's stub out everything that's missing!
export const ViewPropTypes = {
  style: () => {},
};
RNText.propTypes = {
  style: () => {},
};
RNImage.propTypes = {
  style: () => {},
  source: () => {},
};

export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};

现在您可以运行 react-app-rewired start 而不是 react-scripts start

webpack: import + module.exports in the same module caused error

webpack: import + module.exports in the same module caused error

javascript

import

require

ecmascript-6

webpack