Web build fail with syntax error
See original GitHub issueIssue 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:
- Created 2 years ago
- Reactions:1
- Comments:5
Top GitHub Comments
Agreed, documentation seems out of date. This config-override with customize-cra worked for me (inspired by https://reactnativeelements.com/docs/web_usage/ ):
This is the solution!