Razzle、IE11 和 HappiJS 捆绑

Question

我有一个使用 Razzle 的服务器端呈现的 React 应用程序。我正在导入 @hapi/joi 因为这是我想用于验证服务器端和客户端的内容。 IE11 和 Edge 18 是我的应用程序支持的浏览器，我必须能够运行我的应用程序（客户端）在它们上。

@hapi/joi v16 默认情况下未编译（作为 ES6 发布），这让我认为由于 Edge 18 和 IE11 所需的支持，我必须手动编译项目中的依赖项。

我正在尝试使用此配置：

const nodeExternals = require('webpack-node-externals');
const fs = require('fs');

module.exports = {
  modifyBabelOptions() {
    return {
      presets: ['razzle/babel'],
    };
  },
  modify(config, { target, dev }, webpack) {
    // package un-transpiled packages
    const babelRuleIndex = config.module.rules.findIndex(
      (rule) => rule.use && rule.use[0].loader && rule.use[0].loader.includes('babel-loader')
    );
    config.module.rules[babelRuleIndex] = Object.assign(config.module.rules[babelRuleIndex], {
      include: [
        ...config.module.rules[babelRuleIndex].include,
        fs.realpathSync('./node_modules/@hapi/')
      ],
    });
    config.externals =
      target === 'node'
        ? [
            nodeExternals({
              whitelist: [
                dev ? 'webpack/hot/poll?300' : null,
                /\.(eot|woff|woff2|ttf|otf)$/,
                /\.(svg|png|jpg|jpeg|gif|ico)$/,
                /\.(mp4|mp3|ogg|swf|webp)$/,
                /\.(css|scss|sass|sss|less)$/,
                /^@hapi/,
              ].filter(Boolean),
            }),
          ]
        : [];
    // return
    return config;
  },
};

但是，当我尝试运行我的项目时，我似乎得到了 TypeError: Cannot assign to read only property 'exports' of object。我知道错误出在 import 和 module.exports 周围，但我不太明白我哪里出错了，因为我在我的应用程序中使用了 require Joi。

我做错了什么？

PS: 将此推送到一个仓库，供任何有兴趣的人查看，但配置上下文不足 https://github.com/AntonioValerievVasilev/razzle--hapi

Answer 1

将 CommonJS module.exports 与 ES 模块混合使用时会出现此问题。我发现里面提到了一个similar issue in GitHub. You could try the solution：replacing all module.exports = ... to export default ....

此外，如果您使用 @babel/plugin-transform-runtime，它会将 require 更改为 import，这是不应该的。在.babelrc或config.js中加上"sourceType": "unambiguous"即可解决。您可以参考本帖中的：

module.exports = {
  presets: [
    ...
  ],

  "sourceType": "unambiguous"
}

Razzle、IE11 和 HappiJS 捆绑

Razzle, IE11 and HappiJS bundling

internet-explorer-11

reactjs

babeljs

microsoft-edge

razzle