🐛 BUG: styled-components exports weirdly

[stephencombs]

What version of astro are you using?

0.21.12

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Importing modules from the styled-components package returns one of the following errors: 'vite_ssr_import_4.default.div is not a function' or 'module not found'. @aFuzzyBear and I looked further into the error and have determined this may be due to the way styled-components handle their exports.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gmrbs4

[jonathantneal]

Tested with the 0.22.17.

The error I see is:

node_modules/styled-components/dist/styled-components.browser.esm.js:1:62: error: Could not resolve "react-is" (mark it as external to exclude it from the bundle)

This seems different than your error. vite_ssr_import_4 seems like a dependency not being correctly replaced in client side JavaScript.

[tony-sull]

Looks similar to #2146, is this related to how VITE_ASSET placeholders are replaced in CSS assets?

[matthewp]

Hey @stephencombs, sorry for taking so long to respond. I updated the example and am not able to recreate the issue any more. I'm not sure if that's because the issue has been fixed or if its because I didn't recreate it correctly.

If you're still seeing this problem please file a new issue with a new reproduction on the latest releases of Astro. Thanks!

[craig-jennings]

I am also experiencing this issue with astro@1.0.6. The dev server works as expected, but when I try to build the project, it errors out with

error _styled_components.default.div is not a function

Here's a simple env that reproduces the error - https://stackblitz.com/edit/github-cbwbwl. It's based off of the astro.new "Just the Basics" repo. All I did was install styled components and wrap the Counter component in a styled container. Running astro build in this environment fails with the above error.

[whoisryosuke]

Got this error today using Styled Components in Astro v1.1.3 while running yarn build.
Nothing fancy, just installed SC, used it in a React component, used that in an Astro page/component.

Here's a branch that produces error. Maybe CodeSandbox-able here?

The error I received:

 yarn build
yarn run v1.22.11
$ astro build
11:16:29 PM [build] output target: static
11:16:29 PM [build] Collecting build info...
11:16:29 PM [build] Completed in 452ms.
11:16:29 PM [build] Building static entrypoints...
11:16:32 PM [build] Completed in 3.24s.

 building client 
Completed in 0.99s.


 generating static routes 
 error   styled.button is not a function
TypeError: styled.button is not a function
    at file:///C:/Development/ReactJS/ryosuke-astro-blog/dist/entry.mjs?time=1662963393845:1403:23
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async generatePages (file:///C:/Development/ReactJS/ryosuke-astro-blog/node_modules/astro/dist/core/build/generate.js:70:20)    at async staticBuild (file:///C:/Development/ReactJS/ryosuke-astro-blog/node_modules/astro/dist/core/build/static-build.js:67:5)
    at async AstroBuilder.build (file:///C:/Development/ReactJS/ryosuke-astro-blog/node_modules/astro/dist/core/build/index.js:82:5)
    at async AstroBuilder.run (file:///C:/Development/ReactJS/ryosuke-astro-blog/node_modules/astro/dist/core/build/index.js:123:7)    at async build (file:///C:/Development/ReactJS/ryosuke-astro-blog/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:///C:/Development/ReactJS/ryosuke-astro-blog/node_modules/astro/dist/cli/index.js:138:14)
error Command failed with exit code 1.