2

I've built an app that I'd like to deploy to netlify but it won't work. The app is a react vite app using typescript and chakra-ui. The build is succesful but I get a lot pf these errors: 'node_modules/@chakra-ui/button/dist/chunk-DA7QIPTJ.mjs (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@chakra-ui/button/dist/chunk-DA7QIPTJ.mjs" was ignored.'

It works fine when I run it locally with 'npm run dev' and also after the build with 'npm run preview' but I get the errors shown in the image after I deploy it to netlify.

The error I'm getting on the netlify page.

Can someone please help?

I've also tried deploying it to github pages and vercel but the same thing happens there.

Improve this question
5
  • When you do a npm run build you should produce a dist folder. Look at the index.html <head> and in the assets folder. Does your application work and just some scripts / assets are missing? Commented Dec 1, 2023 at 12:55
  • Here is my index.html in the dist folder: imgur.com/a/XwqRdy7 Is there something missing that should be included after I run 'npm run build'? This is my first time trying to deploy a react vite app. Commented Dec 1, 2023 at 18:55
  • Your asset urls look wrong. But its hard to tell just looking at the index.html. Your URLs include the a folder called "game-discovery" is this folder present in the dist folder with the assets underneath it? Commented Dec 2, 2023 at 21:29
  • Yes I agree, I've tried changing the url's in index.html but then the app stops working when I do 'npm run preview', here is my file structure for the project: imgur.com/a/c9BG7qg Here is my repository on github: github.com/FelixGustafsson/game-discovery There is no game-discovery folder underneath my dist folder no but that's the name of the main folder. PS. I really appreciate you helping me! Commented Dec 3, 2023 at 7:19
  • Ah the repository helped Commented Dec 3, 2023 at 17:42

1 Answer 1

Reset to default
2

You set the base in your vite config. Which you can use to define a prefix for all your assets. Once you remove it your linked assets in your html file should work.

  1. Remove base in your vite config
  base: "/game-discovery/",
  1. npm run build
  2. Success 🎉:D
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you this worked! I read the vite docs for deploying to netlify and probably misunderstood what they said about the vite config file and base.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.