Search code examples
reactjswebpackstyled-componentsterser

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?

Solution

  • 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.