question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Web build fail with syntax error

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

1reaction
andreasshcommented, Dec 9, 2021

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'),
  ]),
);
0reactions
Eigilakcommented, Nov 15, 2022

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Syntax Error, Unexpected" on WordPress - Hostinger
A syntax error occurs when there's a mistake in your code. As a result, the compiler cannot process (parse) the file and fail...
Read more >
Web build fail with syntax error #1612 - GitHub
Build fail with syntax error when I try to build on the web. similar issue - #1083. Steps to Reproduce / Code Snippets....
Read more >
How to Fix the Syntax Error in WordPress - WPBeginner
The syntax error is usually caused by a tiny but crucial mistake in your code syntax. Example of a syntax error in WordPress....
Read more >
ASP.NET builds success but showing "Syntax Error" on web ...
I have an ASP.NET project which is started by an other team, and I'm currently working on it. My problem is, I'm specially...
Read more >
How to Fix "Parse Error: Syntax Error Unexpected" in WordPress
A syntax error happens when you are manually editing code and have made a mistake. Coding in WordPress is not overly complex but...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found