I know this problem has been reported elsewhere, when webpack and html-webpack-plugin are installed with npm -g:
module.js:341
throw err;
^
Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:339:15)
And the answer people have found is to install one or both locally to the project. But that won't work for me. I need to get this working in our shared build system, not just in my dev environment. This means having it installed globally so that all projects have access to it via their ant/nant build scripts run by Jenkins.
My project is very simple. A couple of html pages with content generated by reactJS scripts included in the html with script tags. This should be easy, and its beginning to be a pain. Thinking of dumping webpack and looking for another simple javascript package manager.
Are there environment variables that we can use to tell webpack to look in the global node 'node_modules' directory for 'require'd plugings/packages?
Suggestions?
You don't have to install webpack globally for Jenkins.
Add to your package.json under scripts a command that runs the local webpack, like this:
"scripts": {
"start": "webpack-dev-server --inline --hot",
"build": "webpack -p"
},
Now Jenkins can run your build script, without having a global webpack installed:
npm run build
In this way you can maintain multiple projects with different versions of webpack, and each project can have it's own local dependencies.
The scripts prop is part of the projects package.json. The package.json contains all dependencies, and dev dependencies (build, testing, etc...) of the project. Using the package.json running NPM install on your build machine, you can install locally (part of the project dir) all dependencies. A sample of a package.json for an angular project built with webpack:
{
"name": "whatever",
"version": "1.2.0",
"description": "whatever",
"scripts": {
"start": "webpack-dev-server --inline --hot", // runs the dev server
"build": "webpack -p" // builds the release
},
"dependencies": { // the dependencies that are part of the actual release
"angular": "1.5.0",
"angular-animate": "1.5.0",
"angular-messages": "1.5.0",
"angular-ui-router": "0.2.15"
},
"devDependencies": { // build dependencies
"babel-core": "6.5.2",
"babel-eslint": "6.0.0-beta.1",
"babel-loader": "6.2.3",
"babel-preset-es2015": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"css-loader": "0.23.1",
"file-loader": "0.8.5",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.14.0",
"less-loader": "2.2.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.14",
"webpack-dev-server": "1.14.1"
},
"license": "MIT"
}
Whenever the git master is updated, Jenkins pulls the latest commit, cleans the current build directory, including all dependencies, and runs in the project folder the following commands:
npm install to install all dependencies locally, as part of the project folder
npm run build to build the release
Jenkins is not aware of webpack or any other build tool or dependency. The only things that are installed globally on Jenkins are nodejs and npm.
And here is the simple bash script that runs the commands:
rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
npm run build // run the build script
Related
When I try to run my Next.js app with npm run dev I get an error message saying that I don't have the required packages to run Next with Typescript:
Please install #types/react by running:
npm install --save-dev #types/react
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
However, the module '#types/react' is installed. I tried running npm install --save-dev #types/react and got no error messages (just a bunch of warnings but I don't think they are the problem).
How can I solve this and run the project?
Seems like there is a bug in the current #types/react version (specifically v18.0.2), you can downgrade to 18.0.1 with npm install --save-dev #types/react#18.0.1
Source: https://github.com/vercel/next.js/issues/36085
I used yarn add -D #types/react#18.0.1 and it worked perfectly!
Netsu is right, seems like there is a bug in the current #types/react version (specifically v18.0.2).
My solution was to add --only to production:
RUN yarn install --only=production
An alternative approach i took here was to create a new nextjs project using npx create-next-app. And then copied the versions of all the dependencies and devDependencies.
Here is a sample package.json. I got this after create new nextjs project.
{
"name": "my-app",
"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": "18.2.0",
"react-dom": "18.2.0"
},
"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"
}
}
Copy all the versions listed in the package.json you get after create new nextjs project. This will ensure that your core dependencies are compatible with each other.
So I installed Jest in a new project and the app stopped running, due to the error below.
Summary: It's telling me that I've manually installed a dependency to node_modules, something I didn't do, and it's asking me to delete my entire node_modules and yarn.lock. But those steps aren't working.
Note: Removing the dependency from package.json then deleting node_modules and yarn.lock does fix the problem, but when I install jest again, it falls into the same problem.
The steps I took to install jest, here:
$ yarn add --dev react-test-renderer
$ yarn add --dev jest babel-jest #babel/preset-env #babel/preset-react react-test-renderer
The error message
$ react-scripts start
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:
"jest": "26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of jest was detected higher up in the tree:
C:\WORK\plotting-a-chart\node_modules\jest (version: 26.6.3)
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 "jest" 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.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\WORK\plotting-a-chart\node_modules\jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
I tried doing all the steps, I already use yarn, I even cleared my yarn cache before doing the steps 1 to 4.
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder;
Delete node_modules in your project folder;
Remove "jest" from dependencies and/or devDependencies in the package.json file in your project folder;
Run npm install or yarn, depending on the package manager you use.
I'm out of ideas.
// package.json
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"node-sass": "^5.0.0",
"prismjs": "^1.23.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.15.5",
"react-icons": "^4.2.0",
"react-resizable": "^1.11.1",
"react-scripts": "4.0.3",
"react-vis": "^1.11.7"
},
"scripts": {
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"unit": "jest"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/preset-env": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"babel-jest": "^26.6.3",
"babel-plugin-root-import": "^6.6.0",
"jest": "^26.6.3",
"react-test-renderer": "^17.0.2"
}
}
// babel.config.js
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
};
You don't have to npm install jest. The error is telling you :
Don't try to install it manually.
Here is what it says on react documentation
If you use Create React App, Jest is already included out of the box
with useful defaults.
To solve your issue you should run this :
npm uninstall --save-dev jest
npm uninstall --save jest
rm node_modules
npm i
I did solved this issue by creating a .env file in the project folder, with SKIP_PREFLIGHT_CHECK=true, and now the test runner seems to be working perfectly.
When I encountered this problem, I used the stack trace to figure out what version of jest it was looking for. I then yarn removed it and reinstalled the version it wanted. Just to be safe I would do the entire process it suggests but make sure you install the version it asks for
I'm trying to create a basic npm script to build my personal web projects, basically want to compile and minify Sass and JS ES6+ code. I'm new to npm scripts, but below is what I managed to do with the resources I found.
This is what I have so far:
"scripts": {
"devserver": "live-server --open=/dist/",
"sass": "node-sass --output-style compressed -o scss/ dist/css/ -w",
"terser": "terser src/js/index.js -c -m -o dist/js/index.js",
"watch:sass": "onchange 'scss/*.scss' -- npm run sass",
"watch:js": "onchange 'js/*.js' -- npm run terser",
"start": "npm-run-all --parallel devserver watch:*"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.2",
"terser": "^5.3.0"
}
Couple of things I notice:
When I do npm run start the live server kicks in and loads the site and when I change the js or scss code the script register the changes but these are not reflected in the dist/ folder
Only when I run say npm run sass or npm run terser the changes do happen inside the dist/ folder
What am I missing or doing wrong?
Trying to do what I thought was a simple thing.
I have a node package that uses advanced js syntax. I want to depend on it in a react project.
So I installed babel packages via --save-dev, and added a .babelrc:
{
"presets": ["env"],
"plugins": ["transform-object-rest-spread"]
}
That was not enough so I added an npm script under install to trigger the compilation. Then I had to include the compiled target lib/index.js as my entry point via main. So in the end my package.json looks something like this:
{
"name": "bla",
"version": "1.0.0",
"scripts": {
"postinstall": "babel src --out-dir lib"
},
"main": "lib/index.js",
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react-native": "^4.0.0"
}
}
When I run npm install locally on this project, it builds properly. However when react scripts build this (the dep is from github), I get an error: sh: 1: babel: not found.
Why is this so difficult? What am I doing wrong?
sh: 1: babel: not found is from your shell not finding the babel binary file (normally under ./node_modules/.bin/babel)
You'd want to compile before you publish to npm, so anyone who installs your package has the built files. But, for Github try something like:
"postinstall": "npx babel src --out-dir lib"
This hack worked instead of the postinstall:
...
"preinstall": "npm install --ignore-scripts && babel src --out-dir lib",
...
Source: https://github.com/Financial-Times/structured-google-docs-client/commit/891180db742ed00cace0139b201850f79d337098
Also relevant: https://github.com/npm/npm/issues/10366
I am not sure I understand the need here correctly, but could you not just run the babel call in prepare or prepublish scripts? That way only local npm install calls would pick that up.
See more about npm scripts lifecycle: https://docs.npmjs.com/misc/scripts
I'm stuck with a problem when building my Node JS/electron app with electron-builder. It works perfectly when running npm start. But, when I execute the command build -w (for windows) it fails with this log.
Here is my JSON file:
{
"name": "Munshiiii",
"version": "1.0.0",
"description": "This is a short Description of the project",
"main": "index.js",
"scripts": {
"start": "electron .",
"dist": "build -w"
},
"author": "Hicham Dbiza",
"license": "ISC",
"devDependencies": {
"electron": "1.7.8",
"electron-prebuilt": "^1.4.13"
},
"dependencies": {
"asar": "^0.13.0",
"cradle": "^0.7.1",
"fs": "0.0.1-security",
"git": "^0.1.5",
"jquery": "^3.2.1",
"jsdom": "^11.3.0",
"loke-ipc": "^1.0.5",
"mongodb": "^2.2.33",
"node-couchdb": "^1.2.0",
"pouchdb": "^6.3.4",
"pouchdb-replication-stream": "^1.2.9",
"scanner.js": "^1.0.0"
},
"build":{
"appId": "com.hicham.dbiza.faizan",
"win":{
"target": "nsis",
"icon": "build/Munshiiii.ico"
}
}
}
for this project Im using:
fs
pouchdb
electron
jquery
....
I already used electron-packager and it works almost fine with one problem: See this picture, which means all links inside the js files (e.g: fs.readFileSync('./assets/state','utf8')) won't work.
I have also added some native js click and keypress listeners... could that be a problem?
My electron version is 1.7.8.
I appreciate your help.
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
if you are using Npm
do just simple steps terminal:
1 npm install yarn -g
2 yarn
3 yarn pack
Read this Blog (reactJS in electronApp with .exe file)
Have you installed electron-builder? You don't have it in your package.json. Then I would propose to use the electron-builder command, as recommended by the authors.
Run npm install electron-builder --save-dev and change your dist command to run just electron-builder. Since electron-builder per default build for the current running OS, it's not necessary to send the -w flag. If you still experience problems, try to set the following env variable to get a better stack trace:
DEBUG=electron-builder,electron-builder:*
Edit after getting more information from the comments:
According to this issue at GitHub your first issue seemed to be caused by permission errors, and was solved with running as administrator.
From electron-builders README:
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Try to remove your node_modules folder and run
npm install yarn -g && yarn && yarn pack
First I installed electron-builder with following line
npm install -g electron-builder
then I created a build folder in the root of my project, containing the .ico file with the app logo. then I wrote following parts in my package.json
"build": {
"appId": "your.app.id",
"productName": "Your final product name"
}
and
"scripts": {
"start": "electron .",
"pack": "build --dir"
}
That was everything I needed. I opend my root folder in the terminal and executed
build -w
That created an folder called dist, with an unpacked version of my app plus an installer for the app.