React-loadable doesn't work with css modules

Question

I did everything according to the React-loadable documentation, but it doesn't work with css modules.

I'm using server-side rendering.

Error on client:

TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bundle.js:768)
    at fn (bundle.js:131)
    at eval (Comments.css?./node_modules/css-loader??ref--6-2:1)
    at Object../node_modules/css-loader/index.js?!./app/components/comment/Comments/Comments.css (1.bundle.js:440)
    at __webpack_require__ (bundle.js:768)
    at fn (bundle.js:131)
    at eval (Comments.css:2)
    at Object../app/components/comment/Comments/Comments.css (1.bundle.js:115)
    at __webpack_require__ (bundle.js:768)
    at fn (bundle.js:131)

Error on server:

Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

Please check the code for the LoadableComponent component.
ReferenceError: window is not defined
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2)
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46)
    at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:77:88)
    at eval (webpack:///./app/components/comment/Comments/Comments.css?:16:143)
    at Object../app/components/comment/Comments/Comments.css (C:\site.dev\react\x\1.server.js:116:1)
    at __webpack_require__ (C:\site.dev\react\x\server.js:26:30)
    at eval (webpack:///./app/components/comment/Comments/index.js?:17:17)
    at Object../app/components/comment/Comments/index.js (C:\site.dev\react\x\1.server.js:128:1)
    at __webpack_require__ (C:\site.dev\react\x\server.js:26:30)
    at __webpack_require__.t (C:\site.dev\react\x\server.js:83:33)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

You shouldn't use style-loader on the server-side https://github.com/webpack-contrib/style-loader/pull/159#issuecomment-286729044. Use extract-text-webpack-plugin or mini-css-extract-plugin. Has your SRR worked before you adding react-loadable to the project? — Dawid Karabin, Nov 17 '18 at 14:56
Yes, I'm using extract-text-webpack-plugin. Everything was ok before React-loadable — Daryn K., Nov 17 '18 at 15:35
@hinok thanks for pointing to the right direction. Solved that after adding allChunks: true in extract-text-webpack-plugin — Daryn K., Nov 17 '18 at 19:14

score 0 · Answer 1 · answered Nov 17 '18 at 19:12

0

Solved that after adding allChunks: true option in ExtractTextPlugin

answered Nov 17 '18 at 19:12

Daryn K.

671
2
12
23

React-loadable doesn't work with css modules

1 Answers1