I am going to follow a new course in udemy and it is about creating a website with react. https://www.udemy.com/course/build-the-best-ecommerce-website-ever-with-react-js-next-js/ that is the course. The problem is, instructor is using Next.js version 12 and when I create a next.js now it will create with 13.1 version but there is drastic differences. How can I overcome this ? and is it possible to use yarn while doing it from terminal.
I looked to documentation but couldn't find a guide about this and I thought that just doing it from package.json would create problems later so I don't know what to do .
It's possible to setup Next.js version 12 manually:
# init the package.json
npm init
# intall next dependencies
npm install next#12.3.2 react react-dom
// edit your package.json with next scripts
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
# create the file structure
.
├── package.json
├── pages
│ ├── index.js
// init your index.js
import React from "react";
function index() {
return <div>Hello world</div>;
}
export default index;
# start next
npm run dev
If you want to create a Next.js app using a specific version of React (such as version 12.1 instead of the latest version), you can follow these steps:
First, you need to install a specific version of Next.js that is compatible with the React version you want to use. You can do this by running the following command in your terminal:
npx create-next-app#latest my-app --use-npm --example "https://github.com/vercel/next-learn-starter/tree/lesson-01"
In this command, my-app is the name of your app, and --example specifies the example project you want to use as a starting point. You can replace the URL with any other Next.js example project that is compatible with version 12.1 of React.
Once the installation is complete, navigate to your app directory:
cd my-app
In your app directory, open the package.json file and find the dependencies section. Look for the line that specifies the version of React that is being used. It should look something like this:
"react": "^13.0.0",
Change the version number to 12.1.0, like this:
"react": "^12.1.0",
Save the changes to the package.json file and run the following command to install the specific version of React:
npm install
This will install version 12.1.0 of React and any other dependencies that are required by your app.
5.Finally, you can start your app by running:
npm run dev
This will start a local development server and open your app in a web browser. You can now start building your app with version 12.1.0 of React.
Related
I have an existing old react application, created with create-react-app and ejected with react-app-rewired. I'm updating the deprecated dependencies. I've already updated react-scripts to the current version (4.0.3) and everything works fine. But I need to update the style-loader lib, and this new version requires webpack 5.
The current react-scripts version is using webpack 4:
> npm ls webpack
my-app#0.1.0
└─┬ react-scripts#4.0.3
└── webpack#4.44.2
I found a project named webpack-5-react-script: https://www.npmjs.com/package/webpack-5-react-scripts. It seems what I need, but as my project was ejected using react-app-rewired a long time ago, I get this error when I run npm start:
Error: Cannot find module 'react-scripts/package.json'
Require stack:
- /home/.../my-app/node_modules/react-app-rewired/scripts/utils/paths.js
- /home/../my-app/node_modules/react-app-rewired/scripts/start.js
What I can do? Has anybody faced this issue?
React app rewired start, calls react-scripts start, you would need to edit react app rewired to call webpack5-react-scripts instead.
Just download react-scripts 5.0.0 into your project?
Here is the scenario
I have multiple angular applications which belong to the same project. When I needed to upgrade an npm package, I need to change all the package.json files in each application. I tried mono repo, but it does not apply to my project because npm scripts are not the same as all apps.
So I want to separate the node dependencies from applications and keep npm scripts of the package.json files.
Is there a way to separate only the dependencies object from the package.json file? OR any other suggestions?
If I understood well this could not be done with npm but seems like it can be achieved with yarn workspaces:
https://classic.yarnpkg.com/en/docs/workspaces/
Guide for installing yarn:
https://classic.yarnpkg.com/en/docs/install/
Unfortunately npm do not support package.json inheritance. See this link.
On the other side why don't you customize your npm scripts? create alias for every npm command.
e.g.
"test-app1": "ng test app1",
"test-app2": "ng test app2 --code-coverage --no-watch --no-progress --browsers ChromeHeadlessNoSandbox",
I have an app and I have a storybook. They both live inside the same app at the moment. I have just installed Lerna and played around so I can treat them both as 2 separate packages.
Both packages will be dockerised and when I build one, it should not do anything with the other
my structure so far:
app/
package.json
lerna.json
makefile
packages/
my-app/
all-relevant-packages-for-my-app
package.json
storybook/
all-relevant-packages-for-storybook
package.json
I don't want to publish anything to NPM. I simply want to use these packages separately but I would like to import app components into the storybook
is Lerna the correct thing to use here?
when I run say docker build my-app it should go inside the my-app repo and then build the docker image etc, run tests and deploy my app to S3 (this is all set up already) but now I've moved it all I'm wondering if Lerna is the correct tool as I see lots about publishing to NPM
You don't have to use Lerna in your case. I'd recommend you to use Yarn Workspaces. Let's install yarn and then add
"workspaces": [
"packages/*"
],
section to your main package.json file. From now on, yarn will be handling packages dependencies.
In your case - please enter the package.json of my-app and change its name to e.g. `#app/my-app'. Check the version of my-app in package.json (I will assume its 1.0.0 for now).
Do the same with storybook changing its name to e.g. #app/storybook. Then you can add a dependency in storybook's package.json file:
"dependencies": {
"#app/my-app": "1.0.0"
...
}
Go back to the root directory app and run yarn command. It will resolve all dependencies for all packages. Now you can use my-app inside storybook without the necessity of using Lerna.
I'm running an Angular app built with Grunt and using Bower and NPM.
I tried installing my npm module locally. The files are in the main app directory in node_modules folder.
The module docs ask me to load the module with <script type="text/javascript" src="node_modules/moment/moment.js"></script>, but I get 404.
Am I missing something? Do I have to tell Grunt that I want these NPM modules?
Can you provide more information on what your app is built with? If node serves your app, you need to make the directory you link to public. Assuming you're using express, this would look something like this in your app.js file:
app.use('/node_modules', express.static(__dirname + '/node_modules/moment/moment.js'));
Edit:
Or if you just want to make it work, try to load moment.js from CDN like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
Link to moment on CDN
Basically, npm is the package manager for all the javaScript frameworks such as Nodejs, angularjs etc. npm should be installed globally in the machine.You can install it from https://nodejs.org/en/ .
Next,you need check for the package.json file in your project.
If there is a package.json already existing in your project folder, then from command line you need to go to your project folder and type npm start.
If package.json file does not exist, then in the command line type npm init,then there will be a package.jsonfile created in your project folder.Then edit the package.json . and add the node packages into the package.json as similar way to this
{
"name": "shoppingkart",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www" //If you have any scripts.
},
"dependencies": {
"mongoose": "^4.9.0", // here you should have all your node_modules listed
"passport": "^0.3.2",
"stripe": "^4.15.1"
}
}
if you are not able to add the dependencies to json file, there is also another way to do it.
just go to your project directory in the command line and type
npm install --save grunt // And you need to do for all the node_modules, by replacing the **grunt**.
Automatically the dependency will be added to your package.json file.
If you installed your npm packages locally then your node_modules folder should found at the root of your project.
If you installed all your packages globally you may not see an npm_modules folder in your project.
To see where your global modules are located you can run
npm list -g
I faced the same issue just install the package globally and save at the end.
Like:
npm install -g <package> --save
Even the above doesn't work then use -f / --force at the end to force install.
I just created a component for React-Native that I will push soon to npm as a package. Although I'm facing an issue.
The component is dependent of another npm package called react-native-image-resizer. This package needs to be linked with rnpm in order to work.
Although, when I just install my component in a brand new project, the dependency won't be linked automatically, and the native library won't appear in the project. Of course, when I run rnpm link, it won't add it to the project either.
So I'm wondering what would be the best way to install and link this dependency?
MacBook-Pro:Example $ npm install react-native-image-crop
> react-native-image-crop#1.0.0 preinstall /Users/alexmngn/Work/react-native-image-crop/Example/node_modules/.staging/react-native-image-crop-95365d1b
> npm install --save react-native-image-resizer
react-native-image-crop#1.0.0 (git+ssh://git#github.com/alexmngn/react-native-image-crop.git#90e002c7d0f01c9d61277c30cad375560f09a94a) /Users/alexmngn/Work/react-native-image-crop/Example/node_modules/.staging/react-native-image-crop-95365d1b
├── UNMET DEPENDENCY react-native#^0.31.0
└── react-native-image-resizer#0.0.9
npm WARN react-native-image-resizer#0.0.9 requires a peer of react-native#>=v0.14.2 but none was installed.
npm WARN react-native-image-crop#1.0.0 No repository field.
- react-native-image-resizer#0.0.9 node_modules/react-native-image-crop/node_modules/react-native-image-resizer
Example#0.0.1 /Users/alexmngn/Work/react-native-image-crop/Example
└── react-native-image-crop#1.0.0 (git+ssh://git#github.com/alexmngn/react-native-image-crop.git#90e002c7d0f01c9d61277c30cad375560f09a94a)
MacBook-Pro:Example $ rnpm link
MacBook-Pro:Example $ # Nothing gets linked here...
Also, as you can see up there, I have an unmet peer dependencies issue with react-native when I install my component in my example project, even though it is listed properly (with the right version) in my dependencies in package.json:
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.2.1",
"react-native": "^0.31.0",
"react-native-image-crop": "git+ssh://github.com/alexmngn/react-native-image-crop.git"
}
}
Any idea why it complains?
Repo of the component available here: http://github.com/alexmngn/react-native-image-crop.git
Thanks
The rnpm link only links packages it found in package.json, generally these packages are installed via command rnpm install or npm install --save.
In order to automatically do this for those who install your package, you can write a preinstall npm script which will be executed before the package installed.
In thepackage.json add scripts block like this
{
"scripts": {
"preinstall": "npm install --save react-native-image-resizer#0.0.9"
}
}
After doing this, when someone try to install your pacakge via npm, react-native-image-resizer will be installed first, and also add leave ab entry to package.json -> dependency so that rnpm link can work correctly.
Read more information about npm script