#Error hydrating

22 messages · Page 1 of 1 (latest)

pastel flare
#

Hi
I'm using react and solidjs in astrojs project and when add solidjs component show this error: Error hydrating /src/features/solid/analyzing/form/solidForm.tsx SyntaxError: The requested module '/node_modules/.vite/deps/solid-js_jsx-dev-runtime.js?v=888e9cbc' does not provide an export named 'jsxDEV'
help me
astro config : ```// @ts-check
import { defineConfig } from "astro/config";

import react from "@astrojs/react";

import node from "@astrojs/node";

import solidJs from "@astrojs/solid-js";

// https://astro.build/config
export default defineConfig({
output: "server",

integrations: [
react({
include: ["/react/*"],
}),
solidJs({
include: ["/solid/*"],
}),
],

adapter: node({
mode: "standalone",
}),
});

and using like this:

<SolidForm client:only="solid-js"/>

cunning marlin
#

What does your solidForm.tsx look like?

#

Does the error disappear if you comment out the output and adapter config options?

#

Can you show your package.json as well please?

#

Also, is there a specific reason why you‘re using client:only instead of some variant that serves prerendered HTML before hydrating it, like client:load?

#

The reason why I‘m asking for the package.json is to see if you‘re using the latest versions of Astro and the Solid integration. If you‘re installing Solid in a project that is older and hasn’t been updated, the Astro & Solid integration versions might maybe not fit together

#

You can always run npx @astrojs/upgrade to check, or the equivalent in your package manager if you don‘t use NPM

pastel flare
# cunning marlin The reason why I‘m asking for the `package.json` is to see if you‘re using the l...

this is package.json ```{
"name": "astro-frontend",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/node": "^8.3.4",
"@astrojs/react": "^3.6.2",
"@astrojs/solid-js": "^4.4.2",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"astro": "^4.16.6",
"formik": "^2.4.6",
"jszip": "^3.10.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"solid-js": "^1.9.3",
"typescript": "^5.6.3",
"yup": "^1.4.0"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.14"
}
}

#

solidForm```
import { createSignal } from "solid-js";

export default function SolidForm() {
const [count, setCount] = createSignal(0);
const increment = () => setCount((prev) => prev + 1);

return (
<div>
<span>Count: {count()}</span>{" "}
{/* Only count() is updated when the button is clicked. */}
<button type="button" onClick={increment}>
Increment
</button>
</div>
);
}

#

astro page : ```---
import RootLayout from "@/layouts/rootLayout.astro"
import SolidForm from "@/features/solid/analyzing/form/solidForm";
import Container from "@/components/astro/container.astro";

<RootLayout>
<Container>
<div class="text-gray-400">
<div class="flex items-center">
<svg
class="flex-shrink-0 w-4 h-4 me-2 dark:text-gray-300"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
</svg>

    </div>
  </div>
  <SolidForm client:only="solid-js"/>
</Container>

</RootLayout>

cunning marlin
#

Could you try importing the components without using the @/… syntax in the paths, but rather using relative paths to the files in your projects?

#

Also, what does your tsconfig.json contain?

#

It would need to contain something like this if SolidJS is your project‘s primary framework:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}
pastel flare
#

yes tsconfig :{ "extends": "astro/tsconfigs/strict", "compilerOptions": { "jsx": "preserve", "jsxImportSource": "solid-js", "baseUrl": ".", "paths": { "@/*": [ "src/*" ] } } }

cunning marlin
#

Hmm. Could you try removing the baseUrl setting and use relative paths to import your components?

pastel flare
#

but error on console: Error hydrating /src/features/solid/analyzing/form/solidForm.tsx SyntaxError: The requested module '/node_modules/.vite/deps/solid-js_jsx-dev-runtime.js?v=aec19419' does not provide an export named 'jsxDEV' (at solidForm.tsx:11:7)

cunning marlin
#

Yeah, this is really strange. Everything you sent looks ok to me and similar to the Astro SolidJS examples I've seen

#

The only potential reason I still see is that the dual-framework approach with React and SolidJS is causing this. If possible, could you try removing the React integration altogether?

#

(then you also don't need the include setting in the solidJs config object anymore)

pastel flare
#

remove baseUrl but not work

cunning marlin
#

Ok, so sadly all the possible solution ideas I had don't seem to work. Sorry about that. Could you create a minimal reproduction of your issue on StackBlitz so we can share this with others and maybe create an issue if it's actually a bug that this isn't working?