Webpack + `создать-реагировать-приложение` | ProvidePlugin не загружает React как модуль

Question

* Примечание: я почти ничего не знаю о Webpack.

Я хочу загрузить модуль узла react и другие модули в Webpack через ProvidePlugin, чтобы иметь к ним глобальный доступ.

Я создал create-react-app и запустил eject и получил доступ к предопределенной конфигурации для Webpack create-react-app.

Я прочитал этот пост о загрузке react глобально через PluginProvidor и прочитал о PluginProvidor непосредственно в документах Webpack , где последний заявляет:

По умолчанию путь разрешения модуля - это текущая папка (./**) и node_modules

Исходя из этого, в webpack.config.js, в plugins я добавил следующее PluginProvidor:

...
plugins: [
  new webpack.ProvidePlugin(
    {
      React: 'react'
    }
  )
]
...

Но это не сработало - в файле JSX, когда я вызываю React (например, class MyComponent extends React.Component { ... }), я получаю сообщение об ошибке, в котором говорится, что React не определен (а также ошибка, специфичная для React, в которой должен быть определен React. Файлы JSX).

Почему это не работает? Насколько я понимаю, я даю тот же идентификатор, который я называю в своем файле JSX, и, как я уже упоминал, в соответствии с документами Webpack, к пути к модулю react в node_modules - оба требуются для него на работу.

Мой файл настроек: webpack.config.js

Answer 1

Это не очень хорошая идея использовать ProvidePlugin, а еще хуже - eject ваш CRA.

Вместо ProvidePlugin использовать глобальные переменные:

// globals.js
import React from 'react';

window.React = React;

, а затем import './globals'

import './globals';

// no need import React
import ReactDOM from 'react-dom';
...

Для добавления плагинов в веб-пакет CRA см. response-app-rewired .

Примердобавления плагина:

/* config-overrides.js */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
  if (!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(new MonacoWebpackPlugin());
  return config;
};

Демо: