question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styled component and webpack production mode and React lazy throw error

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:26 (2 by maintainers)

github_iconTop GitHub Comments

15reactions
WebTravelcommented, Jul 4, 2019

This issue needs to reopen

11reactions
probablyupcommented, May 1, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found