importing solid-styled-components triggers dev server error

[bgoscinski]

Sorry if this is not the right place for this issue - I'm not sure if it belongs here or in solid-styled-components or in vite.

Repro

1. mkdir repro
2. cd repro
3. npm init solid@next - it doesn't matter if we go with TS or not
4. npm install
5. npm install solid-styled-components
6. echo 'import {} from "solid-styled-components"' >> src/root.jsx
7. npm run dev -- --open

$ npm run dev -- --open

> repro@ dev C:\dev\repro
> solid-start dev "--open"

http://localhost:3000
23:37:59 [vite] Error when evaluating SSR module /src/root.jsx:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\dev\repro\node_modules\solid-styled-components\src\index.js
require() of ES modules is not supported.
require() of C:\dev\repro\node_modules\solid-styled-components\src\index.js from C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\dev\repro\node_modules\solid-styled-components\package.json.

    at new NodeError (node:internal/errors:363:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at nodeRequire (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
    at ssrImport (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
    at eval (/src/root.jsx:25:31)
    at instantiateModule (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73464:166)
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\dev\repro\node_modules\solid-styled-components\src\index.js
require() of ES modules is not supported.
require() of C:\dev\repro\node_modules\solid-styled-components\src\index.js from C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\dev\repro\node_modules\solid-styled-components\package.json.

    at new NodeError (node:internal/errors:363:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at nodeRequire (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
    at ssrImport (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
    at eval (/src/root.jsx:25:31)
    at instantiateModule (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73464:166)

Environment

$ npx envinfo --system --npmPackages --binaries
npx: installed 1 in 1.411s

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 7.97 GB / 15.86 GB
  Binaries:
    Node: 16.2.0 - C:\.tools\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\.tools\nodejs\npm.CMD
  npmPackages:
    solid-app-router: ^0.1.3 => 0.1.3
    solid-js: ^1.0.5 => 1.0.6
    solid-meta: ^0.27.0 => 0.27.1
    solid-start: next => 0.1.0-alpha.28
    solid-start-node: next => 0.1.0-alpha.28
    solid-styled-components: ^0.27.1 => 0.27.1
    vite: ^2.4.3 => 2.4.4

[ryansolid]

Yeah vite has some issues in SSR they are working through. For now you can add this to your vite.config.js.

ssr: {
    noExternal: ["solid-styled-components"]
  }

[bgoscinski]

Worked like a charm! Thanks <3