The problem I am running into is either my lack of understanding in how webpack works or something wrong with my setup.
I have as simple project where I am using npm module webdriver in src/contentScript.js as below(it is just one line for now):
const driver = require("WebDriver");
and this is my package.json says:
{
"name": "foo-chrome-extension",
"private": true,
"scripts": {
"watch": "webpack --mode=development --watch --config config/webpack.config.js",
"build": "webpack --mode=production --config config/webpack.config.js"
},
"devDependencies": {
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^4.3.0",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^0.10.1",
"size-plugin": "^2.0.2",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"webdriver": "^7.16.13"
}
}
and when I run the command npm run build
it shows below errors (there are more but I trimmed to keep the post short);
ERROR in ./node_modules/cacheable-lookup/source/index.js Module not
found: Error: Can’t resolve ‘dns’ in
‘/Users/john/workspace/chrome-extension-cli/foo-chrome-extension/node_modules/cacheable-lookup/source’ERROR in
./node_modules/@wdio/config/build/lib/FileSystemPathService.js Module
not found: Error: Can’t resolve ‘fs’ in
‘/Users/john/workspace/chrome-extension-cli/foo-chrome-extension/node_modules/@wdio/config/build/lib’ERROR in ./node_modules/@wdio/logger/build/node.js Module not found:
Error: Can’t resolve ‘fs’ in
‘/Users/john/workspace/chrome-extension-cli/foo-chrome-extension/node_modules/@wdio/logger/build’
If my understanding of how webpack works is correct, it should install these dependencies required by webdriver module but it is not and showing these errors. Why is that? Anything wrong with my webpack setup?
This is my config/webpack.config.js says:
'use strict';
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const PATHS = require('./paths');
// Merge webpack configuration files
const config = (env, argv) => merge(common, {
entry: {
popup: PATHS.src + '/popup.js',
contentScript: PATHS.src + '/contentScript.js',
background: PATHS.src + '/background.js',
},
devtool: argv.mode === 'production' ? false : 'source-map'
});
module.exports = config;
config/webpack.common.js: It is too big, so created pastebin
node version: v16.13.1