Hi this is my first npm package (it is a React component library) that Ive published and I realized that while it works perfectly fine when used with Webpack v4.x, the issue is that anyone who uses Webpack v5.x or uses npx create-react-app command to create a React app and tries to use my npm package will encounter a bunch of errors due to Webpack v5.x no longer including polyfills.
Thus the person will have to install a number of npm packages and then configure their Webpack.config.js file to include a number of fallbacks.
For example, the person will get 15-20 error messages when they try to use my npm package such as cannot resolve crypto or cannot resolve http, etc. This is due to one of the dependencies for my npm package being the npm package ‘ws’.
Is there anything I can do on my end when publishing my npm package so that these additional steps for users of my npm package is not necessary and they won’t have to install a bunch of npm packages and then edit their Webpack.config.js file just to able to use my npm package?
Related
Browsing stack overflow, I noticed that a common fix is make sure that dotenv is in dependencies and not just devDependencies. Here's a screenshot of the log and the package.json. You'll notice that dotenv is indeed in my dependencies. I also deleted and reinstalled node_modules multiple times but still no luck.
I am requiring the dotenv at the top of my server file as shown here
I fixed the issue. I decided to try uninstalling dotenv and reinstalling, this worked. Apparently, this was different from deleting node modules and npm install.
I see dotenv is added to a devDependency: devDependency are special and are only installed when you do a npm install on the package.json which contains them. Usually, you'll add your development tooling (like test runners, etc.) in devDependencies since they are not required for the application to run.
When we run an application in production, we install dependencies using npm install --production which only installs the dependencies mentioned in the dependencies section of package.json. This is also what Heroku does for you (check their buildpack for Node.js!)
To install a devDependency, you would do: npm i -D <package name>; and to install a production dependency (like your web framework like express), you'd do npm i -S express.
Try running npm i -D dotenv and check if it works (it may also work if you just do a npm i dotenv.
I installed webpack into my react project, but the same error occurred every time when I use npm start:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.42.0"
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:\react\minimoj\node_modules\webpack (version: 4.43.0)
I tried to remove package-loc.json file + all node_modules + remove webpack name from package.json and reinstall it with npm install. Also I tried same with yarn, but it didn't help. I see that in node_modules version is 4.43 and after I use npm install webpack in the file package-loc.json it shows 4.43, but at the moment when I use npm start it changed to 4.42 and error occur. In addition I also reinstall node.js but it didn't help.
create .env file and add SKIP_PREFLIGHT_CHECK=true
I had similar with a newer webpack version being installed than what react_scripts required.
To fix I deleted webpack and webpack-dev-server from my project's node_modules, went to a console outside of the project dir and ran
npm uninstall webpack
npm uninstall webpack-dev-server
Then ran
npm install
npm run build
And all was well, as my package.json was correct without change.
Since webpack is mostly focused on common js according to some websites, I just tried rollup for my react project and it proved to be much more effective as it supports es+. I would highly recommend it. I took a couple minutes to have everything setup and ready. Also, as a good practice it is better to use yarn as npm has had a lot of known issues for node app management.
Related SO question: npm - package.json override main field (I tried to do something like this using the webpack.mix.js but it didn't work).
I have a Laravel 5.5 application with npm v5.6.0 and node v9.4.0 (I'm thinking that this maybe is an npm/node version issue, but I don't have an environment to test with older versions ATM). Everything is working fine and I'm working this app for a while now and I've installed some node modules and used bootstrap.js and app.js to require/import npm modules, but it seems there is a problem with the bootstrap-treeview; I've spent more than 2 hours to try and make webpack compile with this module with no luck; I always get that error after npm run dev:
ERROR Failed to compile with 1 errors
This dependency was not found:
bootstrap-treeview in ./resources/assets/js/bootstrap.js
I tried to use both require and import inside bootstrap.js and I have even tried an other available module webpack-bootstrap-treeview which it seems that it doesn't have bower dependency:
//import "~/node_modules/bootstrap-treeview";
//require("bootstrap-treeview");
//import "bootstrap-treeview";
//import "~/node_modules/webpack-bootstrap-treeview";
//require("webpack-bootstrap-treeview");
import "webpack-bootstrap-treeview";
bootstrap-treeview: https://www.npmjs.com/package/bootstrap-treeview
webpack-bootstrap-treeview: https://www.npmjs.com/package/webpack-bootstrap-treeview
I know I can just use laravel-mix to compile the js files directly to the app.js and I will probably do, but I want to have my modules organized and I'd like to find the culprit on this issue.
EDIT
I've also tried to delete the node_modules directory then npm install and even npm cache clear, nothing worked for the webpack to compile without that error.
Looks like there are some misnamed files. Renaming the bootstrap-treeview files in node_modules\bootstrap-treeview-2\dist to bootstrap-treeview-2 allows webpack to successfully complete. Oh, and I installed the bootstrap-treeview-2 package because bootstrap-treeview has been archived.
I have an issue with a project where we are using node and brunch. The issue is current specific to brunch, but could occur for any module would be my guess.
The easiest way to currently reproduce this, is to do the following in a new folder:
npm init
npm install --save-dev brunch
The issue here is that brunch depends on loggy, which in turn depends on ansi-color, which no longer has an entry in the npmregistry:
https://registry.npmjs.org/ansi-color
I think this might be the github project: https://github.com/loopj/commonjs-ansi-color
In any case, I am unable to proceed, and all our builds fail because they are not able to fetch the given dependency.
I could perhaps use npm shrinkwrap in some way, but that depends on the modules already existing in node_modules, which I am currently missing.
So how can I force npm to use ansi-color from a different location, or ignore the dependency?
Not sure about npm 2 but you can fix this with beta npm 3. npm 3 has flat node_modules directory. So sub modules can sit in the top level. Read the Changelog.
The missing modules can be installed directly from their Github repo as a toplevel dependency in your project. If npm finds the module with the same version in node_modules directory, it won't look for it anymore in the registry.
Install npm 3:
npm install -g npm#3-latest
Then install depencies:
//install missing module from other location
npm install https://github.com/loopj/commonjs-ansi-color.git --save-dev
npm install --save-dev brunch
It looks like ansi-color is back on the npm registry ("https://registry.npmjs.org/ansi-color" is back online)
I've noticed that yo angular generates a GruntFile containing all of the instructions, but typically does not include grunt.loadNpmTasks('<package>') statements, which may or may not be indicative of globally installed packages (?).
So, what is the correct way to add additional NPM packages to a yo-angular generated project?
the yo angular generator uses load-grunt-tasks, which prevents the gruntfile from becoming to bloated:
This module will read the
dependencies/devDependencies/peerDependencies in your package.json and
load grunt tasks that match the provided patterns.
the generator uses load-grunt-tasks without a pattern provided
require('load-grunt-tasks')(grunt);
which means that it will simply try to load everything (with the pattern grunt-*, for more info see comments below) you install via npm.
long story short, just npm install it (grunt tasks should be installed with the --save-dev option, to automatically move it to the devDependencies)
$ npm install your-grunt-task --save-dev