I have a Vue app that uses vuetable-2 and vue-axios, with the following imports in app.js
import Vue from 'vue'
import VueMaterial from 'vue-material'
import axios from 'axios'
import VueAxios from 'vue-axios'
Without having axios directly in package.json's dependencies section, eslint will complain
[eslint] 'axios' should be listed in the project's dependencies.
I already have axios in ./node_modules as part of the vue-axios dependencies.
└─┬ vuetable-2#1.6.6
└── axios#0.15.3
Running npm install --save axios will fetch the latest version of axios and add it to package.json, but now I have 2 versions of axios in my dependencies
├── axios#0.17.0
└─┬ vuetable-2#1.6.6
└── axios#0.15.3
How can I re-use axios#0.15.3 that is part of the vuetable-2 dependency?
Don't forget about exact version
write in package.json without ^
or type npm i axios#0.15.3 -S -E
-E, --save-exact: Saved dependencies will be configured with an exact version rather than using npm's default semver range operator.
You can simply add it to the dependencies in package.json yourself:
"axios": "^0.15.3"
So for example your package.json might look like:
{
"dependencies": {
"vuetable-2": "^1.6.6",
"axios": "^0.15.3"
}
}
Although obviously you would have more dependencies etc.
Once that is done, just run
npm install
you can just install the same axios version which used in the vuetable-2, just run following code:
npm i axios#0.15.3 -S
Related
I am learning react from an old tutorial, so I have to create a project with the version 1.5.2 of Create React App.
I have installed create-react-app#1.5.2 globally with no problems.
After I executed npx create-react-app it uses the latest version of Create React App.
Is there any way that I could do it, or where can I find the code for a project with that version?
It's no possible because of several reasons:
I installed the package "create-react-app#1.5.2" from here to assure I'm using the correct create-react-app version:
npm init -y
npm install create-react-app#1.5.2
or
yarn init -y
yarn add create-react-app#1.5.2
In the \node_modules\create-react-app folder I executed the command:
node index.js app-folder
And it installed the last version of react without a template because it's an old version of the package, but still the latest version:
Checking the file createReactApp.js I can see it's meant to be that way, even if it's an old version of the builder "create-react-app" it will install the last version of the packages.
Also, if you try this command: node index.js app-folder --scripts-version 1.5.2
It will not found the version you want, instead, it will show a list of available versions of react-scripts.
According to the date, the correct packages are:
react: 16.4.2
react-dom: 16.4.2
react-scripts: 1.1.5
So you can install the version you want with this:
npm init -y
npm install react#16.4.2 react-dom#16.4.2 react-scripts#1.1.5
or
yarn init -y
yarn add react#16.4.2 react-dom#16.4.2 react-scripts#1.1.5
If you're react v18, and you want to go down to the previous non-change breaking version, here's what you can do:
In your package.json replace:
"react": "^18.0.0"
"react-dom": "^18.0.0"
With
"react": "^17.0.2"
"react-dom": "^17.0.2"
Then go to your entry file index.js At the top, replace:
import ReactDOM from 'react-dom/client'
With
import ReactDOM from 'react-dom';
In your index.js file, replace:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
With
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Delete your node_modules and run yarn install or npm i --force
After installation, run yarn start or npm start
--------------------------------------OR------------------------
If you want through npx command
npx create-react-app[version] my-app
npx create-react-app#17.0.2 my-app
I installed uuid with npm i uuid
and tried to import using import { v4 as uuidv4 } from 'uuid'; as per the instructions. I checked the node_modules folder and uuid is there. But I'm getting an error Could not find a declaration file for module 'uuid'. and uuid/dist/index.js' implicitly has an 'any' type. any idea? thx
Install #types/uuid as dev dependency. somehow that fixes the issue idk.
npm i --save-dev #types/uuid
I have an npm project with the following structure:
app-dep
├── dist
│ ├── bundle.js
│ └── bundle.js.map
├── node_modules/
├── package.json
├── package-lock.json
├── src
│ ├── base-component.ts
│ ├── factory.ts
│ ├── app.ts
│ └── modules/
├── tsconfig.json
└── webpack.config.js
My app.ts code has an App class that utilizes all .ts files inside src/
export default class App extends HTMLElement { //some-content }
I use webpack to build a bundle.js inside the dist/ folder.
I have another angular project where I install this app-dep project using
npm install --save ../app-dep
When I try to use it in my angular component:
import App from 'app-renderer/dist/bundle';
ngOnInit() {
window.customElements.define('micro-app', App);
}
I get this error:
Failed to execute 'define' on 'CustomElementRegistry': parameter 2 is not of type 'Function'
When I try to log it on console, all I can see is undefined.
It seems that I can't import basic functions even.
Can you tell me what's wrong?
I think the problem has to do with the import or the pack, I ellaborate below with the steps to follow.
Also, make sure that you are exporting all the classes that you want to make available from the outside.
For TypeScript libraries
You can simply use "tsc" and then pack the generated code inside the dist folder with "npm pack" and install the dependency in your application with "npm install ".
This may get complicated due to the different module systems and bundlers, check this links for more info on Webpack:
https://marcobotto.com/blog/compiling-and-bundling-typescript-libraries-with-webpack/
https://webpack.js.org/guides/author-libraries/
For CSS libraries
The "npm pack" has to be executed in the root folder. You may want to process your styles with sass before and only pack the result.
For Angular libraries
By default with Angular CLI when you build a library project the code is generated in /dist/mylibrary folder.
If you want to use that code in other project, the steps are:
Build your library with "ng build mylibrary" (add --prod for production).
From your library, move into /dist/mylibrary folder and then execute a "npm pack", that will generate a tgz package.
From your application in which you want to use the library execute "npm install " to install the dependency.
To import code from the library use "import * from 'mylibrary'"
Other option would be using "npm link", that creates a link between your node_nodules and the library code as explained here:
https://www.willtaylor.blog/complete-guide-to-angular-libraries/
That would be the way to go with local libraries, usually these libraries are published into Npm repository (public or private) and installed remotely with "npm install ". These steps are only for local usage.
I am trying to use Chart.js library in my project.
I want to import it externaly and not to instal the package by npm install.
Also about #types/chart.js I must install it from npm install or there is other option externally.
Thanks!
I am learning react and not exprienced too much. Whenever I want to create a new react project, the create-react-app command takes a lot of time making one. I have followed CodeSandbox which creates react apps really fast and they are simple and clean unlike ones made by create-react-app, which are too complicated and messy. Is there a boilerplate to help me creating simple react apps quickly?
This is the easiest way to get started
npx create-react-app my-app
cd my-app
npm start
Below is an alternative, but it's a lot more involved.
mkdir my-app // create directory
cd my-app
npm init -y //create package.json
npm install react react-dom //install react and react-dom
touch index.js index.css
You can add your code to index.js. It will looks something like this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
After that you'll need to get your babel
npm install --save-dev #babel/core #babel/preset-env #babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
touch webpack.config.js
Configure your webpack
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './my-app/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'my-app/index.html'
})
]
}
Add babel presets and npm command to build (build) and run (dev) your code to package.json
"main": "index.js",
"babel": {
"presets": ["#babel/preset-env", "#babel/preset-react"]
},
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
}
The best and most effiecient way is to first install pnpm package. It's much faster than normal npm install or npm i command due to symlinks and cache implemented in it.
It's better to have a git repository which is initiated by create-react-app, you can install the packages you commonly use in the package.json file. Then each time you want to create a new project, you can clone the repository and install the packages fast by running the following command. It may takes the same time as before, because pnpm needs to cache the packages and re-use them.
pnpm i
I have created a sample repository, you can clone it from this link.
P.S 1:You can read more about pnpm, in this link.
Use
npm init vite#latest
Or
Yarn create vite#latest
It will ask you a question and you have to answer it and it creates and run react apps tooo faster than the original cli
In my opinion use yarn instead npm. I heard it is faster:
npm install --global yarn
Then for making a directory for your projects:
yarn create react-app my-app
For checking version:
yarn --version
One way I do this fast is by running npx create-react-app boilerplate
and then save that directory and push it to github.
then you can just get your new react app by simply cloning that repo.
by running git clone boilerplate and then you can just rename the folder, and the name of the app and other information you need in package.json.
I really only edit the name and the source repo in the package.json