Expo web build fails because of JSX in .js files

user_8270669 0
Viewed 725

I have a Expo project to which I added victory-native library. When building for the web, Webpack complains about missing loader. The errors are of this pattern below and appear for all the files from this particular library

./node_modules/victory-native/src/components/victory-clip-container.js 10:22
Module parse failed: Unexpected token (10:22)
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
| 
| export default class extends VictoryClipContainer {
>   static defaultProps = Object.assign({}, VictoryClipContainer.defaultProps, {
|     groupComponent: <G />,
|     rectComponent: <Rect />,

How do I add the correct loader? Do I add something to the babel config? Or should I override the webpack configuration? Babel is currently using only babel-preset-expo

react-native-web expo react-native webpack
3 Answers

As stated by Michael, native and web code can be differentiated using the naming in the files.

A simple complete solution is:

victory.js:

import * as Victory from 'victory';
export default Victory;

victory.native.js:

import * as Victory from 'victory-native';
export default Victory;

And when you want to use the victory:

import Victory from "./victory"; // this will default to victory.js or victory.native.js 
                                 // depending on the compilation target platform. 

const VictoryBar = Victory.VictoryBar;
const VictoryChart = Victory.VictoryChart;
const VictoryTheme = Victory.VictoryTheme;

...
{
...
    return <View style={styles.container}>
        <VictoryChart width={350} theme={VictoryTheme.material}>
            <VictoryBar data={data} x="quarter" y="earnings" />
        </VictoryChart>
    </View>
}
user_18708730

Whilst using victory-native in Expo apps that target iOS & Android is fully supported, we do not support building for the web with victory-native.

However, as both victory-native and victory share the same public API, it's possible to configure your Expo project to automatically use victory-native when building your native apps for iOS & Android, and victory when building your web app.

yarn add -D @expo/webpack-config

Then, create a webpack.config.js file at the root of your Expo project

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // resolve victory-native as victory for the Web app
  config.resolve.alias['victory-native'] = 'victory';

  return config;
};

Refered from the official documentation .

user_81700920

You cannot use victory-native imports for web and you cannot use victory import for react native.

I solved the issue by creating an file named victory.native.ts and victory.ts which containing all necessary imports.

victory.native.ts:

import * as Victory from 'victory-native'

victory.ts:

import * as Victory from 'victory'

Now you can import victory.ts in web and app.

user_59054660
Related