Semantic-ui-react: Cannot read property call of undefined

[Igor-Vuk]

I keep getting this error whenever I build with webpack. It's not saying n console from where it comes from (anonymous).

[levithomason]

This is not a SUIR bug. I'd suggest searching the web for Webpack error messages. Also, check the stack trace for the error and see exactly where it is coming from. Best of luck!

[notrab]

For those debugging this, I'm also having this issue when upgrading to .80 when using Next.js

[Igor-Vuk]

Try to clear browser history, cookies, everything and restart...it fixed mine.

[mhgamework]

Having the same issue, it looks like there is some tree shaking problem, maybe caused by the "sideEffects": false in semantic-UI-React.

Did anyone found a way aroun this problem?

[GGAlanSmithee]

@mhgamework

Are you using webpack v4?

If so, the issue might come from Semantic-UI-React trying to import files from ./node_modules/semantic-ui-react/dist/es/lib/, which does not seem to be bundled.

You can see this if you enable

optimization: {
    namedModules: true,
    namedChunks: true
}

I guess you are correct in your assessment that the way this lib is currently bundled does not work with webpack 4 tree-shaking correctly.

Here's a work-around that made it work for me, by manually includig lib files:

// webpack.config.js entry 
entry: {
    vendor: [
        // lots of other vendor libs
            'semantic-ui-react',
    ].concat(
        glob.sync('./node_modules/semantic-ui-react/dist/es/lib/**.js'),
    ),
},

...according to the information I found here.

The important part is the wildcard glob inclusion of semantic-ui-react's lib files. Ofcourse, depending on internal folder structures like this is less than ideal, but it's the only way I could make this work.

@levithomason would you consider this being an issue with how SUIR is bundled? It could very well be a user issue, but I have used countless of npm packages and never encountered this problem before.

[ceisele-r]

We are experiencing the same issue in webpack 4 (issue starting to occurr in webpack 4.3.0 - in webpack 4.2.0 it still works) but the fix from @GGAlanSmithee did not solve it for us. Does anyone know another possible solution?