score:441
To fix this issue simply upgrade react-scripts package (check latest version with npm info react-scripts version
):
- Replace in your package.json
"react-scripts": "^3.x.x"
with"react-scripts": "^3.4.1"
(or the latest available version) - (optional for some) Delete your node_modules folder
- Run
npm install
oryarn install
Some people reported that this issue was caused by running npm audit fix
(avoid it!).
score:0
Follow the below steps. I also encountered the same problem.
- remove the whole node_modules folder.
- remove the package-lock.json file.
run command
npm install npm-install
as shown in the image:Here we go.. npm start...wao
score:0
Just need to remove and re-install react-scripts
To Remove
yarn remove react-scripts
To Add
yarn add react-scripts
and then rm -rf node_modules/ yarn.lock && yarn
- Remember don't update the
react-scripts
version maually
score:0
I had the same issue running it in my pipeline.
For me, the issue was that I was using node
version v10.0.0
in my docker container.
Updating it to v14.7.0
solved it for me
score:0
None of the other solutions worked for me.
However, adding this to my package.json fixed the issue for me:
"resolutions": {
"react-dev-utils": "10.0.0"
},
score:0
Setting the HOME environment variable to an appropriate value fix this issue for me.
score:0
I fixed this issue by setting a newer version of node as default in nvm i.e.:
nvm alias default 12.XX.X
score:0
I was having the exact same issue for a gatsby blog. The dependencies couldn't be upgraded and could only run on npm version 10.22.1.
What works for me is the following:
#!/bin/bash
rm -rf .cache
rm -rf public
gatsby build
gatsby serve
Basically the completely rebuild everything, and this error is gone. Very annoying but at least it builds.
What's ever more weird is that, if I tweaked the image of the blog post, e.g., resizing it a bit, it builds. I have absolutely no idea why. But that least that's a clue.
score:0
If you have an ejected CRA, there are a few changes to the webpack-dev-server config that if left unchanged will throw this error. Comparing a freshly ejected CRA 4.x config to my CRA 3.x config showed a number of changes to functions that didn't previously accept arguments that now do.
In my case, one of the breaking changes was the addition of a path to their noopServiceWorkerMiddleware
function. Adding in the missing path noopServiceWorkerMiddleware(paths.publicUrl)
fixed this for me.
score:0
If you are finding it difficult to show up an image in you react.js file, I tried searching on youtube. It suggests adding image inside 'public' folder(rather than 'src' folder).
Although still looking for reasons why adding images inside 'src' folder didnt worked out.
link:
https://www.youtube.com/watch?v=taMJct5oeoI&ab_channel=EsterlingAccime
score:0
Switching from powershell to bash fixed this problem for me.
score:0
this has nothing to do with react
, as the error specified, undefined is not accepted as the path argument. make sure you don't pass a variable to path.join that happens to be undefined or null.
for example:
const {path} = require('path');
let arg = undefined;
let mypath = path.join(__dirname, arg);
// The same error would occur.
score:1
If you have an ejected create-react-app
, I would suggest:
- Create a new React app through
create-react-app
. - Eject it through
npm run eject
oryarn eject
. - Install all the packages that are missing from the
package.json
. - Copy your src folder assuming all your code is situated in this folder.
- Redo your changes on the config and script folders, if needed.
Worked for me.
score:1
I tried various approach described above but none of them worked since I have ejected my css. Finally applying following steps helped:
- Upgrade
react-scripts
from"react-scripts": "3.x.x"
to"react-scripts": "^3.4.0"
- Downgrading
react-dev-utils
form"react-dev-utils": "^10.x.x"
to"react-dev-utils": "10.0.0"
- Delete
node-modules
folder andpackage-lock.json
/yarn.lock
- Reinstall packages
npm install
/yarn install
score:1
In my case, it was because I (at one point) had reactn
installed, which also includes its own version of React (for some reason).
After that had been installed (even after uninstalling again), this error occured.
I simply removed node_modules
and ran npm install
again, and it worked.
score:1
I didn't want to upgrade react-scripts
, so I used the 3rd party reinstall npm module to reinstall it, and it worked.
npm i -g npm-reinstall
reinstall react-scripts
score:1
Simply upgrading react-scripts
version solved my issue.
react-scripts
package from "react-scripts": "3.x.x"
to "react-scripts": "^3.4.1"
(or the latest available version).
Avoid deleting package-lock.json
straightaway. First try this, if it doesn't work then proceed further.
score:2
If you ejected and are curious, this change on the CRA repo is what is causing the error.
To fix it, you need to apply their changes; namely, the last set of files:
- packages/react-scripts/config/paths.js
- packages/react-scripts/config/webpack.config.js
- packages/react-scripts/config/webpackDevServer.config.js
- packages/react-scripts/package.json
- packages/react-scripts/scripts/build.js
- packages/react-scripts/scripts/start.js
Personally, I think you should manually apply the changes because, unless you have been keeping up-to-date with all the changes, you could introduce another bug to your webpack bundle (because of a dependency mismatch or something).
OR, you could do what Geo Angelopoulos suggested. It might take a while but at least your project would be in sync with the CRA repo (and get all their latest enhancements!).
score:4
Go to you package.json
Change "react-scripts": "3.x.x" to "react-scripts": "^3.4.0" in the dependencies
Reinstall react-scripts:
npm I react-scripts
Start your project:
npm start
score:6
I had this same issue and running npm install react-scripts@latest
fixed my issue.
score:8
Simply update react-scripts to the latest version.
yarn add react-scripts@latest
OR IF USING NPM
npm install react-scripts@latest
score:10
I just had this issue after installing and removing some npm packages and spent almost 5 hours to figure out what was going on.
What I did is basically copied my src/components in a different directory, then removed all the node modules and package-lock.json (if you are running your app in the Docker container, remove images and rebuild it just to be safe); then reset it to my last commit and then put back my src/components then ran npm i
.
I hope it helps.
score:10
We ejected from react-scripts
and so could not simply upgrade the package.json entry to fix this.
Instead, we did this:
- in a new directory, create a new project ->
$> npx create-react-app foo-project
- and then eject it ->
cd ./foo-project && npm run eject
- now copy the files from /foo-project/config into the config directory of our main app and fire up your dev server
hope this helps others in a similar bind.
score:18
Running npm i react-dev-utils@10.0.0
solved my issue.
score:46
I've also faced this problem and figure out it by upgrading the react-scripts
package from "react-scripts": "3.x.x"
to "react-scripts": "^3.4.1"
(or the latest available version).
- Delete
node_modules\
folder - Delete
package-lock.json
file - Rewrite the
package.json
file from"react-scripts": "3.x.x"
to"react-scripts": "^3.4.1"
- Install node packages again
npm i
- Now, start the project
npm start
And it works!!
score:63
If you have ejected, this is the proper way to fix this issue:
find this file config/webpackDevServer.config.js
and then inside this file find the following line:
app.use(noopServiceWorkerMiddleware());
You should change it to:
app.use(noopServiceWorkerMiddleware('/'));
For me(and probably most of you) the service worker is served at the root of the project. In case it's different for you, you can pass your base path instead.
Source: stackoverflow.com
Related Query
- TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app
- TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
- The "path" argument must be of type string or an instance of Buffer or URL cloudinary and nodejs
- The \"path\" argument must be of type string or an instance of Buffer or URL. Received undefined from nodejs
- Trying to deploy my React app with gh-pages but got this error message : The "file" argument must be of type string. Received type undefined
- The "file" argument must be of type string. Received type undefined on npm run deploy to gh-pages
- The "path" argument must be of type string. Received undefined. not sure why?
- TypeError: The "original" argument must be of type Function
- Gatsby 3 "Path" argument must be of type string
- react-hot-loader: React.createElement: type is invalid -- expected a string error updating the screen
- Getting the following error when creating React HOC: type is invalid -- expected string or a class/function but got: object
- Adding url slug to Next Js routing getting TypeError path should be type string getting type object
- Error: Invalid value of type string for mapStateToProps argument when connecting component ConnectedForm
- How to fix the error argument of type string or undefined is not assignable to parameter of type string using typescript and react?
- Streamifier error - The "path" argument must be of type string. Received type function ([Function (anonymous)])
- compilation :First argument was an invalid path = "message-{Date.now()}" Paths must be non-empty strings and can't contain "."
- React.createElement: type is invalid -- expected a string
- A spread argument must either have a tuple type or be passed to a rest parameter React
- the title prop of a button must be a string - react native
- React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object
- Getting error "Path" argument must be string while deploying React - Loadable components sample code in cloud functions
- React How to fix Failed prop type - Invalid prop of type string expected object
- React: Invalid value for prop `savehere` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
- React Native Element type is invalid expected a string but got undefined
- Argument of type 'string | null' is not assignable to parameter of type 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'
- Why is React.Fragment causing the console error: Results Warning: React.createElement: type is invalid
- TypeScript saying a string is invalid even though it's in the union?
- gh-pages -d build gives Error "file" argument must be a non-empty string
- passing a type argument for the props of a react component for a higher order component
- The preloadedState argument passed to createStore has unexpected type of "Null". Expected argument to be an object with the following keys: "login"
More Query from same tag
- Why getting absurd result on Permutation caluclator in React?
- Building a dynamic nested routes architechure with React and React Router
- How to set today date as a default date in antd?
- Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty
- Redux-React: value returned by a dispatch function is not being passed to child component
- display effect on an element on button click in react
- CSS grid, Day.js : How do I create a calendar that shows the current week's dates?
- How to avoid rerendering of child component
- How to map the objects that having the dynamic keys in React?
- How to get absolute value from animated value in react native?
- Proxying Multiple API requests with Create React App with React-Scripts version 3.4.1
- I can't update create-react-app, any suggestion?
- Not getting data in fetch even if the status is 200 in react
- how to get the data where id is equal to the id of other json data?
- React final form multipart data
- Setting an image to be the first image the page renders in React
- ref.current.setAttribute is not a function
- Line 9: Expected an assignment or function call and instead saw an expression no-unused-expressions
- React: this.function is not a function
- Problem showing global spinner using redux and react
- Calling an async function inside the if condition of useEffect hook
- How to make a dynamic modal in React?
- Meteor 1.3, React, React Router - data not getting passed through
- How can I access a state value done in react hooks in another js file
- How to concatenate JSX elements into an array?
- React UI not re-rendering on click even though DB is updated correctly. After second click, UI re-renders
- Typescript own module not found
- Multiple class from generic and modular styles
- React useEffect cleanup function depends on async await result
- How to hide Material-UI raised button when printing