Объединение Razzle, IE11 и HappiJS

Question

У меня есть серверное приложение для реагирования, которое использует Razzle. Я импортирую @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 Джой в моем приложении.

Что я здесь делаю не так?

PS: отправил это в репо для всех, кого интересует, если вы хотите взглянуть, а в конфигурации недостаточно контекста https://github.com/AntonioValerievVasilev/razzle--hapi

Answer 1

Проблема возникает при смешивании CommonJS module.exportsс модулями ES. Я обнаружил похожую проблему в GitHub. Вы можете попробовать упомянутое в нем решение: заменить всеmodule.exports = ... к export default ....

Кроме того, если вы используете @babel/plugin-transform-runtime, это изменится require к importгде этого не должно быть. Можно решить добавить"sourceType": "unambiguous" в .babelrcили config.js. Вы можете обратиться к ответу в этой теме:

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

  "sourceType": "unambiguous"
}