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

Building a for web with vite causes an error when doing a production build #6775

Open
dannyhw opened this issue Dec 1, 2024 · 1 comment
Labels
Platform: Web This issue is specific to web Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@dannyhw
Copy link

dannyhw commented Dec 1, 2024

Description

When running in dev with vite everything works fine, when I run the build for production for example with npm run build && npm run preview in the repro then I get this error

Initially I ran into this error when working on a new vite framework for storybook but I found the same error present in a users example on the discussions here where it works on dev but fails when serving the static files.

index-DvzMhtGV.js:53 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at dl (index-DvzMhtGV.js:53:6327)
    at index-DvzMhtGV.js:53:48672
    at Array.forEach (<anonymous>)
    at Dc (index-DvzMhtGV.js:53:48646)
    at Object.a [as worklet] (index-DvzMhtGV.js:53:50781)
    at o (index-DvzMhtGV.js:53:13912)

image

Steps to reproduce

in the repro:

  1. click the terminal
  2. ctrl + c to end the dev server
  3. use the command npm run build && npm run preview to run a preview of the prod build
  4. note the animation fails and open the browser console to see the error

in general:

  1. setup react native web with vite
  2. add reanimated and add the babel plugin to the react plugin's babel config
  3. add an animated component and attempt to animate it
  4. build for prod

Snack or a link to a repository

https://stackblitz.com/edit/vitejs-vite-wcfpnl?file=package.json

same repo from the stack blitz:
https://github.com/dannyhw/vite-reanimated-web-prod-repro

to run here just do
npm install
npm run build && npm run preview

The example code is actually mostly taken from here: #5814

In which disabling strict mode fixes one problem but then in the build theres this new error

Reanimated version

~3.16.3

React Native version

^0.76.3

Platforms

Web

JavaScript runtime

V8

Workflow

None

Architecture

None

Build type

Release app & production bundle

Device

None

Device model

No response

Acknowledgements

Yes

@github-actions github-actions bot added Missing repro This issue need minimum repro scenario Platform: Web This issue is specific to web labels Dec 1, 2024
@dannyhw dannyhw changed the title Building for web with vite causes an error Building a for web with vite causes an error when doing a production build Dec 1, 2024
@github-actions github-actions bot added Repro provided A reproduction with a snippet of code, snack or repo is provided and removed Missing repro This issue need minimum repro scenario labels Dec 1, 2024
@dannyhw
Copy link
Author

dannyhw commented Dec 1, 2024

I recognise that the setup is a bit strange but vite is now a more common target with the 'one' framework and also with storybook working really well with vite we want to support a way to preview react native web components with a vite setup, so far the main blocker is getting reanimated support done since most other packages we've been able to get working.

It's quite possible that we're just missing some global variable or some configuration but I'm really having a hard time figuring it out. Any help would be greatly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Web This issue is specific to web Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Development

No branches or pull requests

1 participant