Production mode styled components minification cause typeerror

Question

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?

Mikayel Saghyan Mikayel Saghyan · Accepted Answer · 2019-06-06T08:49:17

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.

Production mode styled components minification cause typeerror

1 Answers