Encountering the error "Module 'aws-sdk', 'child_process', 'net' cannot be resolved" within the /node_modules/watchpack directory when using Webpack

I'm encountering issues while trying to compile my prod webpack file, specifically receiving 5-10 errors related to "cannot resolve module" aws-sdk and child_process.

All of these errors seem to point back to the same path: "ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/"

For instance:

ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js Module not found: Error: Cannot resolve 'file' or 'directory' ../package

ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/~/node-pre-gyp/lib/info.js Module not found: Error: Cannot resolve module 'aws-sdk'

ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/~/node-pre-gyp/lib/publish.js Module not found: Error: Cannot resolve module 'aws-sdk'

ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/~/node-pre-gyp/lib/testbinary.js Module not found: Error: Cannot resolve module 'child_process'

ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/~/forever-agent/index.js Module not found: Error: Cannot resolve module 'net'

These are the dependencies listed in my package.json file:

"devDependencies": {

"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"node-sass": "^3.9.0",
"react": "^15.3.2",
"sass-loader": "^4.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-bundle-tracker": "0.0.93",
"webpack-dev-server": "^1.15.1"

}, "dependencies": {

"chart.js": "^1.1.1",
"jquery": "^2.2.0",
"material-ui": "^0.15.4",
"react-addons-css-transition-group": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-chartjs": "^0.8.0",
"react-dom": "^15.3.0",
"react-hot-loader": "^3.0.0-beta.3",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
"react-sortable-hoc": "0.0.8",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.6.0"

}

Answer №1

Dealing with a similar issue, it appears that attempting to implement a server module on the client side is the cause of the problem. To overcome this, include the following code in your webpack configuration for the client:

node: {
  fs: "empty",
  child_process : "empty",
  net : "empty",
}

Answer №2

While facing challenges with bundling the server, I encountered a similar issue. Despite excluding node_modules from babel-loader, webpack still bundled them.

To address this problem, follow these steps:

  • Include target: 'node' in your webpack.config.js if you haven't already. This will ensure that native node modules (such as path, fs, etc.) are excluded from the bundle.
  • Utilize webpack-node-externals to specifically exclude node_modules.

Here's an example of how to implement this solution:

    import nodeExternals from 'webpack-node-externals';
    ...
    const browserConfig = { ... };
    ...
    const serverConfig = {
        ...
        target: 'node',
        externals: [nodeExternals()],
        ...
    };
    export default [ browserConfig, serverConfig ];

Answer №3

It appears that you may have overlooked the --config option. Please make sure to include it in your command like so:

webpack --config webpack.config.js

Answer №4

Dealing with the same frustration, I found a simple solution by including --config in my command.

webpack --config webpack.config.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Triggering the JavaScript KeyUp() event for input values consisting of multiple digits

I'm currently working on a JavaScript project that involves displaying numbers from 1 to N based on user input. I am utilizing the keyup() event for this functionality. When the input field is cleared, it correctly displays nothing thanks to the empty ...

Is there a way to dynamically adjust the form action based on whether or not JavaScript is enabled?

Is there a way to make a form default to calling a JavaScript ajax function for output, but switch to a PHP page if the user doesn't have JavaScript enabled? <form class="form-inline" role="form" action="javascript:search();"> <div class=" ...

Reduce the size of your Javascript files to the earliest possible version

Any suggestions for converting minimized JavaScript to earlier versions? Are there any tools or websites available for this task? Thank you in advance for any hints. ...

Having trouble rendering arrays and objects in Node, Express, and Jade?

//What is currently being passed to the Jade template exports.displayList = function(req, res){ res.render('report', {title: 'Custom Reports', rpts:[{uri:'/reports/allocation', title:'Allocation Report' ...

Wait for the completion of a Promise inside a for-loop in Javascript before returning the response

After completing a Promise within a for-loop, I am attempting to formulate a response. Although I have reviewed these questions, my scenario remains unaddressed. The methodGetOrders and methodGetLines are components of an external library that must be ut ...

Guide on activating javascript code for form validation using php

How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...

Having trouble with the Material-UI v1 Drawer component on the iOS 13 beta version

As we prepare for the upcoming iOS release, set to debut next month, it has come to our attention that the main navigation on our website is experiencing issues when accessed using an iOS device running the latest beta (iOS13). While the drawer opens as ex ...

"npm is the go-to tool for managing client-side JavaScript code

As I delved into a document outlining the npm Developer Guide, a question sprang to mind. Is it within the realm of possibility to construct a web client application using javascript/css/html with npm at the helm? And if so, might there be examples avail ...

Travis CI is encountering a failure while running the 'gatsby build' command, specifically due to error #98123 related to WEB

I've been working on deploying my portfolio website using AWS S3, CloudFront, CodePipeline, and Travis CI. Most things are running smoothly, but I'm encountering consistent build failures with Travis CI. When I run gatsby build, I receive an err ...

Populate an HTML table with the days of the month and corresponding dates retrieved from a PostgreSQL database using JavaScript

I'm struggling to figure out how to use generate_series to populate an HTML table where the 'key' of <tr> corresponds to the days of the selected month and year using an <input type='month'>. So far, with the help I re ...

Laravel and Vue: tackling pagination issues in a Vue.js and Laravel application

I'm struggling with getting Laravel pagination to function properly. Although I attempt to access results from different pages, I find that I can only retrieve the first page. Even when I click on page 2, upon checking the request payload, it always i ...

Is there a way to calculate the height of a component that is only rendered conditionally?

I have a scenario where I need to dynamically adjust the height of a component that is conditionally rendered without explicitly setting it. The height should automatically match the size of its content. To achieve this, I am using a reference to determin ...

The speed of NPM on Mac (Maverick) is disappointingly sluggish

Why does NPM take more than 10 minutes to install small packages like underscore? Node version: 0.12.7 NPM version: 2.11.3 Operating System: MacOS (Mavericks) 10.9.5 Despite extensive research on Google, no solution has been found. Internet speed: 10M ...

Guide to dynamically add data to two columns

I have a challenge with organizing multiple inputs into rows with two columns each, ensuring that each input is appended to the appropriate side (50% for each column unless there's an odd number of inputs). Currently, the inputs are being added to se ...

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

Instructions for transferring an email attachment to a collaborative drive stored in a Google Sheets document

At the moment, I am utilizing a Google script that runs periodically on my Gmail account to retrieve all attachments labeled according to certain criteria. The issue arises when trying to access attachments within a folder located on a shared drive using t ...

What could be causing this JavaScript if statement to consistently evaluate to true?

I'm facing an issue where I want to run a specific block of code when a div is clicked for the first time, and then another block when it's clicked for the second time. The problem is that even though my alert shows the variable being updated wit ...

PostMan gives me an error when I attempt to send an image file to NodeJS using multer (req.file is undefined)

After encountering issues with saving image files to the server using multer-s3, I attempted to use multer and s3Client instead. Unfortunately, I faced similar challenges as req.file or req.files from the multer-s3 middleware continued to return undefined. ...

What is the process for removing a package that was installed with npm link?

After using the command sudo npm link to install a node package in its directory, how can I properly uninstall the package once my development work is complete? By running npm link, the package gets installed as a symbolic link in the system's global ...

What is the best way to retrieve the nearest or preceding object regardless of the document's layout using jQuery?

Here are some examples to illustrate the concept: <ul> <li id="o1" class="elem">apple</li> <li id="o2" class="elem">banana</li> <li id="o3" class="elem">orange</li> </ul> **$('#o2').exact ...