Web build fail with syntax error

[Nestoro]

Issue Description

Build fail with syntax error when I try to build on the web. after adding recommended overrides

Steps to Reproduce / Code Snippets

./node_modules/react-native-typing-animation/src/index.js
SyntaxError: /Users/olsen/Documents/magazine/magazine-mono/client/node_modules/react-native-typing-animation/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (37:7):

  35 |
  36 |     return (
> 37 |       <View style={[styles.container, style]}>
     |       ^
  38 |         <Dot x={dotX - dotRadius - dotMargin} y={this.state.y1} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
  39 |         <Dot x={dotX} y={this.state.y2} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
  40 |         <Dot x={dotX + dotRadius + dotMargin} y={this.state.y3} radius={dotRadius} style={dotStyles} dotColor={dotColor} />

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

my config-overrides related to react-native-gifted-chat

module.exports = override(
	...addBabelPlugins('@babel/plugin-proposal-class-properties'),
	(config, env) => {
		config.module.rules.push({
			test: /\.js$/,
			exclude:
				/node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text)/,
			use: {
				loader: 'babel-loader',
				options: {
					babelrc: false,
					configFile: false,
					presets: [
						['@babel/preset-env', { useBuiltIns: 'usage' }],
						'@babel/preset-react',
					],
					plugins: ['@babel/plugin-proposal-class-properties'],
				},
			},
		});

		return config;
	},
);

Expected Results

build succeeded

Additional Information

• Nodejs version: v14.16.1
• React version: 17.0.1
• React Native version: 0.64.2
• react-native-gifted-chat version: 0.16.3
• Platform(s) (iOS, Android, or both?): Web
• TypeScript version: 4.3.2

I tried to just add react-native-typing-animations to the exclude regex but that resulted in a different error

./node_modules/react-native-gifted-chat/lib/GiftedChat.js
Module not found: Can't resolve 'core-js/modules/es6.array.filter.js' in '/Users/olsen/Documents/magazine/magazine-mono/client/node_modules/react-native-gifted-chat/lib'

which seems to be related to the warning i get while building

WARNING (@babel/preset-env): We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

More info about useBuiltIns: https://babeljs.io/docs/en/babel-preset-env#usebuiltins
More info about core-js: https://babeljs.io/docs/en/babel-preset-env#corejs

but since i do not have a specified corejs dependency in my package json and neither do you i am not entirely sure which one to pick. i managed to resolve this by adding quite recent corejs dependency to the project and specifying the version in the override.

basically the issue is not that i have a problem but that the documentation is out of date since i came up with a solution while producing information for this issue.

[andreassh]

Agreed, documentation seems out of date. This config-override with customize-cra worked for me (inspired by https://reactnativeelements.com/docs/web_usage/ ):

const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve(__dirname, 'node_modules/react-native-lightbox'),
    path.resolve(__dirname, 'node_modules/react-native-typing-animation'),
    path.resolve(__dirname, 'node_modules/react-native-parsed-text'),
    path.resolve(__dirname, 'node_modules/react-native-gifted-chat'),
    path.resolve(__dirname, 'src'),
  ]),
);

[markwindsorr]

Agreed, documentation seems out of date. This config-override with customize-cra worked for me (inspired by https://reactnativeelements.com/docs/web_usage/ ):

const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve(__dirname, 'node_modules/react-native-lightbox'),
    path.resolve(__dirname, 'node_modules/react-native-typing-animation'),
    path.resolve(__dirname, 'node_modules/react-native-parsed-text'),
    path.resolve(__dirname, 'node_modules/react-native-gifted-chat'),
    path.resolve(__dirname, 'src'),
  ]),
);

Did not work for me, same issue

[stale[bot]]

Sorry, but this issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. BTW Thank you for your contributions 😀 !!!

[se1exin]

I had the same issue, I was able to successfully compile by doing the following:

yarn add -D core-js@2

in config-overrides, add react-native-typing-animation to the exclude pattern:

/node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text|react-native-typing-animation)/,

I then got a heap of Failed to parse source map from warnings from webpack, to fix those, add the following to the bottom of config-overrides, just before return config:

config.ignoreWarnings = [/Failed to parse source map/];

[Eigilak]

I had the same issue, I was able to successfully compile by doing the following:

yarn add -D core-js@2

in config-overrides, add react-native-typing-animation to the exclude pattern:

/node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text|react-native-typing-animation)/,

I then got a heap of Failed to parse source map from warnings from webpack, to fix those, add the following to the bottom of config-overrides, just before return config:

config.ignoreWarnings = [/Failed to parse source map/];

This is the solution!