HappiJS、IE11和Razzle捆绑

Question

我有一个使用Razzle的服务器端渲染react应用程序。我导入了@hapi/joi，因为我想在服务器端和客户端使用它进行验证。IE11和Edge18是我的应用程序支持的浏览器，我必须能够在它们上运行我的应用程序(客户端)。

默认情况下，@hapi/joi v16没有编译(以ES6的形式发布)，这让我认为，由于对Edge18和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。我知道这个错误是关于导入和module.exports的，但是自从我在我的应用程序中require Joi之后，我并不是很清楚哪里出了问题。

我在这里做错了什么？

PS:我把这篇文章放到了repo上，供感兴趣的人参考，以防你想看一看，但context https://github.com/AntonioValerievVasilev/razzle--hapi还不够

Answer 1

将CommonJS module.exports与ES模块混合使用时出现此问题。我在GitHub找到了一个similar issue。您可以尝试其中提到的the solution：将所有module.exports = ...替换为export default ...。

此外，如果您使用@babel/plugin-transform-runtime，它会将require更改为import，这是不应该的。可以通过在.babelrc或config.js中添加"sourceType": "unambiguous"来解决。您可以在此线程中引用the answer：

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

  "sourceType": "unambiguous"
}