npm ERR! code ELIFECYCLE Invalid options object

[AlexShirin]

Describe the bug

my-app@0.1.0 start F:!JS\my-app
react-scripts start
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 "F:\!JS\my-app\node_modules\react-dev-utils\refreshOverlayInterop.js" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.

F:!JS\my-app\node_modules\react-dev-utils\refreshOverlayInterop.js
// @remove-on-eject-begin
/**

• Copyright (c) 2015-present, Facebook, Inc.
• This source code is licensed under the MIT license found in the
• LICENSE file in the root directory of this source tree.
  */
  // @remove-on-eject-end
  'use strict';

const {
dismissRuntimeErrors,
reportRuntimeError,
} = require('react-error-overlay');

module.exports = {
clearRuntimeErrors: dismissRuntimeErrors,
handleRuntimeError: reportRuntimeError,
};

Environment

(Win10)

npm -version
6.14.10
node --version
v14.15.4
VSCode

Steps to reproduce

1. npx create-react-app my-app
2. cd my-app
3. npm start

[jakubsuchybio]

I also have this problems, is there any solution?

[jakubsuchybio]

The problem is that the PATH contains exclamation mark "!", if you move your repo to the path without any "!", it then works...

[michelgrolet]

@jakubsuchybio
Thank you so much ! I feel so stupid, I have been stuck for a day because of this error.

[sebastianf777]

The problem is that the PATH contains exclamation mark "!", if you move your repo to the path without any "!", it then works...

I love you man YOU MUST KNOW!

[DonnaLit]

In my case. The file was not found hence the error. I created refreshOverlayIntertrops.js with is code:

// @remove-on-eject-begin
/**

• Copyright (c) 2015-present, Facebook, Inc.
• This source code is licensed under the MIT license found in the
• LICENSE file in the root directory of this source tree.
  */
  // @remove-on-eject-end
  'use strict';

const {
dismissRuntimeErrors,
reportRuntimeError,
} = require('react-error-overlay');

module.exports = {
clearRuntimeErrors: dismissRuntimeErrors,
handleRuntimeError: reportRuntimeError,
};

My problem was sorted

[rootfellen]

In my case. The file was not found hence the error. I created refreshOverlayIntertrops.js with is code:

// @remove-on-eject-begin /**

• Copyright (c) 2015-present, Facebook, Inc.
• This source code is licensed under the MIT license found in the
• LICENSE file in the root directory of this source tree.
  */
  // @remove-on-eject-end
  'use strict';

const { dismissRuntimeErrors, reportRuntimeError, } = require('react-error-overlay');

module.exports = { clearRuntimeErrors: dismissRuntimeErrors, handleRuntimeError: reportRuntimeError, };

My problem was sorted

Thank you, it helped me.

[niteshthemerndeveloper]

The problem is in the folder path, your path contains an exclamation mark! not in the node_module folder but in your local folder. If you move your project to any other folder it should work fine.

Let's Master React!

[AliceSum]

#11762

Same issue