Develop Reference

vertx module not found when using webpack

When using webpack and libraries that want to use when.js (when), it is possible that the following error is thrown when compiling:
[2] ERROR in ./node_modules/when/lib/env.js 32:14-35
[2] Module not found: Error: Can't resolve 'vertx' in 'path-to-project/node_modules/when/lib'
The issue seems to be isolated to webpack, and is documented on when's github. Running npm install vertx or npm install #vertx/core will not resolve the issue either, since the problem lays in the import of vertx in the when library.

To resolve the issue:
Install #vertx/core (npm i #vertx/core)
Edit the file ./node_modules/when/lib/env.js, and change line 32 from
var vertx = vertxRequire('vertx');
to
var vertx = vertxRequire('#vertx/core');
This will reference the #vertx/core package instead of the vertx package, which does not seem to be able to be found when using webpack and npm. I haven't experienced any issues with just using vertx/core. You might also need to update your gitignore to include the changes to the library if others are also working on your project.

The issue can indeed be solved by adding the #vertex/core package, but instead of editing the ./node_modules/when/lib/env.js file manually as recommended by #Todd Rylaarsdam, I'd use the NormalModuleReplacementPlugin in your Webpack config to replace the old vertx package, like so:
new webpack.NormalModuleReplacementPlugin(
/^vertx/,
'#vertx/core',
)
This way you don't have to make any manual changes to the files of a package you're using.
See https://webpack.js.org/plugins/normal-module-replacement-plugin/ for more info about this plugin.

NextJS cannot read jsx-loader

I'm trying to set up new Next.js application. When i install all packages (using npx create-next-app or installing with myself like npm i -s next react react-dom) and when i start app, i always see this error:
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I read that what they wrote before and i tried to install jsx-loader and tried to set up it in webpack.config.js but it doesn't work at all. I already tried to set up project 5 times and i always get this error. Can you help me?
Thanks :)

Error after converting create-react-app to Gatsby. WEBPACK: Browser queries must be an array or string. Got object

I am converting my create-react-app to Gatsby. To do this, I took my existing project and did npm install gatsby, installed gatsby-cli, and then copied over the changes in project structure from a fresh Gatsby site. Then, I moved my App.js into src/pages/index.js. I ended up deleting the gatsby-config.js I copied from a site created by gatsby new because I didn't know how to install the gatsby-plugin-react-helmet plugin. I don't know if the plugins specified by gatsby-config.js are required to make the site work.
This project implements a circular progress bar using react-circular-progressbar. When attempting to build my app using gatsby build, I get this error:
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.26. Perhaps this is the source of the error below.
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Browser queries must be an array or string. Got object.
File: node_modules/react-circular-progressbar/dist/styles.css
I updated PostCSS to 7.0.26 using npm i postcss but it still says I'm on the old version.
You can see this error if you checkout this link.
I'm not sure what a browser query is, but I checked the styles.css file referenced in the error and the only things I am seeing are class styles and then this browser specific style:
-webkit-transition: stroke-dashoffset 0.5s ease 0s; Deleting this line doesn't fix the issue.

gatsby-config.js is one of the essential Gatsby configuration files. Any debugging without addings this file back is bound to be hopeless.
Copy the empty gatsby-config.js from the official documentation and add the PostCSS plugin as described in the documentation. Rerun npm or yarn. Run gatsby clean and then gatsby develop.
The error is most likely caused by a missing source or configuration files that a POSTCSS plugin should provide and solve easily.
Does your site work now?

d3js/Angular 8 application issue

I am trying to construct a tube-map with the help of d3js and Angular. I am using Angular 8 and d3 version 3.4.13. On doing npm start I'm getting a series of errors. Any leads on figuring out why that may be happening would be of great help.
Here is a link to the repository:
https://github.com/reshnaz/Tubemap.git
I'm getting the below errors:
ERROR in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/xmlhttprequest/lib'
ERROR in ./node_modules/jsdom/lib/jsdom/browser/index.js
Module not found: Error: Can't resolve 'cssstyle' in
'/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/browser'
ERROR in ./node_modules/jsdom/lib/jsdom/level2/style.js
Module not found: Error: Can't resolve 'cssstyle' in
'/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/level2'
ERROR in ./node_modules/jsdom/lib/jsdom.js
Module not found: Error: Can't resolve 'fs' in
'/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib'
ERROR in ./node_modules/jsdom/lib/jsdom/level2/html.js
Module not found: Error: Can't resolve 'fs' in
'/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/level2'
ERROR in ./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'fs' in
'/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/xmlhttprequest/lib'
ERROR in ./node_modules/jsdom/lib/jsdom.js
Module not found: Error: Can't resolve 'request' in
'/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib'

I cannot believe the problem is caused by anything other than the old version of d3 you are using.
The errors you are seeing about missing modules are likely to be because you ran npm install and this generated a load of errors which you either failed to notice or deliberately ignored, and tried to proceed anyway as if nothing was wrong. Or maybe npm install ran fine but your node_modules folder contains a load of cruft left over from the React.js project? What happens if you delete your node_modules folder and try running npm install again?
How the original React.js app you mention worked I can't say, especially since you don't provide a link to the GitHub source code you mention. Perhaps it used an older version of React, which in turn required other older dependencies. Deciding to use the latest version of Angular is somewhat at odds with deciding to use such an old version of d3 in the same project.
The only suggestion I have (if it isn't already obvious) is to bite the bullet and upgrade your project to the latest version of d3. Yes, you will have to change the way your code calls to d3, as d3 has changed somewhat between version 3 and version 5. But that's just too bad.

Deleting node_modules and package-lock.json, followed by npm cache clean and npm install solved the problem.

html-webpack-plugin doesn't generate index.html

I am trying out html-webpack-plugin for Webpack by following their documentation. But it seems to be not generating the required html file. I have created a small bare-bone project to reproduce the error. github project to highlight the error I would appreciate if someone can point out my error. Use the following script to see the result in the project directory:
npm install
node_modules/.bin/webpack