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

Compilation fails on web when using Webpack 5 #346

Open
3 tasks done
Nickersoft opened this issue Aug 27, 2024 · 1 comment
Open
3 tasks done

Compilation fails on web when using Webpack 5 #346

Nickersoft opened this issue Aug 27, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@Nickersoft
Copy link

Prerequisites

  • I have searched the open issues to make sure I'm not opening a duplicate issue
  • I have read through the docs before asking a question
  • I am using the latest version of victory-native-xl

Describe Your Environment

What version of victory-native-xl are you using? (can be found by running npm list --depth 0 victory-native)

41.1.0

What version of React and React Native are you using?

React 18.2.0
React Native 0.72.10

What version of Reanimated and React Native Skia are you using?

Reanimated 3.3.0
React Native Skia 0.1.196

Are you using Expo or React Native CLI?

Expo

What platform are you on? (e.g., iOS, Android)

Web

Describe the Problem

Expected behavior: [What you expect to happen]

I would expect my project to build fine.

Actual behavior: [What actually happens]

Webpack seems to not be able to read the compiled JS files, despite using Babel. The generated JS has raw JSX in it, so I'm not sure if that has anything to do with it.

ERROR in ./node_modules/victory-native/dist/pie/PieSliceAngularInset.js 29:12
Module parse failed: Unexpected token (29:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         return null;
|     }
>     return (<react_native_skia_1.Path path={path} paint={insetPaint} {...rest}>
|       {children}
|     </react_native_skia_1.Path>);
 @ ./node_modules/victory-native/dist/pie/index.js 6:31-64
 @ ./node_modules/victory-native/dist/index.js 51:12-28
 @ ./components/Button/Chart.tsx 1:267-292

Additional Information

I have a reproduction opened here. Just clone the repo, run yarn install, then yarn storybook:web. While I know there are special web instructions for Skia, this error is particularly strange because it seems to be a parser error and has nothing to do with the actual loading of the WASM. My reproduction is a fresh template directory for Storybook's React Native plugin. All I added was a Chart wrapper that leverages Skia.

This was referenced Aug 27, 2024
@Nickersoft
Copy link
Author

Added a fix here: #347.

Changing the mode to react-jsx doesn't seem to impact its ability to run on mobile + web. I cross-referenced with other RN libraries (like react-native-gifted-charts) and this is the TS jsx setting they use.

@carbonrobot carbonrobot added the enhancement New feature or request label Nov 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants