I'm not willing to use typescript compiler provided in angular 2 quick start guide and will use gulp.js instead. However there are few questions I have about package.json file provided on angular website:
{
"name": "angular-starter",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
I'm sure that few things like tsc, tsc:w script comands alongside typescript devDependency can be safely removed, but am not sure about purpose for things like concurently dependency as well as dependency section in general, could you guys provide more info on all dependencies that follow angular2? I tried looking these up in quickstart guide along apendixes, but had no luck as they are very short.
concurently is and npm package which allows to run multiple CLI commands in one shot, see line below in package.json. concurrent command is coming from concurrenlty. You can remove that safely.
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
dependency section in package.json file lets you keep track of project dependencies. Using reference of these packages in dependency section allows you to use module bundler like webpack, browserify etc. It also keeps your project linked to specific versions of each of these packages if new version introduce any breaking changes etc. Having this section in package.json file lets you remove packages directory (node_modules) to be under source control. Installing these packages again on lets say another machine requires only package.json and dependency section in it.
For each package in dependency section search npmjs website for more details.
Well adding some points with #nexus23's answer. my answer is not completed i know but for comment it is too long so posting as answer hope this will help somene.
Package.json is the important file for the project where you import our dependencies list which you used in your project.
Basically there are three types of dependencies
Dependency
DevDependency
peerDependency
for more documentation refer here in the answers.
now come to the point i.e answer to this question. there are few dependencies which we have to include for make our angular2 project run.which is listed below.
angular2 -- is the basic file for the angular2 project. which is most important file for our project. (stable latest version is angular2 beta)
systemjs -- is the Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.
we use systemjs Config for setup the baseUrl, to Import main file etc in our main file i.e index.html like following:
<script>
System.config({
baseURL: '<%= APP_BASE %>',
paths: {'*': '*.js?v=<%= VERSION %>'},
defaultJSExtensions: true
});
</script>
Related
So i've been trying (without sucess) for 2 days straight every possible way of using sass in my project.
I'm using 7-1 architecture for sass and a basic components-layout-pages architecture for the javascript.
The problem is i keep getting this error :
Failed to compile ./src/sass/main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/sass/main.scss) Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v5.0.0 This error occurred during the build time and cannot be dismissed.
From what i've understood almost all sass compiler are deprecated and i found out that Dart sass might be the best one so i've been installing it and setting up the script, however even if most of the compiler did compile the code just fine, my app won't load...
I don't know what to do about it and can't wrap my head around it.
so i'm here begging for your help.
By the way I read almost all question related to sass dart sass node and react on here and havent found an answer to mine.
If you need some more details about the code please let me know.
Solved by installing sass loader this way yarn add -D sass-loader sass webpack and the matching webpack version.
This is the actual package.Json file right now:
{
"name": "cyzbot-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"sass": "dart compile-sass.dart ./src/main.scss ./src/main.css",
"prefix": "postcss ./src/main.css --use autoprefixer -d ./public/css/prefixed/",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass": "^1.52.2",
"sass-loader": "^13.0.0",
"webpack": "^5.73.0"
}
}
Edit: it just happenned again and thanks god i posted the package when it was fixed...
So I just figured out the issue came from me triyong to do an 'npm audit fix' and or 'npm audit fix --force' and there's the code it outputed as i was trying to restart the server:
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:
"webpack": "4.28.3"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in
the tree:
C:\Users\Work\Documents\Code\CyzBot-React\node_modules\webpack (version: 5.73.0)
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 "webpack" 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:\Users\Work\Documents\Code\CyzBot-React\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something
in your home folder.
7. Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
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!
And it seems it tried switching back to an older version of react script ( for security issues ) but like 2.1.3 ??
It makes it seems like it's an error from webpack when in fact it's just that the only version of webpack that looks like to be working with that version of react-script is : "webpack": "4.28.3".
So if you just delete your package in node_modules modify the react-script version to the one you use(d) then do yarn install or npm install then start the local server again it should work back now.
At least it did for me.
I have a Node project, and I can npm pack it into a tarball and install it in another directory for testing. When I do that, the set of files in the "bin" clause of my package.json are correctly symlinked into the node_modules/.bin directory there. Thus I can use npx something to run the "something" script and it works as I would expect.
From the actual project directory, however, npm install doesn't do that. The scripts are there in my top-level "bin" directory of course, but npx doesn't find them. Obviously I could just run them directly, but it would be nice if I could run the same shell commands to run them in other installation directories and in the project home directory.
I don't want to install the package globally; I want to keep everything local, at least for now. So can I get npm to make those symlinks for me, or should I just bite the bullet and do it myself?
Here's my package.json:
{
"name": "#foo/plazadb",
"version": "0.1.0",
"description": "Basic database setup with upload/download from CSV",
"main": "lib/plazadb.js",
"author": "Pointy",
"license": "ISC",
"dependencies": {
"arg": "^5.0.1",
"cls-hooked": "^4.2.2",
"csv-parser": "^3.0.0",
"csv-stringify": "^6.0.5",
"neat-csv": "^7.0.0",
"pg": "^8.7.*",
"sequelize": "^6.16.*"
},
"bin": {
"conntest": "./bin/conntest.js",
"download": "./bin/download.js",
"upload": "./bin/upload.js"
}
}
The "bin" files all exist (of course, otherwise they would never work). What I'm trying (out of ignorance) is a simple npm install from the project directory.
One way to do is by
specifying a local prefix by using npm config set prefix <path> or one of these methods linked here.
generating symlinks using npm link
As a word of caution, to undo npm link executing npm unlink . may not work. Instead one may have to run npm uninstall -g ..
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
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 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