Styled component and webpack production mode and React lazy throw error
See original GitHub issueHello. 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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:7
- Comments:26 (2 by maintainers)
Top Results From Across the Web
styled components breaks in production only - Stack Overflow
It works locally because we have webpack running. So the best practice is to move the styled components to a separate un-split file....
Read more >Lazy loading React components - LogRocket Blog
lazy () takes as its argument a function that must return a promise by calling import() to load the component. The returned promise...
Read more >Code Splitting in React using React.lazy and Loadable ...
A file having your app logic and its dependencies. So to generate a separate file for each component or each route we can...
Read more >Error Boundaries - React
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .
Read more >React lazy loading 101 | Uploadcare Blog
One thick app. Let's say you have built a web app for your friend's online shop. It consists of three not so relative...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.