Избегайте повторной загрузки в случае нескольких точек входа.Получение этой ошибки: хуки могут вызываться только внутри тела компонента функции - PullRequest
Новая
       15

Избегайте повторной загрузки в случае нескольких точек входа.Получение этой ошибки: хуки могут вызываться только внутри тела компонента функции

0 голосов
/ 14 марта 2019

У меня есть конкретный случай при разработке приложения реагирования, в котором настроено несколько точек входа, например: 

entry: {
    product: [
      require.resolve('webpack-dev-server/client') + '?/',
      require.resolve('webpack/hot/dev-server'),
      paths.productIndexJs
    ],
    app: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appIndexJs
    ]
}

Где paths.productIndexJs - это еще одна точка входа, которая будет находиться в отдельной папке, например src/sample/sample.js

Это оптимизация, которую я использую для node_modules, которая будет объединена в общий модуль 

splitChunks: {
    chunks: 'all',
    cacheGroups: {
     vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        chunks: "all" // chunk => chunk.name !== "pre-main.min"
      }
    }
  }

Все с этой настройкой (несколько точек входа с этой настройкой) работает нормально , если я не использую React Hooks

Multiple entry point working successfully

Но если я использую какой-либо код с react hooks, приложение разрывается с этой ошибкой:

Хуки могут вызываться только внутри тела компонента функции.

Я исследовал и пришел к выводу, что это из-за двойной загрузки реакции после отладки шагов, указанных здесь .

Ссылаясь на шаги, указанные в приведенной выше ссылке, я могу видеть window.React1 === window.React2 как true в файлах, которые построены с первой точкой входа, т.е. paths.productIndexJs

Но это false в файлах с точкой входа как paths.appIndexJs

Эта настройка работает, если я задаю react и react-dom как внешние и загружаю их в index.html Но я хочу этого избежать.

...