React (nested) code splitting and SASS results in component not loaded

[martinoss]

I've got a strange problem using sass and code splitting, probably with nesting only.

What happened is, my imported component (using loadable) did not load in production build. I din't get any kind of error or indication what's wrong.

Structure is as follows:

When I import the sass file person-list.scss in PersonList.tsx it requires me to import a (dummy) sass file in PersonsRoot.tsx too, otherwise the component PersonsList will not get loaded.

This is what I use in my project: create-react-app (react-scripts-ts), react-router 4, redux 4, react-app-rewired, react-app-rewire-scss

Here I uploaded a project to github for easy reproduction:

Am I doing something wrong or is it maybe a bug?

I'have also posted this issue on stackoverflow

Update: Webpack seems to have an array of 545 modules but tries to access the element with index 545 which is of course undefined (0 based index).

TypeError: Cannot read property 'call' of undefined

o (main.9cac5c4f.js:formatted:26)
544 (persons-list.scss:1)
o (main.9cac5c4f.js:formatted:26)
543 (persons-list.scss?3174:4)
o (main.9cac5c4f.js:formatted:26)
542 (1.56e5fc78.chunk.js:1)
o (main.9cac5c4f.js:formatted:26)
Promise.then (async)
loader (routes.ts:6)
f (main.9cac5c4f.js:formatted:6499)
v (main.9cac5c4f.js:formatted:6566)
n (main.9cac5c4f.js:formatted:6591)
Ii (main.9cac5c4f.js:formatted:11110)
da (main.9cac5c4f.js:formatted:11833)
ha (main.9cac5c4f.js:formatted:11854)
Ga (main.9cac5c4f.js:formatted:12109)
Ya (main.9cac5c4f.js:formatted:12068)
Ha (main.9cac5c4f.js:formatted:12056)
za (main.9cac5c4f.js:formatted:12011)
ba (main.9cac5c4f.js:formatted:11941)
enqueueSetState (main.9cac5c4f.js:formatted:10547)
O.setState (main.9cac5c4f.js:formatted:7392)
t (main.9cac5c4f.js:formatted:6630)
(anonymous) (main.9cac5c4f.js:formatted:6638)
Promise.then (async)
n._loadModule (main.9cac5c4f.js:formatted:6637)
n.componentWillMount (main.9cac5c4f.js:formatted:6608)
li (main.9cac5c4f.js:formatted:10594)
Ii (main.9cac5c4f.js:formatted:11117)
da (main.9cac5c4f.js:formatted:11833)
ha (main.9cac5c4f.js:formatted:11854)
Ga (main.9cac5c4f.js:formatted:12109)
Ya (main.9cac5c4f.js:formatted:12068)
Ha (main.9cac5c4f.js:formatted:12056)
za (main.9cac5c4f.js:formatted:12011)
ba (main.9cac5c4f.js:formatted:11941)
ou (main.9cac5c4f.js:formatted:12498)
au (main.9cac5c4f.js:formatted:12508)
hu.render (main.9cac5c4f.js:formatted:12705)
(anonymous) (main.9cac5c4f.js:formatted:12599)
eu (main.9cac5c4f.js:formatted:12435)
vu (main.9cac5c4f.js:formatted:12598)
render (main.9cac5c4f.js:formatted:12755)
(anonymous) (main.9cac5c4f.js:formatted:7334)
o (main.9cac5c4f.js:formatted:26)
(anonymous) (main.9cac5c4f.js:formatted:6753)
o (main.9cac5c4f.js:formatted:26)
(anonymous) (main.9cac5c4f.js:formatted:100)
(anonymous) (main.9cac5c4f.js:formatted:101)

[AndyOGo]

guess this is related https://github.com/webpack/webpack/issues/7499

Could be a problem with sideEffects of webpack treeshaking...

[AndyOGo]

and https://github.com/webpack/webpack/issues/7425

[AndyOGo]

@aze3ma Did you have any chance to look into this?

[AndyOGo]

@martinoss Unfortunately there is no plan/time to maintain react-app-rewired: https://github.com/timarney/react-app-rewired/issues/162#issuecomment-417872507

[AndyOGo]

Guess it's caused by create-react-app-typescript/react-scripts-ts https://github.com/wmonk/create-react-app-typescript/issues/390

[aze3ma]

@AndyOGo Iam sorry for being that busy I will clone it and try to fix it asap.