React styled component causes build error in production, but runs fine in development

Question

I am having a weird problem with my code, I have a styled component div that wraps around another component like this:

<ContentWidget>
  <BookDay />
</ContentWidget>

(Bookday returns an empty div so this should not be a problem)

My styled component ContentWidget is an empty styled component div and is declared like this:

const ContentWidget = styled.div``;

The weird thing is I have more contentwidgets filled with content that load other components inside of my webapp. All imports are fine because it works in development perfectly fine. But whenever I run npm run build I get the following error message in my console.

ERROR in ./app/containers/Dashboard/Dashboard.js 41:18 Module parse failed: Unexpected keyword 'var' (41:18) You may need an appropriate loader to handle this file type. | import ForegroundBlob from "basicComponents/ForegroundBlob/ForegroundBlob"; | import ForegroundBlobWrapper from "basicComponents/ForegroundBlob/ForegroundBlobWrapper";

import BookDay, { var _ref = | / # PURE / | _jsx(ContentWidget, {}, void 0, _jsx(BookDay, {})); } from "components/BookDay/BookDay"; @ ./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 @ ./app/containers/PracticePage/Loadable.js @ ./app/containers/App/App.js @ ./app/app.js @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js

I found out that whenever I just change the tags with a standard div tag, it seems to build like it should. I have never been as confused as I have been now.

Answer 1

Okay so I found out myself after a little bit of debugging.

It seems that the "@babel/plugin-transform-react-constant-elements", babel plugin messes with styled components.

Answer 2

I was getting this error:

Module parse failed: Unexpected keyword 'var' (13:23) You may need an appropriate loader to handle this file type.

I am unclear on exactly why, but moving styled components I was using into the file where I was using them, rather than importing them from a different file, resolved the problem. It does in fact seem to be some sort of issue with how "@babel/plugin-transform-react-constant-elements" deals with styled-components ; may have to do something with circular dependencies.