preset | Boilerplate for a Basic Fullstack GraphQL App with React | GraphQL library

I think the problem is that you are trying to use the deprecated babel-eslint parser, last updated a year ago, which looks like it doesn't support ES6 modules. Updating to the latest parser seems to work, at least for simple linting.

So, do this:

• In package.json, update the line "babel-eslint": "^10.0.2", to "@babel/eslint-parser": "^7.5.4",. This works with the code above but it may be better to use the latest version, which at the time of writing is 7.16.3.
• Run npm i from a terminal/command prompt in the folder
• In .eslintrc, update the parser line "parser": "babel-eslint", to "parser": "@babel/eslint-parser",
• In .eslintrc, add "requireConfigFile": false, to the parserOptions section (underneath "ecmaVersion": 8,) (I needed this or babel was looking for config files I don't have)
• Run the command to lint a file

Then, for me with just your two configuration files, the error goes away and I get appropriate linting errors.

After some more search arounds, found this is a known issue in react-native-reanimated. As their website points out

Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging.

Another github issue also pointed out this issue

This is expected, you can't use remote debugging with turbomodules (which Reanimated v2 is using). Check out Flipper to debug your app.

https://docs.swmansion.com/react-native-reanimated/docs/#known-problems-and-limitations

https://github.com/software-mansion/react-native-reanimated/issues/1990

Removing this library fixed the issue.

1. Remove the react-native-reanimated dependency in package.json
2. Remove related code in android's MainApplication.java
3. yarn install or npm install
4. Go to the ios folder and run pod install
5. Go the the android folder and run ./gradlew clean
6. Rebuild the app. yarn android and yarn ios

Another alternative is to use Flipper for debugging instead.

It seems like the updated version of webpack doesn't support the property hotOnly, we should use the option hot instead. You can see a GitHub issue associated with this here.

Solution

After taking a step back, I realized that I could try out what I did to fix the sass-loader issue: downgrading major versions.

Steps

• Downgraded style-loader 1 major version to 2.0.0: npm i style-loader@2.0.0
• Then, as luck would have it, I ran into the same issue with css-loader
• Downgraded css-loader 1 major version to 5.2.7: npm i css-loader@5.2.7

Summary

By downgrading all of the loaders one major version, I was able to get it to work.

Please complete the setup for react-native-reanimated. You have to add 'react-native-reanimated/plugin', in the babel.config.js file so the final code in babel.config.js will look like

Found the answer here -> https://github.com/storybookjs/storybook/issues/15336

The solution is simply to add the following to .storybook\main.js

React Router v6 splits apart the history into multiple pieces, for this use case the relevant parts are the navigator and the location. This change is hinted at in Use useNavigate instead of useHistory, and you can see it in the definition of the Navigator type used in the Router props:

Solved removing packages-lock.json and running again using NodeJS 14 (was 10)

can you give your

• package.json
• node version

I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining