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

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

Что я здесь делаю неправильно?

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


reactjs babeljs microsoft-edge internet-explorer-11 razzle
person Antonio Vasilev    schedule 10.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема возникает при смешивании 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"
}
person Yu Zhou    schedule 11.12.2019
comment
Спасибо - это был sourceType: unambiguous, который разрешил это для меня! - person Antonio Vasilev; 11.12.2019