'solid-js/web' does not provide an export named 'effect'

[aminya]

trafficstars

Describe the bug

I am trying to use Kobalte in Astro, but it errors out because of missing effect export in solid-js/web when it tries to do server-side rendering it seems.

file:///media/aminya/test/node_modules/.pnpm/@[email protected][email protected]/node_modules/@kobalte/core/dist/esm/index.js:18
import { isServer, createComponent, effect, setAttribute, template, Dynamic, mergeProps as mergeProps$1, memo, Portal, use, spread, insert, style, delegateEvents } from 'solid-js/web';
                                    ^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'effect'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async nodeImport (file:///media/aminya/test/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55109:17)
    at async ssrImport (file:///media/aminya/test/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/media/aminya/test/packages/website_admin/src/components/Tables/Table/CreateButton.tsx:7:31)
    at async instantiateModule (file:///media/aminya/test/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

To Reproduce Steps to reproduce the behavior:

1. Create an Astro project with Solid-js
2. Use client:load for the Solid-js component
3. Import a component like Dialog from @kobalte/core
4. See error

Expected behavior

solid-js/web doesn't export effect in some scenarios. That should be handled.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser Edge

Additional context

The versions:

    "@astrojs/solid-js": "^4.1.0",
    "@kobalte/core": "^0.12.6",
    "solid-js": "^1.8.16",
    "astro": "^4.6.1",

[jer3m01]

Kobalte exports 2 builds, a precompiled client ESM and an uncompiled JSX version meant for server rendering.

It looks like Astro is importing the wrong one, I'll have a look.

[aminya]

I tested "@kobalte/core": "^0.13.1", but it still has the issue even with import Dialog from "@kobalte/core/dialog"

file:///node_modules/@kobalte/core/dist/chunk/XYP6O4WD.js:10
import { createComponent, mergeProps, memo, Portal } from 'solid-js/web';
                                      ^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'memo'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async nodeImport (file:///node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55096:17)
    at async ssrImport (file:///node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:24)
    at async eval (test.tsx:7:31)
    at async instantiateModule (file:///node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

Could you also include the src files and allow importing it from the package.json? Something like the following

Details

  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "solid": "./dist/index.jsx",
      "default": "./dist/index.js"
    },
    "./*": {
      "types": "./dist/*/index.d.ts",
      "solid": "./dist/*/index.jsx",
      "default": "./dist/*/index.js"
    },
    "./src/*": {
      "solid": "./src/*/index.tsx",
      "default": "./src/*/index.ts"
    }
  },

[jer3m01]

Conversation continued in #408.

[paularmstrong]

This seems to still be an issue with 0.13.3. Using @solid-js/start ^1 and I'm just sort of stuck and unable to even try Kobalte to see if it will work with my project at all.

#408 wasn't published yet, so I pulled down the repo, built core, and plugged it into my node_modules, but the issue is still present.

[aminya]

This seems to still be an issue with 0.13.3. Using @solid-js/start ^1 and I'm just sort of stuck and unable to even try Kobalte to see if it will work with my project at all.

#408 wasn't published yet, so I pulled down the repo, built core, and plugged it into my node_modules, but the issue is still present.

#408 is just a workaround. You should import the src files instead of dist files manually

[paularmstrong]

You should import the src files instead of dist files manually

Not really sure how this is intended to happen. Documentation and the PR referenced make no indication of the issue or how to work around it.

[aminya]

Instead of importing the dialog via import Dialog from "@kobalte/core/dialog", import it like @kobalte/core/src/dialog.

The documentation should mention this somewhere. Or better just not include built files and let the bundlers take care of this. There is no benefit in including these dist files IMO.

[GiyoMoon]

Hey @aminya, did you revalidate this issue recently? I just set up a fresh astro project, added the solid integration and kobalte works perfectly fine for me. With both import { Dialog } from "@kobalte/core" (deprecated) and import { Dialog } from "@kobalte/core/dialog"

[SinnerAir]

The problem is reproduced when using pnpm workspace + astro + kobalte. repo reproduce

pnpm version 9.6.0 astro 4.13.0 kobalte: 0.13.4

Command start pnpm -F astro start

[SinnerAir]

Solved the problem by specifying the export in the package.json, which simply re-exports kobalte "exports": { ".": { "solid": "./node_modules/@kobalte/core/dist/index.jsx" } }

[GiyoMoon]

@SinnerAir You are missing proper exports in the package.json of your ui-kit package, this is not a Kobalte issue. Add the following to ui-kit/package.json:

  "exports": {
    ".": {
      "types": "./index.ts",
      "solid": "./index.ts",
      "default": "./index.ts"
    }
  }