I want to try basic project from tanstack/react-table from
https://github.com/TanStack/table/tree/main/examples/react/basic
I am new in NPM. I am on Windows.
I wrote:
git clone https://github.com/TanStack/table.git
then I am going to the subfolder examples\react\basic
then I wrote:
npm install
and in subfolder "node_modules" only folders "react" and "react-dom" appeard.
There is package.json:
{
"name": "tanstack-table-example-basic",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"start": "vite"
},
"dependencies": {
"#tanstack/react-table": "^8.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#rollup/plugin-replace": "^4.0.0",
"#vitejs/plugin-react": "^1.1.3",
"vite": "^2.8.6"
}
}
Please, why the "#tanstack/react-table" package is not installed?
When I wrote:
npm start
I received message:
[ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "#tanstack/react-table".
I tried to write:
npm install #tanstack/react-table -g
and folder "#tanstack/react-table" appeard in folder C:\Users...\AppData\Roaming\npm\node_modules. I copied it to project folder and start project and all was OK. But I think, it is not right way.
What am I doing bad, please?
do you want to add react-table to your own project or you just want to clone their project and run the samples ?
for the first one you should go to your project folder and write this in cmd
npm install #tanstack/react-table
for the second one you should clone their project then go to example folder
then write npm install in cmd
Edit 1
remove all the node_modules in any folder of project
run this command in main folder yarn install
run yarn install in folder examples/react/basic
run command npm start in basic folder
before start you should install yarn if you didn't have it
Related
For instance, I want to run jest tests for one of my packages.
I set up the test script in the child package.json:
"test" : "jest"
However when I got to the package directory and run:
npm test
I get:
sh: jest: command not found
This makes sense because I've only installed jest in the root package since it is a dev dependency.
What do I need to do to make the npm package jest available in the child packages?
We're using an npm package called env-cmd https://www.npmjs.com/package/env-cmd to run scripts from root level in packages.
our root package.json looks something like this:
{
"name": "#myAwesomeApp/root",
"private": true,
"devDependencies": {
"env-cmd": "^10.1.0",
"lerna": "^5.0.0"
},
"dependencies": {
[...]
},
"workspaces": [
"packages/*"
],
"scripts": {
"internal:warning": "echo \"\n\t\\\\033[32m! ANY NOTIFICATION !\n\"",
"jest": "npm run internal:warning && env-cmd --silent lerna run test"
}
}
Assume I have a package.json like this:
{
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"#aws-sdk/client-s3": "^3.21.0",
"#testing-library/react": "^11.2.5",
"axios": "^0.22.0",
"credit-card-type": "^8.3.0",
"csstype": "^3.0.8",
"dayjs": "^1.10.4",
"lodash": "^4.17.20",
"mathjax-full": "^3.2.0",
"mathjax-react": "^1.0.6",
"react": "^17.0.2",
},
"proxy": "http://localhost:5000",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The problem is that the dependency mathjax-react & mathjax-full need react#"^15.0.0 || ^16.0.0". I have tested with npm i --force and npm i --legacy-peer-deps and It all seems to work fine with my react version which is react#17.0.2.
I wouldn't like to run npm i --force and npm i --legacy-peer-deps every time i need to install the dependencies, So I was looking for a way to automatically do that only for the mathjax-react & mathjax-full whenever I run npm i. I tried looking in the .npmrc docs and this reference, but could not find a way to do that. What might be a solution for this? Is there a native npm solution for this? Or do i have to write a script that reads my package.json and runs npm install for every dependency alone?
My reasoning is that if i need to install some other dependencies that have conflicts, I'd never be warned about it.
Legacy peer dependencies aren't per-package, they apply to the project as a whole. It's just that you might need it for your whole project to keep only one or two dependencies happy. You'll find if you install a package with --legacy-peer-deps and then install a different package without that flag, npm will complain about the first package again. So once you need --legacy-peer-deps, you need to specify it always no matter what package you install.
According to the docs, you can set it permanently with:
npm config set legacy-peer-deps=true --location=project
This just adds legacy-peer-deps=true to the end of the .npmrc in your project root.
I try to exclude the package react-virtualized from the peer dependency checking of NPM 7. I know I could separately install that package with
npm install react-virtualized --legacy-peer-deps
...but my goal is to install all packages with npm install and this one shall not be checked for peer dependencies. Is that possible?
I would accept any answer that shows me how to manipulate the package.json so that a fresh npm install runs without peer dependency errors.
I have the following package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-device-detect": "^1.11.14",
"react-markdown": "^7.0.0",
"react-resize-detector": "^6.7.1",
"react-virtualized": "^9.22.3"
}
}
There isn't a way to do that within your own package.json as far as I am aware. The change would need to happen in the package.json for the react-virtualized package. Perhaps one of these alternatives will work for you:
Set legacy-peer-deps in a .npmrc file for your project. This won't work if people are installing your project via npm but if your project is cloned from a git repository or otherwise downloaded, and then people run npm install from there, including a .npmrc in the project should work.
Require using npm#6 which will be more lenient about peer dependency checks. You can specify the npm version in the "engines" field in your package.json.
Install react-virtualized from GitHub. The master branch (and, as of this writing, unfortunately only the master branch) has the d36509817ac44 commit which added react#17 and react-dom#17 as acceptable peer dependencies. Because this code is not in any release yet, you may be getting a version of the module that is unstable. To do this: npm install git+https://github.com/bvaughn/react-virtualized.git
Use react#16 and react-dom#16 instead of #17 for each.
With npm#>=8.3.0 use overrides in package.json:
"overrides": {
"react-virtualized": {
"react": "$react",
"react-dom": "$react-dom"
}
}
See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
I am new in react-native and I have, for the first time, created my own module(npm).
I have tried to create my own module(npm) for common components and individually it works fine. However once I install, link it in our app, and try to use those components, it gives an error like this:
Unable to resolve module `<Module-name>` from `<file>`: Module `<Module-name>` does not exist in the Haste module map.
(Note: I have tested using Android Emulator only)
I have followed the below steps for module and test app creation
For Module
react-native init <module-name>
Add simple code of component in main index.js
And set pacakge.json like this:
{
"name": "<module-name>",
"version": "0.0.1",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build": "echo 'build script executed'"
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
Now I check this component (react-native run-android), it will work fine.
Now I have tried to use in an app with the below steps
For Test App
Create new fresh app (react-native init <app-name>)
Install created npm with full path like;
npm install <full path of component>
Now I try react-native link <full path of component>, I have also tried simple react-native link, but nothing happens.
Now I run app using react-native run-android, however every time it gives the same error like;
Unable to resolve module <created-module name>
test app package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-my-library": "^1.0.2",
"<created-module-name>": "file:../<created-module-name>"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Created module successfully installed but I think it is not linked properly and it will gives error.
So what is wrong here ?
Please give me suggestion / help.
Thanks.
I am assuming your module is successfully published in npm repository. Otherwise you can not use npm install <full path of component>.
If you are using
npm install <full path of component>
command for installing your module to a Test App from npm repo. Specify in your package.json like
"<created-module-name>": "file:../<created-module-name>"
is wrong. You need to remove that line from your package.json and try to install like;
npm install --save <full path of component>
This will automatically create a line in your package.json. You can now manually link your module.
For manual linking you can follow that guide.
Edited:
If you are using in your local computer,
Then no need to npm install.
Just copy your module into your project node_modules folder.
Then in you package.json add;
"dependencies": {
...
"your_module_name": "your_module_version"
...
}
Then, you just follow the manual linking process that I mentioned above.
I'm trying out webpack for the first time, but I cant even get past the installation of webpack-cli
I get this error
{ Error: Cannot find module 'webpack-cli'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at runCommand.then (C:\Users\Henrik\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:142:5)
at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }
When I run webpack it suggest to auto install it, but fails at that.
Any suggestions?
-- EDIT 1 --
My package.json looks like this:
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {}
}
I've tried running this : "npm install webpack-cli --save-dev" amongst various other suggestions found all over the web
Try this:
npm install -g --save-dev webpack-cli
Looks like you might be trying to use a global webpack package with a local webpack-cli package.
Try adding webpack to your devDependencies and running webpack from inside an npm/yarn script, and if that doesn't work try uninstalling your global webpack binary.
I executed your package.json and it worked without any errors
Try deleting the node_modules folder and run the comand npm install from the prompt