React-loadable doesn't work with css modules

up vote
0
down vote

favorite

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.devreactx1.server.js:116:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at eval (webpack:///./app/components/comment/Comments/index.js?:17:17)

    at Object../app/components/comment/Comments/index.js (C:site.devreactx1.server.js:128:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at __webpack_require__.t (C:site.devreactxserver.js:83:33)

    at <anonymous>

    at process._tickCallback (internal/process/next_tick.js:188:7)

asked Nov 17 at 14:26

Daryn K.

138214

You shouldn't use style-loader on the server-side github.com/webpack-contrib/style-loader/pull/…. Use extract-text-webpack-plugin or mini-css-extract-plugin. Has your SRR worked before you adding react-loadable to the project?
– hinok
Nov 17 at 14:56

Yes, I'm using extract-text-webpack-plugin. Everything was ok before React-loadable
– Daryn K.
Nov 17 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 at 19:14

add a comment |

up vote
0
down vote

favorite

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.devreactx1.server.js:116:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at eval (webpack:///./app/components/comment/Comments/index.js?:17:17)

    at Object../app/components/comment/Comments/index.js (C:site.devreactx1.server.js:128:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at __webpack_require__.t (C:site.devreactxserver.js:83:33)

    at <anonymous>

    at process._tickCallback (internal/process/next_tick.js:188:7)

asked Nov 17 at 14:26

Daryn K.

138214

You shouldn't use style-loader on the server-side github.com/webpack-contrib/style-loader/pull/…. Use extract-text-webpack-plugin or mini-css-extract-plugin. Has your SRR worked before you adding react-loadable to the project?
– hinok
Nov 17 at 14:56

Yes, I'm using extract-text-webpack-plugin. Everything was ok before React-loadable
– Daryn K.
Nov 17 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 at 19:14

add a comment |

up vote
0
down vote

favorite

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.devreactx1.server.js:116:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at eval (webpack:///./app/components/comment/Comments/index.js?:17:17)

    at Object../app/components/comment/Comments/index.js (C:site.devreactx1.server.js:128:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at __webpack_require__.t (C:site.devreactxserver.js:83:33)

    at <anonymous>

    at process._tickCallback (internal/process/next_tick.js:188:7)

asked Nov 17 at 14:26

Daryn K.

138214

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.devreactx1.server.js:116:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at eval (webpack:///./app/components/comment/Comments/index.js?:17:17)

    at Object../app/components/comment/Comments/index.js (C:site.devreactx1.server.js:128:1)

    at __webpack_require__ (C:site.devreactxserver.js:26:30)

    at __webpack_require__.t (C:site.devreactxserver.js:83:33)

    at <anonymous>

    at process._tickCallback (internal/process/next_tick.js:188:7)

reactjs react-loadable

asked Nov 17 at 14:26

Daryn K.

138214

asked Nov 17 at 14:26

Daryn K.

138214

asked Nov 17 at 14:26

Daryn K.

138214

asked Nov 17 at 14:26

Daryn K.

138214

asked Nov 17 at 14:26

Daryn K.

138214

You shouldn't use style-loader on the server-side github.com/webpack-contrib/style-loader/pull/…. Use extract-text-webpack-plugin or mini-css-extract-plugin. Has your SRR worked before you adding react-loadable to the project?
– hinok
Nov 17 at 14:56

Yes, I'm using extract-text-webpack-plugin. Everything was ok before React-loadable
– Daryn K.
Nov 17 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 at 19:14

add a comment |

You shouldn't use style-loader on the server-side github.com/webpack-contrib/style-loader/pull/…. Use extract-text-webpack-plugin or mini-css-extract-plugin. Has your SRR worked before you adding react-loadable to the project?
– hinok
Nov 17 at 14:56

Yes, I'm using extract-text-webpack-plugin. Everything was ok before React-loadable
– Daryn K.
Nov 17 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 at 19:14

You shouldn't use style-loader on the server-side github.com/webpack-contrib/style-loader/pull/…. Use extract-text-webpack-plugin or mini-css-extract-plugin. Has your SRR worked before you adding react-loadable to the project?
– hinok
Nov 17 at 14:56

Yes, I'm using extract-text-webpack-plugin. Everything was ok before React-loadable
– Daryn K.
Nov 17 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 at 19:14

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

Solved that after adding allChunks: true option in ExtractTextPlugin

answered Nov 17 at 19:12

Daryn K.

138214

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53352126%2freact-loadable-doesnt-work-with-css-modules%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

Solved that after adding allChunks: true option in ExtractTextPlugin

answered Nov 17 at 19:12

Daryn K.

138214

add a comment |

up vote
0
down vote

Solved that after adding allChunks: true option in ExtractTextPlugin

answered Nov 17 at 19:12

Daryn K.

138214

add a comment |

up vote
0
down vote

Solved that after adding allChunks: true option in ExtractTextPlugin

answered Nov 17 at 19:12

Daryn K.

138214

Solved that after adding allChunks: true option in ExtractTextPlugin

answered Nov 17 at 19:12

Daryn K.

138214

answered Nov 17 at 19:12

Daryn K.

138214

answered Nov 17 at 19:12

Daryn K.

138214

answered Nov 17 at 19:12

Daryn K.

138214

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk