Build error "'solid-js/web' does not provide an export named 'memo'"

[alexvuka1]

Description

The build was working on @ark-ui/solid version 0.9.0, but upgrading broke it.

Link to Reproduction

https://stackblitz.com/edit/github-sebcjd?file=src%2FBasicNumberInput.tsx

Steps to reproduce

1. Go to the stackblitz
2. Check the console output

Ark UI Version

0.10.1

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[charmbyte]

I am also getting this error. Rolling back to 0.9 in my dependencies fixed the issue for now.

[charmbyte]

@alexvuka1 Were you able to figure this out?

[cschroeter]

Thanks for taking your time to report this issue. I'm not 100% sure about solid and this hybrid server / client stuff but I think there are ways to exclude @ark-ui/solid

I have a running solid app for Park UI here https://stackblitz.com/github/cschroeter/park-ui/tree/main/examples/solid/vite?file=src/examples/authentication-card.tsx

[gtumedei]

This is possibly related to #1045, as the error is very similar and the fix for that issue seems to have been reverted in 0.10 (in commit 877e0c4). Are there any implications in adding back solid({ solid: { generate: 'ssr', hydratable: true } }) in vite.config.mts?

[ryoid]

This is possibly related to #1045, as the error is very similar and the fix for that issue seems to have been reverted in 0.10 (in commit 877e0c4). Are there any implications in adding back solid({ solid: { generate: 'ssr', hydratable: true } }) in vite.config.mts?

Can confirm manually building and exporting the lib with the generate ssr config resolved the issue for me, not sure what's the implications. If there are indeed issues with the ssr build when using in spa, maybe 2 builds with conditional exports could help.

[cschroeter]

Setting generate: 'ssr' breaks Storybook.

A simple story like

export const Foo = () => {
  return <h1>hello</h1>
}

will not render any output. I can try to use solid({ ssr: true })
or if you have any example project in solid that works for ssr happy to adapt our build config

[cschroeter]

After spending 1-2h on that topic I somewhat understand the issue. I'm happy to add conditional export like node to our entrypoints.

"./carousel": {
  "types": "./carousel/index.d.ts",
  "node": "./dist/server/index.server.mjs",
  "import": "./carousel/index.mjs",
  "require": "./carousel/index.cjs"
},

But apparently that is not enough since Solid Start apparently also requires an additional solid export like explained in a community library here:

https://github.com/solidjs-community/tsup-preset-solid#usage-gotchas

Since this is not documented on their official website or the SolidStart project, we will wait until we add support for this. Thanks for your understanding.

[jgillich]

As a newcomer to Solid and Ark, I'm a little confused here. Are you saying this is a problem that needs to be addressed in SolidStart? Or would it be possible to provide a separate build for SolidStart users? Thanks!

[apatrida]

@cschroeter some notes here from the Solid-Start team on this issue.
https://discord.com/channels/722131463138705510/910635844119982080/1166193851686469642

[cschroeter]

@alexvuka1 @apatrida @jgillich @ryoid @charmbyte

Please try @ark-ui/solid v1.0.0-beta.2

Please note that path imports like @ark-ui/solid/accordion are currently not supported

[jgillich]

Thank you very much, the issue appears to be resolved, but I'm running into another issue with SegmentGroup. This worked fine before (master from yesterday built with generate: ssr)

I have just the SegmentGroup sample code in a SolidStart route:

import { SegmentGroup } from "@ark-ui/solid";
import { Index } from "solid-js";

export default () => {
  const frameworks = ["React", "Solid", "Vue"];
  return (
    <>
      <SegmentGroup.Root>
        <SegmentGroup.Indicator />
        <Index each={frameworks}>
          {(framework) => (
            <SegmentGroup.Item value={framework()}>
              <SegmentGroup.ItemText>{framework()}</SegmentGroup.ItemText>
              <SegmentGroup.ItemControl />
            </SegmentGroup.Item>
          )}
        </Index>
      </SegmentGroup.Root>
    </>
  );
};

The inital page loads fine, but when you change anything and trigger a live reload, you get:

In my route with some other stuff, the initial load works too, but the error pops up after a second or two without changing anything, so I'm guessing it's not actually a problem with live reload but rather any state update..

[cschroeter]

@jgillich
Not sure. I tried this snippet in a freshly created solid-start app without any issues. Please verify your setup and open a new issue if the problem persist and provide an example app to follow along.

Bildschirmaufnahme.2023-10-25.um.15.49.26.mov

[jgillich]

Ah I'm sorry, cause was ParkUI pulling in a different version of ark anatomy and zagjs and node somehow loading the wrong version in the wrong place 🤷. Fix was simple:

npm i @ark-ui/anatomy@v1.0.0-beta.1