Режим производства в стиле минимизации компонентов вызывает ошибку типа

Question

В режиме разработки веб-пакетов при сборке приложения все работает нормально.

Но когда я запускаю веб-пакет в производственном режиме, я получаю Uncaught TypeError: Невозможно прочитать свойство __emotion_forwardProp неопределенного. Кажется, что тег как-то не определен.

Я нашел этот код в @emotion, который вызывает ошибку, но не может понять, почему и как ее исправить:

if (process.env.NODE_ENV !== 'production') {
  if (tag === undefined) {
    throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
  }
}

На неминифицированной версии даже с производственной версией NODE_ENV я не получаю сообщение об ошибке, которое означает, что проблема не в моем коде, а в том, что касается эмоций и минимизации.

Я использую плагин Terser Webpack по умолчанию для минимизации. Webpack 4.31.0 @emotion 10.0.10

Есть ли у вас какие-либо предложения?

Answer 1

Это вызвано тем, как вы импортируете / экспортируете компоненты.

Когда у вас есть index.js, который импортирует несколько компонентов, а затем экспортирует их, и вы импортируете компоненты из индекса следующим образом:

import { SomeComponent } from '..' or '../'

это приводит к тому, что тег становится неопределенным в функции эмоции createStyled, которая кажется ошибкой более краткого или @ emotion.

Таким образом, импорт компонентов по их относительному пути без «перенаправлений» исправитэто.