Error: require() of ES Module not supported

[amirhhashemi]

I'm trying to use solid-aria in Astro but I get :

require() of ES Module myproject/node_modules/@solid-aria/focus/dist/cjs/index.js from myproject/node_modules/@solid-
aria/selection/dist/index.cjs not supported. index.js is treated as an ES module file as it is a .js file whose nearest parent package.json 
contains "type": "module" which declares all .js files in that package scope as ES modules. error. 

Any idea why that happens?

I'm getting this error only when using solid-aria so I asked here instead of the Astro server, And it doesn't look like an Astro issue.

Here is a small stackblitz to reproduce. The error is slightly different here but I think it's the same thing.

https://stackblitz.com/edit/github-7cxbsf?on=stackblitz

[fabien-ml]

@thetarnav maybe it's because the two packages are not built the same way ? In main branch selection is built with tsup whereas focus is built with rollup. In develop all packages use rollup.

[thetarnav]

I had some weird issues with the package resolution in Astro. I don't think it's about the build tool, but rather the package.json config. I think I also "fixed" it by switching to tsup—it requires a simpler export config. Or maybe the problem is with rollup creating cjs/index.js instead of index.cjs files, which may be interpreted as mjs. not sure will try to play with it and see what works

by the way, what's the current reason for using rollup? Do solid-aria ships jsx in any packages? Aren't those all primitives? If the only reason is the @solid-primitives/props package, then we want to resolve it (https://github.com/solidjs-community/solid-primitives/issues/201)

[fabien-ml]

Yes some packages ship jsx

[thetarnav]

jsx as like HTML elements? The import problem was solved by using .cjs for common js exports, (this is why tsup was working) but now I have this familiar fellow:

[thetarnav]

what's funny is if I remove solid-aria and use @solid-primitives/props directly, it works. It only has a problem if it's a "nested dependency" app <- @solid-aria/focus <- @solid-primitives/props

[amirhhashemi]

Yeah. Actually, I opened an issue in the Astro repo a few hours ago about that. I thought the problem was @solid-primitives/props so I created a stackblitz with that package installed but it was working fine. Then I installed solid-aria which brought me here.

[amirhhashemi]

sadly it doesn't seem to be fixed anytime soon.

[amirhhashemi]

https://github.com/withastro/astro/issues/4652

[fabien-ml]

jsx as like HTML elements?

The import problem was solved by using .cjs for common js exports, (this is why tsup was working) but now I have this familiar fellow:

Yes, the focus package export a FocusScope component for example.

Stupid question, does it works with solid-start or it's broken on all ssr environment ? 🤨

[thetarnav]

I'm too over it for today to test solid-start :P But it was working there before. I made sure motionone was compatible, and I don't think anything changed since then.

[jchatard]

I just encountered the issue using Solid Start (while updating to 0.2.5). I'm using "@solid-aria/overlays": "^0.1.3", which depends on @solid-primitives/props.

[amirhhashemi]

@jchatard I think https://github.com/solidjs/vite-plugin-solid/pull/68 fixed it. Probably solid-start is not using the latest version of vite-plugin-solid

[jchatard]

@ahhshm I created a repro forcing vite-plugin-solid 2.4.0 and it fires the same error in package.json (at the bottom)

https://github.com/jchatard/web_template_is_not_a_function/blob/main/package.json

I get the following error:

An error occured while server rendering /:

    web.template is not a function
TypeError: web.template is not a function
    at Object.<anonymous> (/Users/jchatard/Desktop/web_template/node_modules/.pnpm/@solid-primitives+props@2.2.2_solid-js@1.6.1/node_modules/@solid-primitives/props/dist/cjs/index.js:46:33)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/jchatard/Desktop/web_template/node_modules/.pnpm/@solid-aria+interactions@0.1.4_solid-js@1.6.1/node_modules/@solid-aria/interactions/dist/index.cjs:538:21)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:527:24)
    at async nodeImport (file:///Users/jchatard/Desktop/web_template/node_modules/.pnpm/vite@3.2.3/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:53132:21)
    at async eval (/node_modules/.pnpm/@solid-aria+overlays@0.1.3_solid-js@1.6.1/node_modules/@solid-aria/overlays/dist/source/createOverlay.js:19:31)
    at async instantiateModule (file:///Users/jchatard/Desktop/web_template/node_modules/.pnpm/vite@3.2.3/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:53053:9

[jchatard]

But adding:

"pnpm" : {
    "overrides": {
      "@solid-primitives/props": "3.0.1", // <-- this guy
      "vite-plugin-solid": "2.4.0"
    }
  }

Now it works.

[thislooksfun]

I am running into this issue as well. Based on the errors, it seems that since the package.json file has "type": "module" and the cjs exports end in .js, node is trying to load them as if they are ESM files, which is causing it to error. I have opened an issue upstream with rollup-preset-solid: https://github.com/solidjs-community/rollup-preset-solid/issues/12 to have the files generated with the proper extensions.