styled-components: Styled component and webpack production mode and React lazy throw error
Hello. I use styled component in my project. When I run build in my porduction mode I get message in my console.
Uncaught error: Additional arguments undefined
I can say this error appear when I use production mode in webpack config.
"scripts": {
"build": "webpack --mode production --config ./assets/webpack",
}
...
"dependencies": {
"react": "^16.8.1",
"styled-components": "^4.1.1",
}
I try look for resolve this problem and I discovered this become problem after I start to use React.lazy in my project. I use suspense in router file, it recomended in react documentation: https://reactjs.org/docs/code-splitting.html#route-based-code-splitting
My code:
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('@pages/Home'));
const RoutesList = () => (
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={props => <Home {...props} />} />
</Switch>
</Suspense>
)
export const Routes = withRouter(RoutesList);
I don’t understand why styled component doesn’t work ONLY production mode.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 7
- Comments: 26 (2 by maintainers)
This issue needs to reopen
Weird, but I don’t see what this has to do with styled-components? Make sure you’re using an updated version of
react-is, that usually causes all sorts of issues with the newer APIs interoperating with each other.I have the same issue. Any workarounds?
I had this problem and I fixed it by correcting a circular dependency as many of my Button Components shared the same base styles.
Thanks, it’s really work for me. I fixed all circular dependencies and it helps me.
@neil-gebbie-smarterley Thanks again. I’ve replaced every single
styled(component)with the requiredstyled(props => <Component {...props}/>)but with no change. I’ll continue investigating and report back here if I have any luck.Update: After this failed I tried to attack this issue using the other piece of information noted in the issue, which is that this is likely as a result of a circular dependancy. I configured the circular dependancy plugin as described here https://github.com/zeit/next.js/issues/9461, although I’m sure it could be achieved with the normal webpack circular dependancy plugin as well.
It showed a TON of circular dependancies, which seemed to exist mainly in my components folder, which is nested into specifc folders with index.js files. To solve this, for many I simply had to change my imports.
Originally I had my imports in files within the .component folder.
import {someComponent} from "./"orfrom "../folder"and instead import from a specific file such asimport {someComponent} from '"/OtherFile" or "../Otherfile". It was nice that this was just needed within the indexed folder and not throughout the whole app.Although I’m still working at resolving all the circular dependancies, I cleared up enough of them that whatever was blocking my production build has seemed to clear up. I hope this is helpful to someone!
Same issue:
Only happens in production.
@probablyup because the error is caused in this code’s fragment: