React 16 - ES6 - Webpack - Ошибка: модуль не является загрузчиком (должен иметь нормальную функцию или функцию шага)

Question

У меня есть приложение реагирования, написанное в коде ES6.

Я получаю эту ошибку после обновления моей версии реагирования (15.4.2 -> 16.4.0) вместе с реагирующим горячим загрузчиком (1.3.1)-> 4.3.0).

Это мой package.json до:

"dependencies": {
    ...
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    ...
},
"devDependencies": {
    ...
    "react-hot-loader": "^1.3.1",
    ...
}

Это мой package.json после:

"dependencies": {
    ...
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0",
    ...
},
"devDependencies": {
    ...
    "react-hot-loader": "^4.3.0",
    ...
}

Моя версия веб-пакетаимеет значение: "webpack": "^3.11.0".

Мой конфиг веб-пакета имеет значение:

module: {
    rules: [
      {
        test: /\.js$/,
        use: ['react-hot-loader', 'babel-loader', 'eslint-loader'],
        exclude: /node_modules/,
      },
      ...
    ],
},

После обновления приложения появляется следующее сообщение об ошибке:

Ошибка: модуль '... \ node_modules \ реагировать-hot-loader \ index.js' не является загрузчиком (должен иметь нормальную или питч-функцию)

Как мне реагировать в горячем состоянии-загрузчик снова заработает?

Answer 1

TL; DR:

Удалите react-hot-loader из любых загрузчиков в конфигурации Webpack и добавьте react-hot-loader/babel в раздел плагинов .babelrc.

Более подробное объяснение:

В качестве документов в react-hot-loader v4.3.1 состоянии ,

Добавитьreact-hot-loader/babel к вашему .babelrc:

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

Примечание: поместите плагин react-hot-loader/babel в самый левый из списка плагинов выше.

Обновите вашКонфигурация Webpack не использует плагины react-hot-loader, так как Babel сделает это за вас:

module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader', 'eslint-loader'],
        exclude: /node_modules/,
      },
      ...
    ],
},