Bug: React gives me an error when stating with yarn start

[MCorange99]

React version: ^17.0.2

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"

Steps To Reproduce

1. make a new React app
2. start react app using yarn start

Link to code example: not needed as its a new project

The current behavior

React gives me error when starting.

The expected behavior

React starts with no errors

[sjschweber]

Hi, I have a couple questions. What is the exact error message, can you provide a screenshot? How are you making a new React app, are you using create-react-app?

[bvaughn]

The current behavior

React gives me error when starting.

This isn't really enough information for someone to help with this issue. It would be useful if you would include the following:

• A link to the code for your project (unless it's literally a blank project)
• The exact error message you're seeing
• Any other info that may be helpful (like Yarn and Node versions, operating system)

That being said, this also seems like a create-react-app issue so I'm going to move the issue to that repo.

[MCorange99]

Oh sorry thought i added the error message.
i just updated react with npm i react --global create-react-app websitekeithos
and created a brand new app with npx create-react-app websitekeithos

The error message:

In text :

(node:9036) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\gvida_\!!_Projects\websitekeithos\node_modules\postcss-safe-parser\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)
Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
 \- options.overlay.module: The provided value "C:\\Users\\gvida_\\!!_Projects\\websitekeithos\\node_modules\\react-dev-utils\\refreshOverlayInterop.js" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[sjschweber]

@bvaughn can you assign me this issue?

@MCorange99 Did you run yarn to install required dependencies? Also can you show me your package.json file?

[MCorange99]

[sjschweber]

Try removing any !! or exclamation marks from file names that you generated

[MCorange99]

Im not on my pc right now but could it be the !!_projects folder?

[mribichich]

The same just happened to us, when we upgraded to node 16.
that's a node 16 warning because of the postcss version react-scripts is using.

the last postcss version has the fix

[MCorange99]

I just tried renaming my folder. It works now. thanks