Webpack: loading dependencies from local directory - npm

Package.json
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.5",
"moment": "^2.22.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"my-module-1": "file:../modules/my-module-1",
"my-module-2": "file:../modules/my-module-2",
"my-module-3": "file:../modules/my-module-3"
},
If I install dependencies, it is finished successfully. However, in map node_modules, my-module-x is a shortcut, which lead to the weird errors for babel-loader. If I copy-paste my modules into node modules, it is working very well. In previous versions of webpack, they were always copied. Now using webpack 3.6.0.
So, my question is: is there another way of defining dependency in package.json, or a plugin that copies the modules (from package.json) from another directory to node_modules without creating a shortcut.

"dependencies": {
"my-module": "file:a_map/my-module",
// a_map folder is on the same level as this package.json file
}
Works very well with settings:
Npm (6.12.0) and

Related

Laravel and Vue3 upgrade issues with the vue-template-compiler

I am trying to upgrade from Vue2 to Vue3 but getting errors.
I have installed vue3 latest version, installed #vue/compiler-sfc and tried to remove vue-template-compiler but when I do npm run dev keeps getting below error, I have gone through lots of SO posts but still getting this error.
Vue3 doesn't need vue-template-compiler but why I am still getting below error. Could anyone help please? Thanks!
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse(...\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports(...\node_modules\vue-loader\lib\index.js:67:22)
My package.json file looks like this:
"devDependencies": {
"#types/jquery": "^3.5.5",
"#vue/compiler-sfc": "^3.1.2",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cross-env": "^7.0.3",
"jquery": "^3.6",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.3.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.13",
"sass-loader": "^7.1.0",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"vue": "^3.1.2",
"vue-loader": "^15.9.7",
"webpack": "^5.39.1"
},
"dependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#fortawesome/fontawesome-free": "5.*",
"#popperjs/core": "^2.9.2",
"vue-router": "^4.0.10"
}
packages.json doesn't have vue-template-compiler. I have tried removing while node_modules folder and did npm install and npm run dev but these errors are still appearing.
Thanks
If anyone else facing this issue, I did below steps to solve this issue:
Upgraded vue-loader to version v16.1.2
Removed node_modules folder from the root directory
Removed package-lock.json from the root directory
Run npm install
npm run dev
Now files compiled successfully.
Hope its helpful.

All my react-native projects shows error TypeError: cb.apply is not a function

I'm realtively new to react-native. All my projects were running fine in the morning, but somehow they stopped working. When I run react-native start and the react-native run-android, the app gets installed on the device but then this error props up which was not happening before.
Loading dependency graph, done.
DELTA [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)/home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285
if (cb) cb.apply(this, arguments)
^
TypeError: cb.apply is not a function
at /home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285:20
at FSReqCallback.oncomplete (fs.js:169:5)
I even cloned the repo from from scratch, but still the error persists. Please help out.
RN version: 0.59.2
My package.json file for one project,
{
"name": "projectalpha",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.11.0",
"axios": "^0.18.0",
"react": "16.8.3",
"react-native": "0.59.2",
"react-native-awesome-alerts": "^1.2.0",
"react-native-circle-checkbox": "^0.1.6",
"react-native-circular-progress": "^1.1.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-image-picker": "^0.28.1",
"react-native-maps": "react-native-community/react-native-maps#master",
"react-native-maps-directions": "^1.6.0",
"react-native-onesignal": "^3.2.12",
"react-native-reanimated": "^1.0.0-alpha.12",
"react-native-svg": "^9.4.0",
"react-native-svg-charts": "^5.2.0",
"react-native-swiper": "^1.5.14",
"react-native-tab-view": "^2.0.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.6.0",
"unstated": "^2.1.1"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.5.0",
"eslint": "^5.15.3",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
Ciao, this problem is connected to graceful-fs package. Plase, reinstall graceful-fs:
npm install graceful-fs --save-dev
And problem should be solved.
For me, npm cache clean —force was not working, and graceful-fs is not direct dependency in my project.
OS: Ubuntu
Node: 14.6.0
Npm: 6.14.7
I am still not sure why this error exits, but it works. I found this solution on Flavio Copes's post.
open file /node_modules/graceful-fs/polyfills.js, where the error comes from.
Here’s the function that gives the problem:
function statFix (orig) {
if (!orig) return orig
// Older versions of Node erroneously returned signed integers for
// uid + gid.
return function (target, cb) {
return orig.call(fs, target, function (er, stats) {
if (!stats) return cb.apply(this, arguments)
if (stats.uid < 0) stats.uid += 0x100000000
if (stats.gid < 0) stats.gid += 0x100000000
if (cb) cb.apply(this, arguments)
})
}
}
comment out these lines (line 62-64):
// fs.stat = statFix(fs.stat)
// fs.fstat = statFix(fs.fstat)
// fs.lstat = statFix(fs.lstat)
I've run into this problem while trying to start a react-native development server on one of my old projects - (React Native version 0.59.x). For me, the fix was downgrading the node version from 14 to 10 using nvm
Go to C:\Users(your username)\AppData\Roaming
Delete npm and npm-cache
Try running again if it gives the error again uninstall and delete Nodejs completely, check that those two files above are still nonexistent and then redownload Nodejs.
On one of my computers the first way worked no problems the second one needed to have Nodejs completely replaced and then worked.
here is the solution for it.
Option 1:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
You should be good now if not do option 2.
Option 2:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
Make sure everything to do with Nodejs is deleted and uninstalled.
Reinstall Nodejs.
You should be good now
I had to use node 12.3.1 and npm 6.9.0 to fix this error
nvm use 12.3.1
This installed both. npm install working again.

Google Cloud Function: Dependency not found

I am developing a project on Nuxt that I am deploying as a Google Cloud Function. (I Chose this as I am using a Cloud Firestore for my data storage)
It all works very nicely so far (Except the cold start time is persistently high - about 6 seconds but I think that is a separate matter). However, I keep getting this WARN in the logs on my Cloud Function:
textPayload: " WARN The dependency eslint not found. Please run yarn add eslint --dev or npm install eslint --save-dev"
There is nothing in the error to suggest where it is requiring eslint or why. This does not happen when I run my code or deploy locally.
My package.json looks like this:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "nuxt start",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "10"
},
"dependencies": {
"#nuxtjs/axios": "^5.9.7",
"#nuxtjs/eslint-config": "^2.0.0",
"#nuxtjs/eslint-module": "^1.1.0",
"#nuxtjs/vuetify": "^1.10.3",
"cookieparser": "^0.1.0",
"firebase": "^7.13.2",
"firebase-admin": "^8.6.0",
"firebase-functions": "^3.3.0",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"nuxt": "^2.12.2",
"nuxt-client-init-module": "^0.1.8",
"nuxt-start": "^2.11.0",
"vuetify": "^1.0.0",
"selectiveSSR": "file:./local-modules/selective-ssr",
"shortid": "^2.2.15",
"sortablejs": "^1.10.2",
"vue-moment": "^4.1.0",
"vue-uuid": "^1.1.1",
"vuex-persistedstate": "^3.0.1"
},
"devDependencies": {},
"private": true
}
The Warning suggests it is looking for a dev-dependency. Surely I don't need these in my package.json? (Even if I add it in I still see the warning). There are references to the eslint package in my package-lock.json (which makes sense as I guess the nuxtjs/eslint packages in my package.json need it) but:
The link to the gzipped eslint NPM in package-lock.json works OK when I access it in my browser
Should Google not be using its Package Cache anyway to speed up the cold start? Is the issue that the specific version of eslint package-lock.json refers to is not available in Google's local package cache?
And yes I have tried adding eslint to my dependencies and devDependencies and it makes no difference.

Custom Webpack wrapper library not installing dependencies

I wrote a wrapper library for internal use of webpack with all the needed loaders and config stuff pre-done so I only have to install the wrapper library to every project and add the entry configuration.
So far that worked but for my newest, freshly cloned project it doesn't.
I tried deleting the node_modules folder and the package-lock.json file and do a clean npm i but it's still the same.
webpack-cli is installed, but has webpack as peer-dependency and it says it isn't installed. When I add it to the projects' package.json it works, but then trying to npm run build results in several errors that it couldn't find any of the loaders that should have been installed with the library.
project package.json
"scripts": {
"build": "webpack --progress --colors --hide-modules",
"dev": "npm run build --",
"watch": "npm run dev -- --watch",
"prod": "NODE_ENV=production npm run build"
},
"devDependencies": {
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
},
library package.json
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"image-webpack-loader": "^4.4.0",
"lodash": "^4.17.11",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"eslint": "^5.8.0",
"standard": "^12.0.1"
}
I deleted the
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
line from the projects' package.json file and did a
npm i -D git+ssh://git#internal:js/lib.git
and now it installed all the libraries' dependencies.
Before that I just ran npm i from the newly cloned project with the existing lines in the package.json. I don't understand why that would make a difference, but it seems it did!
//EDIT:
Another thing that worked:
git reset --hard
rm package-lock.json
rm -rf node_modules # deleting already installed modules from the previous tries
npm i
So from a fresh git clone-perspective it's just deleting the lock-file and then installing again. But without a pre-existing node_modules folder.

NPM auto-install gulp components

I'm setting up gulp to do tasks to my JS files in a legacy .NET WebForms project. I have installed NPM, which I then used to install Gulp, and I can successfully run gulp which executes my gulpfile.js. Now I have dependencies to install using npm, like gulp-concat, gulp-uglify, etc. I don't want every developer who opens the solution to have to type "npm install xlibrary" for every dependency. Is there a way to have npm install a list of dependencies, perhaps through a config file (I think VS 2015 does it this way)?
Create package.json file containing
{
"name": "my-web-app",
"description": "Hello world app",
"version": "1.0.0",
"private": true,
"dependencies": {
"bower": "^1.4.1",
"del": "^1.2.0",
"gulp": "^3.9.0",
"gulp-add-src": "^0.2.0",
"gulp-concat": "^2.6.0",
"gulp-csso": "^1.0.0",
"gulp-filter": "^2.0.2",
"gulp-main-bower-files": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^1.0.5",
"gulp-sourcemaps": "^1.5.2",
"gulp-typescript": "^2.7.8",
"gulp-uglify": "^1.2.0"
}
}
In that file you write out all the dependancies, so then developer just types "npm install" and npm gets all needed packages.