Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

got an error when I try to use react #57

Closed
usualoma opened this issue Feb 15, 2024 · 3 comments
Closed

got an error when I try to use react #57

usualoma opened this issue Feb 15, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@usualoma
Copy link
Member

usualoma commented Feb 15, 2024

What version of HonoX are you using?

0.1.0

What steps can reproduce the bug?

Follow the example below to set up react and run npm run dev.
https://github.com/honojs/honox?tab=readme-ov-file#byor---bring-your-own-renderer

What is the expected behavior?

no error

What do you see instead?

[vite] Internal server error: module is not defined
      at eval (/.../node_modules/react/jsx-dev-runtime.js:8:3)
      at instantiateModule (file:///.../node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54696:15)

Additional information

The following changes were made to avoid this

diff --git a/src/vite/index.ts b/src/vite/index.ts
index 2318e86..e9bd409 100644
--- a/src/vite/index.ts
+++ b/src/vite/index.ts
@@ -47,7 +47,7 @@ function honox(options?: Options): PluginOption[] {
       config: () => {
         return {
           ssr: {
-            noExternal: true,
+            noExternal: ['honox'],
           },
         }
       },
@usualoma usualoma added the bug Something isn't working label Feb 15, 2024
@yusukebe
Copy link
Member

Hi @usualoma !

This is related to #43.

React is provided as CommonJS, so it cannot be run as-is in Vite. Therefore, you need to specify it in ssr.external as follows.

export default defineConfig(({ mode }) => {
  return {
    ssr: {
      external: ['react', 'react-dom']
    },
    plugins: [honox()]
  }
})

@yusukebe
Copy link
Member

@usualoma

This is an example project using React!

https://github.com/yusukebe/honox-playground/tree/main/projects/react

@usualoma
Copy link
Member Author

@yusukebe Thank you. I got it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants