Ark + Astro + Solid does not work.

[j]

Description

When I use Ark + Solid with Astro.js, I expect it to work, but I'm getting the error:

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

Link to Reproduction

https://github.com/j/ark-astro

Steps to reproduce

1. pnpm i
2. pnpm dev
3. Visit Page to see error

Ark UI Version

0.6.0

Framework

• React
• Solid
• Vue

Browser

Arc

Additional Information

No response

[cschroeter]

Thanks for taking the time to report this issue. I've used your example and added an Astro example to the repository. Using workspace resolution I'm happy to report everything works fine. Using a pinned version I can reproduce your issue

[spaaacetoast]

Unfortunately i'm running into the same error, using workspace resolution is nice but won't work for our external projects ( unless i'm missing something )

adding @ark-ui/solid to vite.ssr.noExternal causes the error to be different

[vite] Error when evaluating SSR module /node_modules/.pnpm/@ark-ui+solid@0.7.0_solid-js@1.7.7/node_modules/@ark-ui/solid/index.mjs: failed to import "/node_modules/.pnpm/@ark-ui+solid@0.7.0_solid-js@1.7.7/node_modules/@ark-ui/solid/date-picker/date-picker-month-select.mjs"
|- TypeError: __vite_ssr_import_0__.template is not a function
    at eval (C:/code/watkanikdoen-frontend/node_modules/.pnpm/@ark-ui+solid@0.7.0_solid-js@1.7.7/node_modules/@ark-ui/solid/date-picker/date-picker-month-select.mjs:14:51)
    at async instantiateModule (file:///C:/code/watkanikdoen-frontend/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:54405:9)

cloning ark locally and using "@ark-ui/solid": "../ark/packages/solid", as dependency makes it actually run! but this is no reliable way of using this project..

in the locally cloned ark project once I change the package.json > main from "main": "src/index.ts" to "main": "dist/index.mjs" i'm able to reproduce this error. something might be going wrong in the build process or the build results causes astro/vite/solid to mess something up. something similar might be

withastro/astro#4652
x64Bits/solid-icons#45

[spaaacetoast]

After a long try everything, break everything session. I've been able to close down on where the issue might lie.

building the project not trough vite but trough rollup with the simpel config

import withSolid from 'rollup-preset-solid'

export default withSolid({
  input: 'src/index.tsx',
  targets: ['esm', 'cjs'],
})

allows me to use astro, I will do some more testing to see where the exact issue lies after I got some sleep

[spaaacetoast]

@cschroeter so from my testing i'm not able to get the build working trough vite. the output is majorly different and seems to be aggressively shaken. rollup however creates an build that astro is happy with!

taking notes from https://github.com/kobaltedev/kobalte exchanged value in pnpm build with rollup -c

using

"dependencies": {
  "@ark-ui/solid": "https://gitpkg.now.sh/spaaacetoast/ark/packages/solid?5013b41ba389a6a0b817d2578a48cb3e49b43349",
}

as dependency works brilliantly

as an example I added node ssr to the solid example @ https://github.com/spaaacetoast/ark/tree/solid-working-with-astro-ssr to replicate behaviour. tagged version doens't work like you mentioned, my git url and workspace does

Is it a possibility to use rollup instead of vite for building @ark-ui/solid?

[cschroeter]

@spaaacetoast thanks for going for a deep dive here. I will have a chat with @segunadebayo on Monday and we take it from there.

[cschroeter]

For reference:

solidjs/vite-plugin-solid#40
https://github.com/brillout/vite-plugin-ssr/blob/main/examples/solid-ssr/vite.config.ts

[cschroeter]

@spaaacetoast Could you pls try @ark-ui/solid@0.7.2-beta.4

[spaaacetoast]

@cschroeter it seems to work brilliantly! In my project and in a test project, thanks! :)

[cschroeter]

The only thing I've changed is to set solid({ solid: { generate: 'ssr' } }) in the vite.config.ts

The generated output changed from

const _tmpl$ = /*#__PURE__*/template(`<option>`);

to

const _tmpl$ = ["<option", ">", "</option>"];

But tbh I'm not sure what the implication are for none ssr setups

[cschroeter]

Solved with 0.8.0