The error in the image shows up while creating a react app .
It was working properly all this time, all i did was mkdir and cd to that dir.
This is what the error looks like...
npx: installed 99 in 36.634s
Must use import to load ES Module: C:\Users\Neeraj\AppData\Roaming\npm-cache_npx\5172\node_modules\create-react-app\node_modules\is-promise\index.js
require() of ES modules is not supported.
require() of C:\Users\Neeraj\AppData\Roaming\npm-cache_npx\5172\node_modules\create-react-app\node_modules\is-promise\index.js from C:\Users\Neeraj\AppData\Roaming\npm-cache_npx\5172\node_modules\create-react-app\node_modules\run-async\index.js is an ES module file
as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\Users\Neeraj\AppData\Roaming\npm-cache_npx\5172\node_modules\create-react-app\node_modules\is-promise\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\Neeraj\AppData\Roaming\npm-cache_npx\5172\node_modules\create-react-app\node_modules\is-promise\package.json.
This was related to is-promise library https://github.com/then/is-promise/issues/13. Please don't downgrade the node version. They have released new version https://github.com/then/is-promise/releases/tag/2.2.1 which will fix this issue
Try to downgrade version of node to 12.11.1
$ npm install -g n
$ n 12.12.0
run this command :
npm install is-promise#2.1.0 --save --save-exact
or, if you just want to create react app, you can do this while waiting for a fix:
step 1: yarn init -y
step 2: Insert this to package.json
"resolutions": {
"is-promise": "2.1.0",
"run-async/is-promise": "2.1.0"
}
step 3: yarn add --dev create-react-app
step 4: yarn create-react-app ../my-app
Related
TLDR:
how can I instruct storybook to use babel-loader v8.1.0 OR force react-scripts to use babel-loader v^8.2.2 ?
Details
I Develop a lib with ./example folder which is itself project created with create-react-app. I wanted to add storybook in addition to the normal example pages, so I installed storybook.
after installing storybook I can no longer start the example project with yarn start or the story book with yarn storybook.
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
D:\Eliav\projects\git projects\react-xarrows\examples\node_modules\babel-loader (version: 8.2.2)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
well I know what the issue but I don't know how to fix it:
I'm using react-scripts v4.0.3 which for unknown reason requiring exactly babel-loader v8.1.0. i can see this it in yarn.lock:
react-scripts#^4.0.1:
version "4.0.3"
...
dependencies:
...
babel-loader "8.1.0"
and storybook requiring babel-loader v8.2.2 or above:
"#storybook/builder-webpack4#6.2.9":
version "6.2.9"
...
dependencies:
...
babel-loader "^8.2.2"
already tried
what is written in the error above.
hoped that yarn upgrade would upgrade babel-loader from v8.1.0 to v8.2.2 but it does not work because react-scripts require exactly v8.1.0
a workaround that worked
Create a .env file in your project directory and include SKIP_PREFLIGHT_CHECK=true in the file.
but I want to avoid it. is it possible?
So for anyone to whom this is still unclear.
I used create-react-app to create a new app
I added storybook using npx sb init
then they clashed.
SOLUTION:
yarn add babel-loader#8.1.0
UPDATE:
The error you often see is that CRA (create-react-app) relies on specific dependencies (e.g. for webpack or babel).
What can also be done is you specify which versions those dependencies must resolve to, based on the error messages
This can be done using the resolutions field in package.json, e.g.:
"resolutions": {
"babel-loader": "8.1.0",
"webpack": "4.x.x",
}
After this all will work Fine.
2 Links to consider https://github.com/facebook/create-react-app/issues/10123
and https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850
Seems that most people are installing the package to get it to work even thou it says not to install in manually.
So try:
yarn add babel-loader#8.1.0
I am beginner for React-App. I have an existing project folder.
Step I took:
npm install -g create-react app
cd C:\Users\MyFolder\Documents\MyName\CS50\Project\Project1
npm start
**
"This automatically create a folder called "start" inside my Project1 with folders & files below:
node_modules
public
src
.gitignore
package.json
package-lock.json
README.md
**
Actually I already have all the files inside Project1, eg:
.gitignore
assets folder
utils folder
.babelrc
.watchmanconfig
App.js
app.json
package.json
README.md
How can I delete the start folder inside C:\Users\MyFolder\Documents\MyName\CS50\Project\Project1
and I want to open the Project1 folder to work on the assignment given by a course I am attending online. This is my 1st time doing it.
Please advise.
Thanks.
Regards,
Micheale
That isn't the right way to use create-react-app.
Firstly, run
npm install -g create-react-app
Then go into the directory where you wish to create the project and run
npx create-react-app app-name
Yes, it is npx and not npm. Its not a typo.
Finally,
cd app-name
npm start
This will launch a test server and open it up on chrome.
As far as deleting goes, just navigate to the folder you want to delete with your File Explorer and Delete it.
Create React App
step 1: First you create folder "my-first-app"
step 2: Go to your vsCode and open that folder
step 3: Open terminal on your vscode and create your react app npx create-react-app my-app
step 4: Next cd my-app
step 5: Finally npm start
please don't create a folder inside folder "C:\Users\MyFolder\Documents\MyName\CS50\Project\Project1".It's not a good approach of coding
you don't have a any file use npm remove <place it your removing file>)
Removing a local package from your node_modules directory
Unscoped package. npm remove <package_name>
Scoped package. npm remove <#scope/package_name>
Unscoped package. npm remove --save <package_name>
Scoped package. npm remove --save <#scope/package_name>
Example. npm remove --save lodash
Delete and remove the react-app Files faster in a seconds using
rm -rf <nameOfTheFolder> // or name of the project
This 100% work, upvote it coz otherwise it takes, lot of time to remove using simple delete from the terminal.
Save all programmers time #GivingBackToCommunity thanks
I have sample installation of react-app and I got the following
Error: Failed to load parser '#typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
after running
npm run lint -> eslint .
I don't use typescript in this project.
I tried to install it from scratch and got it again.
also tried to remove tslint from vscode plugin
You can add this to your .eslintignore file in the root of your project.
node_modules
create-react-app team will release a new version with that fix also
https://github.com/facebook/create-react-app/pull/8376
I had the same issue when trying to create a new react app today.
You can try the following steps:
Make sure you update your nodejs to the latest version
Make sure your folder path is short and does not contain spaces
Run: npm install -g create-react-app
Run: npm i --save-dev typescript #typescript-eslint/parser
Run: create-react-app my-app
Create React App adds eslint config to package.json, so you just have to add eslintIgnore with node_modules in package.json. A cleaner alternative to creating a separate file .eslintignore
// package.json
// ...
"eslintConfig": {
"extends": "react-app"
},
"eslintIgnore": [
"node_modules",
"build/*"
],
Most likely, you have this in your .eslintrc:
extends: react-app
It means the following rule is applied:
files: ['**/*.ts?(x)'],
parser: '#typescript-eslint/parser',
Which probably means you have *.ts/*.tsx files in your root folder. But maybe it's the vscode-eslint. Did you try to run yarn lint from the terminal?
Your error message says eslint is looking for typescript because of a setting in the file .eslintrc so try looking in that file for #typescript-eslint/parser and remove it.
I was removing typescript from a project and I got the same error because I had forgotten a typescript definition somewhere under the src folder... deleting the file fixed the issue.
In my case, I wanted typescript, but didn't get it installed.
This question still helped me figure out my problem which is described below.
I was watching a YouTube video, React Typescript Tutorial that explained how to get started with typescript and react, and the video said to run:
npx create-react-app cra-ts --typescript
This didn't work (but I didn't know it). As soon as I created a hello.ts file, I got the error the OP describes.
Error: Failed to load parser '#typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
The fix was to use the command:
npx create-react-app myappts --template typescript
This used create-react-app#4.0.0 and react-scripts#4.0.0.
ProTip: If your newly created React App doesn't have a file named App.tsx, then you haven't actually created it correctly.
SO I npm installl react-router for create-react-app and when it finish is says created 18 and deleted 1008 modules. Now when I npm start the existing create-react-app app it says "react-scripts: command not found" and sure enough all of the files under react-scripts are deleted so now I can't start my project. What am I missing here? Why is the basic install deleting all of my modules?
Make a copy of the src files and then delete your current project.
Then create a new react app.
Then instead of npm install react-router-dom
use yarn add react-router-dom
that should be able to Resolving packages and link dependencies.
I just want to publish a react component to npm, but found out it's so difficult. The file is simple, but with es6 syntax. what is the steps or solution to publish it to npm so that we can just install and run it with locally installed react? I have read this article http://chadly.net/2015/04/publishing-react-to-npm/, but it seems outdated and I failed by following it.
Use babel-cli to transpile the file to es5 and publish that file.
Put all your source-files in one folder, e.g. src and install babel and add build entry to your npm scripts (package.json/scripts): "build": "babel --out-dir=lib src".
No every time you call npm run build. The transpiled code will in the lib folder. In you index.js refer to this lib folder-folder.
Of course you can add build script to npm hooks such as "prepublish": "npm run build" or similar,
I wrote a full Medium story because I had the same issue as you and there is no information about it. Check it out: https://medium.com/#BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce