ember/npm addon with dependencies/ devDependencies - node.js

I have created an ember addon which relies on gulp derived packages to build, so in the addon it has the following in package.json.
When the addon is included in the main application, the build fails due to the various gulp modules being missing. The addon is in the devDependencies section of the main application.
The addon also builds into the main application when it is in through npm link. My question is how should the addon dependencies be handled so the main application builds without a local copy of the module?
Update: I think the problem is that the package does a gulp build after the postinstall which elevates the gulp devDependencies into real dependencies. Is this correct?
Addon JSON file
{
"name": "My Addon",
"version": "0.0.0",
"description": "The default blueprint for ember-cli addons.",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember try:each",
"postinstall": "gulp build && bower install"
},
"repository": {
"type": "git",
"url": "git://github.com/myaddon.git"
},
"engines": {
"node": ">= 0.12.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"bootstrap": "^4.0.0-alpha.5",
"broccoli-asset-rev": "^2.4.5",
"broccoli-funnel": "^1.0.9",
"ember-ajax": "^2.4.1",
// more ember modules
"find-root": "^0.1.1",
"font-awesome": "^4.7.0",
"glob": "^4.5.3",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.2.1",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-filter": "^3.0.1",
"gulp-git": "^1.4.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.5.2",
"gulp-task-loader": "^1.2.1",
"gulp-template": "^3.0.0",
"gulp-uglify": "^1.2.0",
"gulp-zip": "^3.0.2",
"lazypipe": "^1.0.1",
"loader.js": "^4.0.10",
"run-sequence": "^1.1.2"
},
"keywords": [
"ember-addon"
],
"dependencies": {
"ember-cli-babel": "^5.1.7"
},
"ember-addon": {
"configPath": "tests/dummy/config"
}
}

The addon's dependencies are needed to build application (that includes addon), should be listed in dependencies section. The devDependencies of a package that is included as dependency of another package, are ignored.
There is other solution to add packages into an application. You can create a blueprint in your addon that will be called every time an application build with it or install it.

Related

Does Firebase Function Does not Support Node 18 as its Engine parameter in Package.json file?

Does firebase function supports node 18 version as its engine parameters in package.json file. I am getting error as " Error: package.json in functions directory has an engines field which is unsupported. Valid choices are: {"node": 10|12|14|16}" when i used Node 18 as engine parameter.
I tried to use node 18 in engine parameter field as
"engines": {
"node": "18"
},
my package.json looks like this:
{
"name": "functions",
"scripts": {
"build": "webpack --mode production",
"watch": "webpack --watch --mode development",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log",
"test": "jest",
"lint": "tslint --project tsconfig.json",
"fmt": "prettier --config '../.prettierrc' --write 'src/**/*.{tsx,ts}'"
},
"engines": {
"node": "18"
},
"main": "dist/index.js",
"dependencies": {
"#bugsnag/js": "^7.10.1",
"#google-cloud/storage": "^5.18.2",
"#google-cloud/tasks": "2.5.0",
"#slack/web-api": "^5.7.0",
"#types/axios": "^0.14.0",
"#types/express": "^4.16.1",
"#types/node": "^13.1.7",
"async-sema": "3.0.1",
"axios": "^0.26.1",
"body-parser": "^1.18.3",
"date-fns": "1.30.1",
"date-fns-timezone": "^0.1.4",
"delay": "4.3.0",
"express": "^4.16.4",
"express-basic-auth": "1.2.0",
"firebase-admin": "^8.13.0",
"firebase-functions": "^3.19.0",
"fp-ts": "^1.18.2",
"freee-firebase-sdk": "^2.0.6",
"freee-logger": "git+https://github.com/freee/freee-logger.git",
"http": "^0.0.0",
"maskdata": "^1.1.6",
"node-cache": "^5.1.0",
"nodemailer": "^6.7.2",
"nodemailer-sendgrid-transport": "0.2.0",
"oauth": "^0.9.15",
"ramda": "^0.26.1",
"simple-oauth2": "^2.2.1",
"url": "0.11.0",
"json-bigint": "^1.0.0",
"lodash": "^4.17.21",
"minimist": "^1.2.6",
"node-forge": "^1.3.0"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#types/jest": "^26.0.0",
"babel-loader": "^8.2.2",
"firebase-functions-test": "^0.1.6",
"jest": "^26.0.0",
"jest-cli": "^26.0.0",
"omega-js": "git+ssh://git#github.com/C-FO/omega-js.git#v1.0.1",
"prettier": "^2.4.1",
"ts-jest": "^26.0.0",
"ts-loader": "^5.4.3",
"tslint": "^5.12.0",
"typescript": "^4.5.4",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^2.5.0"
},
"private": true
}
The documentation at Set Node.js version says:
Firebase SDK for Cloud Functions 2.0.0 and higher allows a selection
of Node.js runtime. You can choose to run all functions in a project
exclusively on the runtime environment corresponding to one of these
supported Node.js versions:
Node.js 18
Node.js 16
Node.js 14
Upgrade your Node.js runtime
To upgrade your Node.js runtime:
Make sure your project is on the Blaze pricing plan.
Make sure you are using Firebase CLI v9.17.0 or later.
Change the engines value in the package.json file that was created in your functions/ directory during initialization. For example, if you are upgrading from version 16 to version 18, the entry should look like this: "engines": {"node": "18"}
Optionally, test your changes using the Firebase Local Emulator Suite.
Redeploy functions using the Firebase CLI v11.18.0 or later.

Next.js error cannot find module 'next/headers'

Faced this issue when I was using login functionality developed by my teammate in a group project and apparently I am the only one facing this issue.
npm version: 8.19.3
node version: 16.17.0
package.json :-
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run prettify && next dev",
"build": "npm run prettify && next build",
"start": "next start",
"lint": "npm run prettify && next lint",
"prettify": "prettier --write \"**/*.{js, jsx}\""
},
"dependencies": {
"#emotion/react": "11.10.4",
"#emotion/server": "11.10.0",
"#emotion/styled": "11.10.4",
"#mui/icons-material": "5.10.6",
"#mui/material": "5.10.6",
"#mui/x-date-pickers": "^5.0.3",
"cryptr": "^6.0.3",
"dayjs": "^1.11.5",
"intl": "^1.2.5",
"mui-file-dropzone": "^4.0.2",
"next": "12.2.5",
"next-auth": "^4.12.0",
"normalize.css": "^8.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-share": "^4.4.1",
"react-toastify": "^9.0.8",
"swr": "^1.3.0",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"eslint": "8.23.1",
"eslint-config-next": "12.3.1",
"eslint-config-prettier": "8.5.0",
"prettier": "2.7.1"
}
}
Error :-
error - Error: Cannot find module 'next/headers'
I have tried deleting the node_modules and .next folders but I am still facing this issue.
That is when you update Nextjs to version 13 with next-auth, which is intended for next#13 users, in your case using version 12 yet, the root cause the error in v4.12.x with next/headers package from next#12, so it could be to support getting the session in React Server Components for example.
Edit package.json, it should fix your issue:
{
"next-auth": "4.15.1"
}

When I try to use Parcel to build a production version of a React app that works fine in development mode, I get "Cannot find module 'sass'"

I've built a simple React/Redux app and am using Parcel for the bundler. It works fine in development mode, that is, using the script
"dev": "parcel ./src/index.html",
but when I tried to do
"build": "parcel build ./src/index.html",
I got the following error
/Users/abc/Documents/Projects/sandbox/smart/src/styles/main.scss: Cannot find module 'sass' from '/Users/abc/Documents/Projects/sandbox/smart/src/styles'
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:97:35
at processDirs (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:244:39)
at isdir (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:251:32)
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:23:69
at FSReqWrap.oncomplete (fs.js:152:21)
This is the first time I've tried to build an app using Parcel and I'm lost. I'm using node-sass to import my sass files directly -- perhaps this has something to do with that.
The referenced file (main.scss) is referenced in App.js like this
import "../../styles/main.scss";
and is the first sass file to be included (App is loaded into the DOM like this in index.js:
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
)
This is running under Node 11.15. My package.json follows -- any hints or help much appreciated!
{
"name": "friender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jest": {
"setupFiles": ["jest-localstorage-mock"]
},
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "jest"
},
"prettier": {
"semi": false
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#types/jest": "^24.0.18",
"babel-eslint": "^10.0.3",
"babel-preset-react": "^7.0.0-beta.3",
"eslint": "^6.2.2",
"eslint-config-prettier": "^6.1.0",
"jest": "^24.9.0",
"jest-localstorage-mock": "^2.4.0",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2"
},
"dependencies": {
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"#fortawesome/fontawesome-svg-core": "^1.2.0-7",
"#fortawesome/free-solid-svg-icons": "^5.11.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bulma": "^0.7.5",
"eslint-plugin-jest": "^22.17.0",
"eslint-plugin-react": "^7.14.3",
"immer": "^4.0.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "16.x",
"react-detect-offline": "^2.4.0",
"react-dom": "^16.9.0",
"react-fontawesome": "^1.6.1",
"react-modal": "^3.10.1",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
}
Try instead per the documentation for SCSS and error Cannot find module 'sass' use module sass instead of node-sass:
npm install -D sass
The documentation mentions being able to use node-sass, but there are several active issues with node-sass. Module sass may help resolve the error and allow you use SCSS in your application.
Hopefully that helps!

Why does NodeJS require me to use the full directory for downloaded modules?

For something like Express for example, which does not come with Node by default. I have to use var express = require('C:/Users/User/node_modules/express'); instead of just var express = require('express');. I notice the modules which come by default such as http aren't in the same location as the ones I install. So what do I need to do in order to not have to write the whole directory. If it makes any difference I keep all my Node projects in C:/Node/, not the default one.
This is happening because you probably don't have node modules installed locally. For that you need a package.json file which you can get by running
npm init
This will ask you some questions about your project and will set up node locally. A package.json file will be created which should look something like this (without dependencies).
{
"name": "express-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "Link to your repository"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^1.0.2",
"body-parser": "^1.17.2",
"chalk": "^2.0.1",
"compression": "^1.7.0",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"express": "^4.15.3",
"glob": "^7.1.2",
"moment": "^2.18.1",
"mongoose": "^4.11.3",
"morgan": "^1.8.2",
"passport": "^0.3.2",
"path": "^0.12.7",
"yargs": "^8.0.2"
}
}
You can then add the node modules you want by putting them in dependencies and running
npm install
If you want to add node modules from commond line you can use
npm install package-name --save

How to resolve gulp dependencies while creating a NPM package

I have a nodeJs application(demo) which using commander package to take command line argument and using gulp for
build
docs
test
coverage
This functionality is working fine but Now I need to move this application as a NPM Package.
Changes are done according to according NPM Package but when I install this as NPM package npm install ../demo/ from local location.
It asks for following gulp dependencies: -
Cannot find module gulp
Cannot find module gulp-load-plugins
Cannot find module del
Cannot find module gulp-plumber
Cannot find module gulp-eslint
Cannot find module babel-eslint
Cannot find module gulp-debug
Cannot find module gulp-sourcemaps
Cannot find module gulp-babel
Every time I go back to the npm package(which i created) directory and run the command which occurs as an error like npm install gulp --save-dev and npm install del --save-dev and so on.
I also defined these dependencies in package.json but it is still throwing errors.
Is there any way to resolve this issue.
package.json
{
"name": "demo",
"version": "0.0.1",
"description": "",
"main": "./dist/index.js",
"license": "SEE LICENSE IN LICENSE.md",
"keywords": [],
"scripts": {
"build": "gulp build",
"coverage": "gulp coverage",
"docs": "gulp docs",
"prepublish": "gulp build",
"test": "gulp test"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-polyfill": "^6.6.1",
"commander": "^2.9.0",
"lodash": "^4.0.0",
"mustache": "^2.2.1",
"source-map-support": "^0.4.0",
"wrench": "^1.5.8",
"ms": "^0.7.1"
"babel-eslint": "^6.0.4",
"babel-plugin-lodash": "^2.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-nodejs-lts": "^1.2.2",
"chai": "^3.5.0",
"del": "^2.2.0",
"esdoc-es7-plugin": "^0.0.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-babel-istanbul": "^1.1.0",
"gulp-debug": "^2.1.2",
"gulp-esdoc": "^0.2.0",
"gulp-eslint": "^2.0.0",
"gulp-filter": "^4.0.0",
"gulp-inject-modules": "^0.1.1",
"gulp-load-plugins": "^1.2.2",
"gulp-mocha": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"btoa": "^1.1.2",
"superagent": "^2.1.0"
},
"engines": {
"node": ">=4.0.0"
}
}
I put all the things in dependencies. I tried that way but having same problem.
npm install ../demo/
npm WARN package.json demo_project#1.0.0 No description
npm WARN package.json demo_project#1.0.0 No repository field.
npm WARN package.json demo_project#1.0.0 No README data
> demo#0.0.1 prepublish /work/demo
> gulp build
[16:53:33] Local gulp not found in ~/work/demo
[16:53:33] Try running: npm install gulp
Although the documentation doesn't mention it, npm install folder only installs dependencies and not devDependencies. This may be a little bit confusing as running npm install inside the package folder installs both dependenciesand devDependencies.
So try to install gulpand all the rest as npm install --save gulp (not
--save-dev)
UPDATE: after adding package.json:
everything under devDependencies in your package.json should be under dependencies:
{
"name": "demo",
"version": "0.0.1",
"description": "",
"main": "./dist/index.js",
"license": "SEE LICENSE IN LICENSE.md",
"keywords": [],
"scripts": {
"build": "gulp build",
"coverage": "gulp coverage",
"docs": "gulp docs",
"prepublish": "gulp build",
"test": "gulp test"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-polyfill": "^6.6.1",
"commander": "^2.9.0",
"lodash": "^4.0.0",
"mustache": "^2.2.1",
"source-map-support": "^0.4.0",
"wrench": "^1.5.8",
"ms": "^0.7.1",
"babel-eslint": "^6.0.4",
"babel-plugin-lodash": "^2.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-nodejs-lts": "^1.2.2",
"chai": "^3.5.0",
"del": "^2.2.0",
"esdoc-es7-plugin": "^0.0.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-babel-istanbul": "^1.1.0",
"gulp-debug": "^2.1.2",
"gulp-esdoc": "^0.2.0",
"gulp-eslint": "^2.0.0",
"gulp-filter": "^4.0.0",
"gulp-inject-modules": "^0.1.1",
"gulp-load-plugins": "^1.2.2",
"gulp-mocha": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"btoa": "^1.1.2",
"superagent": "^2.1.0"
},
"engines": {
"node": ">=4.0.0"
}
}

Resources