FormidableLabs / victory-native-xl

A charting library for React Native with a focus on performance and customization.
https://commerce.nearform.com/open-source/victory-native
714 stars 53 forks source link

Compilation fails on web when using Webpack 5 #346

Open Nickersoft opened 2 months ago

Nickersoft commented 2 months ago

Prerequisites

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.

Nickersoft commented 2 months ago

Added a fix here: https://github.com/FormidableLabs/victory-native-xl/pull/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.