CODEWITHSUNDEEP
reactjswebpackstyled-componentsterser
Kaklikyan
Kaklikyan

Reputation: 96

Production mode styled components minification cause typeerror

On webpack development mode when I build my app, everything works fine.

But when I run webpack on production mode, I get Uncaught TypeError: Cannot read property __emotion_forwardProp of undefined. Seems that the tag is undefined somehow.

I found this code in @emotion which causes the error, but can't figure out why and how to fix it:

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.');
  }
}

On non-minified version even with production NODE_ENV I don't get the error which means that the problem is not with my code but something with the emotion and minification thing.

I am using the default Terser webpack plugin for minification. Webpack 4.31.0 @emotion 10.0.10

Do you have any suggestions?

Upvotes: 1

Views: 1305

Answers (1)

Mikayel Saghyan
Mikayel Saghyan

Reputation: 738

It is caused by the way you import/export the components.

When you have index.js which imports multiple components and then exports them and you import the components from the index like this:

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

this causes tag to get undefined in emotion createStyled function, which seems to be a bug of terser or @emotion.

So, importing the components by their relative path without 'redirections' will fix it.

Upvotes: 1

Related Questions