I'm struggling with correctly configuring Babel in my React and Parceljs project. Right now, all I'm trying to do is completely remove babel from my project to start again with a clean slate. I've gone ahead and 'npm remove'-ed babel, as well as deleted my node.modules and package.lock.json.
This is my package.json currently.
"scripts": {
"dev": "parcel public/index.html",
"start": "parcel public/index.html",
"prod": "parcel build public/index.html"
},
"author": "Me",
"license": "ISC",
"dependencies": {
"parcel-bundler": "^1.12.3",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
However when running 'npm install' again, the babel files reappear and in my package.lock.json and node_modules.
And I'm still getting these errors that only appeared once I started install #babel packages.
Error: Cannot find module '#babel/core'
...
× Cannot read property 'length' of undefined
...
Parcel has been keeping a cache directory. Removing that and rebuilding fixed the problem.
Related
I'm trying to get the repo of a web page running on localhost, to later try to update some of the outdated dependencies. This web page runs on Next JS with Strapi version 3. After Strapi version 4 went live, the team had trouble updating the content on the page. I wanted to try and see how I could help, but have trouble even running the website locally. I'm a beginner and would be happy to learn about any suggestions.
Here is the folder structure:
backend
api: config, controllers, models, services folders for Strapi
components: layout, links, meta, sections folders for Vue JS
config: database.js, server.js
extensions: Includes JSON Web Token integration
public: uploads folder with icons and images used on the website
Also the following files:
.editorconfig
.eslintrc
.strapi-updater.json
package.json
yarn.lock
frontend
components: elements and sections folders with React JS
packages: eslint-config-ibmdotcom & stylelint-config-ibmdotcom
pages: _app.js, _document.js and [[...slug]].js to implement Next JS' optional catch all routes feature
patches: carbon ibmdotcom, carbon type and patch package patches
public: A few icons to be used on the website
styles: Includes global.scss
utils: api.js, media.js and types.js
Also the following files:
.eslintrc
.lintstagedrc
.stylelintrc
jsconfig.json
package.json
yarn.lock
node_modules
patches
Also the following files:
.yarnclean
package-lock.json
package.json
yarn.lock
Here are the dependencies:
In frontend/package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --port 3200",
"build": "next build",
"start": "next start --port 3400",
"postinstall": "patch-package",
"debug": "NODE_OPTIONS='--inspect' next --port 3300"
},
"dependencies": {
"#carbon/ibmdotcom-react": "^1.14.0",
"#carbon/ibmdotcom-styles": "^1.14.0",
"#carbon/icons-react": "^10.22.0",
"#carbon/pictograms-react": "^11.0.0",
"carbon-components-react": "^7.26.0",
"formik": "^2.2.6",
"next": "10.0.5",
"next-seo": "^4.17.0",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-hook-form": "^6.14.2",
"sass": "^1.32.2",
"yup": "^0.32.8"
},
"devDependencies": {
"eslint": "^7.17.0"
}
}
In backend/package.json:
{
"name": "backend",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
"start": "strapi start",
"build": "strapi build",
"strapi": "strapi"
},
"devDependencies": {},
"dependencies": {
"knex": "<0.20.0",
"pg": "^8.5.1",
"sqlite3": "latest",
"strapi": "3.4.3",
"strapi-admin": "3.4.3",
"strapi-connector-bookshelf": "3.4.3",
"strapi-plugin-content-manager": "3.4.3",
"strapi-plugin-content-type-builder": "3.4.3",
"strapi-plugin-email": "3.4.3",
"strapi-plugin-img": "^1.0.1",
"strapi-plugin-upload": "3.4.3",
"strapi-plugin-users-permissions": "3.4.3",
"strapi-utils": "3.4.3"
},
"author": {
"name": "A Strapi developer"
},
"strapi": {
"uuid": "c78c2abc-df48-4be1-8dcf-1266d358a02b"
},
"engines": {
"node": ">=10.16.0 <=14.x.x",
"npm": ">=6.0.0"
},
"license": "MIT"
}
Here is what I tried so far:
Ran npm install
Got the following error:
> website#1.0.0 postinstall
> patch-package
sh: patch-package: command not found
npm ERR! code 127
npm ERR! path /Users/sgt/Documents/Stroma/website
npm ERR! command failed
npm ERR! command sh -c patch-package
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sgt/.npm/_logs/2022-09-02T09_46_38_695Z-debug-0.log
Ran npm i patch-package
Got the following error:
added 50 packages, and audited 68 packages in 5s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
sgt#mb-sgt website % npm install
> website#1.0.0 postinstall
> patch-package
patch-package 6.4.7
Applying patches...
**ERROR** Failed to apply patch for package patch-package at path
node_modules/patch-package
This error was caused because patch-package has changed since you
made the patch file for it. This introduced conflicts with your patch,
just like a merge conflict in Git when separate incompatible changes are
made to the same piece of code.
Maybe this means your patch file is no longer necessary, in which case
hooray! Just delete it!
Otherwise, you need to generate a new patch file.
To generate a new one, just repeat the steps you made to generate the first
one.
i.e. manually make the appropriate file changes, then run
patch-package patch-package
Info:
Patch file: patches/patch-package+6.2.2.patch
Patch was made for version: 6.2.2
Installed version: 6.4.7
---
patch-package finished with 1 error(s).
up to date, audited 68 packages in 1s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Ran npx patch-package patch-package --exclude 'nothing'
Got the following error:
patch-package 6.4.7
patch-package: you have both yarn.lock and package-lock.json
Defaulting to using npm
You can override this setting by passing --use-yarn or deleting
package-lock.json if you don't need it
• Creating temporary folder
• Installing patch-package#6.4.7 with npm
• Diffing your files with clean files
⁉️ Not creating patch file for package 'patch-package'
⁉️ There don't appear to be any changes.
What is the problem here? Does my method seem correct?
Happy to provide more information. Thanks for reading!
How I can install next.js with React 17? When I type:
npx create-next-app --ts, npx installed Next with React 18, but I can't use React 18, because Stripe not working at the moment with R18 (https://www.npmjs.com/package/stripe).
You'd need to use an older version of Next JS.
The latest one I can see with React 17 is 12.1.2, so you can start your project with the following:
npx create-next-app#12.1.2
You can check the release change logs for Next JS here:
https://github.com/vercel/next.js/releases
If you've already created the project:
remove new versions:
npm uninstall next react react-dom #types/react #types/react-dom
install old versions:
npm install next#12.1.2 react#17.0.2 react-dom#17.0.2
npm install -D #types/react#17.0.2 #types/react-dom#17.0.2
I found an alternative approach , first create a new nextjs typescript project using npx create-next-app#latest --ts
. And then copied the versions of all the dependencies and devDependencies to package.json . after replacing the version delete node_modules folder and package-lock.json file . after that run this command npm install .
Here is a sample package.json. I got this after create new nextjs project.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.4",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#types/node": "18.7.1",
"#types/react": "18.0.17",
"#types/react-dom": "18.0.6",
"eslint": "8.21.0",
"eslint-config-next": "12.2.4",
"typescript": "4.7.4"
}
}
I started a react project through create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
And I got the following package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts-ts": "2.16.0"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"#types/jest": "^23.1.0",
"#types/node": "^10.3.3",
"#types/react": "^16.3.18",
"#types/react-dom": "^16.0.6",
"typescript": "^2.9.2"
}
}
I understand that packages in devDependencies won't be needed for building the production bundle, therefore we have dependencies and devDependencies separately. However, if I want to add a new package, such as react-router, should I do the following two separately like following?
npm install --save react-router
npm install --save-dev #types/react-router
or should I do
npm install --save #types/react-router
If either way if fine, what's the difference between the two approaches?
npm install --save react-router Installs the actual module while,
npm install --save-dev #types/react-router only install type information for typescript. The type information has no functionality of its own, so you need to install both.
The type information is installed as a dev dependency because it isn't required after the build process which transforms typescript into JavaScript.
The answer to the question is yes.
Installing #types/react-router you only get TypeScript type definitions for react-router and not the react-router functionality.
My package.json file is as below
{
"name": "dev",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.3"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-beta.5"
},
"jest": {
"preset": "react-native"
}
}
When I run npm start it gets stuck on Loading dependency graph, done. How can I fix this?
npm start only works for expo projects, if you've created your project using react-native init
You should run your project using either react-native run-ios or react-native run-android
If you're sure you're using expo for your project I would suggest to remove the node_modules folder and running npm install again.
If you built your app using react-native init or if it is an app that has been "ejected" from Expo, then this behavior is normal. Once you have npm started, open another terminal window and run either react-native run-ios or react-native run-android. That should launch the appropriate app for you.
The Getting Started Guide can walk you through the various ways of starting a react native app. You should follow the tab labeled "Building Projects with Native Code."
I'm new to reactJs. I'm using node package manager (NPM) for release, build and hosting process. I first ran npm install -g create-react-app command to install the command whose template helped me in creating a basic reactJs application. Now my package.json file looks like this:
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
If you closely look at both dependencies and devDependencies section you will not be able to find anything like Babel (a transpiler) or webpack (a bundler). So I'm wondering that when I run my website using npn run start command then how my reactJs class files are getting transpiled and bundled. Is there any default transpiler and bundler used by NPM or I'm missing something in my observation?
[Update After Nicholas's comment]:
On a contrary, in a live project code base in which I work in my office, I see that these dependencies like babel-core, babel-cli, webpack etc are mentioned in devDependencies section. They are absent from dependencies section. If react-scripts already have an implicit dependency on babel-core, babel-cli, webpack etc then why do they have to be mentioned explicitly in devDependencies section? Even devDependencies can also simply do so by mentioning react-scripts they way it is happening in my test project. Isn't it? But my fellow developers aren't doing so.
react-scripts, which get's called when you run $ npm start has those transpilers/bundlers as it's own dependencies.
You won't see the dependencies of an explicitly installed module, react-scripts in your example, within your package.json. They would exist as dependencies in react-scripts module's package.json instead.
For example, have a look at the package.json of this subfolder, of that react-scripts module.
It contains a bunch of dependencies, some of them being Babel and Webpack.