What NPM dependencies are required for modular Vue? - javascript

I have working knowledge in conventional multi page applications developed in HTML + JS libraries using SSR but I am new to modern web development. I am currently learning Vue JS (the latest version) and I have watched some tutorial videos online. The videos I watched taught writing Vue JS web pages in a plain HTML + <script> setup instead of a project setup created by a Vue CLI program.
Now, I would like to know what NPM dependencies in the package.json file are required to change a project setup from a single HTML + Vue CDN script src to one with a folder structure set up by vue-cli, just like modern project folder structure created by other CLIs, e.g. Angular and React.
After running vue init <template name> I get a package.json like the following:
{
...,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In this NPM project, it is not required to have a <script src> CDN link but I am still able to use all Vue features. I know the JavaScript file is already included in one of the node_modules folders. But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder? I do not find any file path pointing to the JS file(s) in the project.
In Vue's official documentation, it states that:
The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.
May I know what dependencies do the job (or if it is the nature of a Node.js project, it is born this way) and any documentation or quotes from developers that are easy to understand for web dev newbies like me?

But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder?
I think what you're looking for is webpack config - I suggest you when creating blank project via Vue-CLI select options manually to set each config in dedicated file (so e.g. webpack's one will be in webpack folder with different .config.js files (separately for development, common and production).
Webpack resolves for you all file paths and dependencies that are used inside your project and bundles them into one (or multiple part-chunk) JavaScript file.
Regarding your main question - what you see under dependencies section is what will be included in your final application code and is necessary to make it work. Although, what you have under devDependencies section is required to build/compile/transpile/minify etc. your project so in the end it will have all dependency paths resolved properly, styles compiled (e.g. from scss to css) and everything uglyfied + minified.

Related

dotenv: command not found in nestjs project

I am working on a NestJS project. I am trying to start project but I am getting error: dotenv: command not found in the terminal. I have checked the packages.json and I can see to dotenv installed. Moreover I have tried to install dotenv with Yarn but still I am getting same error.
Dependencies in package.json:
"dependencies": {
"#nestjs/common": "^8.1.1",
"#nestjs/config": "1.0.2",
"#nestjs/core": "^8.1.1",
"#nestjs/jwt": "^8.0.0",
"#nestjs/passport": "^8.0.1",
"#nestjs/platform-express": "^8.1.1",
"#nestjs/swagger": "^5.1.2",
"#prisma/client": "3.3.0",
"bcrypt": "^5.0.1",
"class-transformer": "^0.4.0",
"class-validator": "^0.13.1",
-> "dotenv": "^10.0.0",
"express-rate-limit": "^5.5.0",
"helmet": "^4.6.0",
"nanoid": "^3.1.30",
"nodemailer": "^6.7.0",
"passport": "^0.5.0",
"passport-jwt": "^4.0.0",
"reflect-metadata": "^0.1.12",
"request-ip": "^2.1.3",
"rimraf": "^3.0.2",
"rxjs": "^7.4.0",
"swagger-ui-express": "^4.1.4"
},
The starting script that I am using:
"start:dev": "dotenv -e env/local.env -- nest start --watch",
I found the solution and it may help someone else. To run dotenv command in terminal we need dotenv-cli. Installing dotenv-cli with yarn add dotenv-cli solved my problem.

Error trying to install DanfoJs, The Node.js native addon module (tfjs_binding.node) can not be found at path

I am trying to install DanfoJS on windows 10 using below command:
npm install danfojs-node
but I get following error when I run npm start
Error: The Node.js native addon module (tfjs_binding.node) can not be found at path:
I tried to ran npm rebuild #tensorflow/tfjs-node build-addon-from-source but still having problem.
and here is the package.json
"devDependencies": {
"babel-polyfill": "^6.26.0",
"electron": "^10.1.0",
"electron-packager": "^13.1.1"
},
"dependencies": {
"#tensorflow/tfjs-node": "^2.3.0",
"#tensorflow/tfjs-node-gpu": "^2.3.0",
"body-parser": "^1.18.3",
"danfojs-node": "^0.1.4",
"electron-log": "^3.0.6",
"express": "^4.16.4",
"local-devices": "^2.0.0",
"node-thermal-printer": "^4.1.0",
"react-select": "^3.1.0",
"regenerator-runtime": "^0.13.5",
"ws": "^7.2.0",
"xml2js": "^0.4.22",
"xpath": "0.0.27",
"yargs": "^14.0.0"
},
I was using a different node.js version that Electron was. so I installed node.js version is the same as the version of Electron is using (12.16.3) and that solved the problem

Polyfilled React application suddenly reports that 'fetch' method is not defined

In the past months I have been developing a React web application that is displayed within a ASP.NET Core web project (template of Visual Studio). The application has worked in recent months and is used by users who will display it exclusively in IE 11 (Office web add-in that uses IE 11 rendering engine). I have used the 'fetch' method extensively and did not experience problems after adding the babel-polyfill npm package. Unfortunately, today I received the following error:
'fetch' is undefined
The polyfill packages are still present and I am unclear as to why this error is reported suddenly. As stated above it did work before, and I am unsure what caused the situation in which the 'isomorphic-fetch' package stopped working. Below you will find the package.json contents. Any insight into where to look for the root cause of this problem would be greatly appreciated!
{
"name": "ReactApp",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.38",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"#microsoft/office-js": "^1.1.2",
"#types/prop-types": "^15.5.2",
"babel-polyfill": "^6.26.0",
"moment": "^2.20.1",
"office-ui-fabric-core": "^9.3.0",
"office-ui-fabric-react": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.29.0.tgz"
}
}

cannot find module "react/lib/ReactComponentTreeHook" error when updating to React 16.2.0

Changed react and react-dom to 16.2.0 in my package JSON and receiving the following error.
Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"
Have tried clearing my node_modules, reinstalling everything, starting with a fresh project and adding dependencies in small chunks to narrow down the issue, and trying just about every option already seen on stack overflow.
my package.json is as follows:
{
"name": "",
"version": "0.0.1",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "..."
},
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"classnames": "^2.2.5",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.16.2",
"express-session": "^1.15.6",
"moment": "^2.19.3",
"mongoose": "^4.13.6",
"multer": "^1.3.0",
"node-sass": "^4.7.2",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"qs": "^6.5.1",
"react": "^16.2.0",
"react-click-outside": "^3.0.0",
"react-dom": "16.2.0",
"react-redux": "5.0.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"serve": "^6.4.1",
"style-loader": "^0.19.0",
"svg-sprite-webpack-plugin": "^1.1.0",
"svg-spritemap-webpack-plugin": "^1.0.3",
"url-loader": "^0.6.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.10.0"
},
"author": "",
"license": "ISC",
"homepage": ""
}
After placing a breakpoint at the line erroring out, it seems that the stack trace is coming form the import of react-dom, but if that is at the latest version matching react, i don't understand why i am having this issue.
Out of options that I can think of, would appreciate any help. Thanks.
Have tried clearing my node_modules, reinstalling everything
Remember that since NPM 5-th version it generates package lock file, without purging that reinstalling modules will not work appropriately.
Also check following - if some package has own dependency on old react package version, it will be installed into nested node_modules directory, and then everything is dependent on project/loaders structure. In come circumstance, invalid new or old package version will be loaded. In some npm packages, like graphql, special warning added for that case: "Maybe you have installed different version of package".
So, check other packages' versions, and maybe update them.

babel-loader#7.1.2 requires a peer of webpack#2 || 3 but none was installed

I am having this issue while installing all node_modules. And this is making me crazy.
babel-loader#7.1.2 requires a peer of webpack#2 || 3 but none was
installed.
Here is my package.json file
{
"name": "react-router-firebase-auth",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-scripts": "0.9.5"
},
"dependencies": {
"#atlaskit/button": "3.0.0",
"#atlaskit/css-reset": "1.1.4",
"#atlaskit/field-text": "4.0.1",
"#atlaskit/modal-dialog": "2.1.1",
"#atlaskit/page": "4.0.1",
"#atlaskit/util-shared-styles": "2.3.1",
"#shopify/polaris": "^1.5.1",
"babel-eslint": "^7.0.0",
"bootstrap": "^3.3.7",
"eslint": "3.16.1",
"eslint-plugin-react": "6.4.1",
"express": "^4.16.1",
"firebase": "^4.5.0",
"firebase-admin": "^5.4.1",
"firestore": "^1.1.6",
"fixed-data-table": "^0.6.4",
"griddle-react": "^1.8.1",
"jquery": "^3.2.1",
"node-localstorage": "^1.3.0",
"nodemon": "^1.12.1",
"react": "^15.5.3",
"react-bootstrap": "^0.31.3",
"react-bootstrap-button-loader": "^1.0.8",
"react-bootstrap-navbar": "^1.1.0",
"react-data-grid": "^2.0.59",
"react-date-picker": "^6.1.2",
"react-dom": "^15.5.3",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.0.0-beta.8",
"react-scripts": "^0.9.5",
"react-transition-group": "^1.2.0",
"reactstrap": "^4.8.0",
"requestify": "^0.2.5",
"simple-react-bootstrap": "^0.2.7",
"styled-components": "1.4.6",
"url": "^0.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I am using create-react-app for this project. So i could not change webpack.config.js file. What am i supposed to do here?
Please read this post. It describes what a peer dependency is.
https://stackoverflow.com/a/34645112/2379376
What that means is that you have webpack not installed at all or you have a different version (webpack 1.x) installed. But this plugin needs webpack in version 2 or 3 to function properly.
What you can do is
npm install webpack -g
So npm will install the newest version of webpack on your system.
But now other peer warnings could occur when other loaders need an older version of webpack.
When using Webpack 4:
I've faced the same error but I actually had the webpack 4 installed. In order to solve this I used the instruction on babel-loader documentation and installed the following extra libraries: babel-loader, #babel/core and #babel/preset-env.
Command to install all the required libraries:
npm install -D babel-loader #babel/core #babel/preset-env webpack
package.json devDependencies before the installation:
"devDependencies": {
"chai": "^4.1.2",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"expect": "^22.0.3",
"jest-junit": "^3.3.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^4.9.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.2.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
After the installation:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"chai": "^4.1.2",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"expect": "^22.0.3",
"jest-junit": "^3.3.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^4.9.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.2.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
Hope it helps
Install webpack globally in node environment as well as in development(as dev dependency).
As main function of webpack is to bundle JavaScript files for usage in a browser.As each time you made changes to index.js (entry point of npm) at development time then you have to run webpack to make changes in bundle.js file also, so we need to install in both the environment(ie. node environment and development environment)
Run below command to solve the issue:
npm install -g webpack#3.10.0
npm install --save-dev webpack#3.10.0
Here I am using 3.10.0 for webpack. You can use 4 as well. I think this will help.

Categories