Electron webpack issue with selenium-webdriver [bazel-genfiles]

For my electron app project (used boilerplate), I want to execute a few selenium node commands using selenium-webdriver and chromedriver.

The problem is, when I added the module selenium-webdriver, suddenly my app is throwing error and warning in terminal and console.

Terminal warning:

WARNING in ./node_modules/selenium-webdriver/lib/http.js 49:11-26
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/selenium-webdriver/http/index.js
 @ ./node_modules/selenium-webdriver/index.js
 @ ./src/components/playback.js
 @ ./src/components/App.js
 @ ./src/index.js

WARNING in ./node_modules/selenium-webdriver/lib/http.js
Module not found: Error: Can't resolve '../../../../bazel-genfiles' in
'<MY_LOCAL_DIR>/electron-react-webpack-boilerplate/node_modules/selenium-webdriver/lib'
 @ ./node_modules/selenium-webdriver/lib/http.js
 @ ./node_modules/selenium-webdriver/http/index.js
 @ ./node_modules/selenium-webdriver/index.js
 @ ./src/components/playback.js
 @ ./src/components/App.js
 @ ./src/index.js

Application Error:

Error: Cannot find module 'undefined'
    at webpackMissingModule (http.js:53)
    at requireAtom (http.js:53)
    at Object../node_modules/selenium-webdriver/lib/http.js (http.js:35)
    at __webpack_require__ (bootstrap:685)
    at fn (bootstrap:59)
    at Object../node_modules/selenium-webdriver/http/index.js (index.js:29)
    at __webpack_require__ (bootstrap:685)
    at fn (bootstrap:59)
    at Object../node_modules/selenium-webdriver/index.js (index.js:25)
    at __webpack_require__ (bootstrap:685)

Uncaught Error: Failed to import atoms module ./atoms/get-attribute.js. 
If running in dev mode, you need to run
`bazel build //javascript/node/selenium-webdriver/lib/atoms:get-attribute.js`
from the projectroot: Error: Cannot find module './atoms/get-attribute.js'
    at requireAtom (http.js:56)
    at Object../node_modules/selenium-webdriver/lib/http.js (http.js:35)
    at __webpack_require__ (bootstrap:685)
    at fn (bootstrap:59)
    at Object../node_modules/selenium-webdriver/http/index.js (index.js:29)
    at __webpack_require__ (bootstrap:685)
    at fn (bootstrap:59)
    at Object../node_modules/selenium-webdriver/index.js (index.js:25)
    at __webpack_require__ (bootstrap:685)
    at fn (bootstrap:59)

The issue is happening because of the webpack only because I am able to execute both the required libraries from the electron-quick-start code

The webpack configuration is as below:

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { spawn } = require('child_process')

const defaultInclude = path.resolve(__dirname, 'src')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
        },
      },
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
        include: defaultInclude
      }
    ]
  },
  target: 'node',
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  devtool: 'cheap-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    stats: {
      colors: true,
      chunks: false,
      children: false
    },
    before() {
      spawn(
        'electron',
        ['.'],
        { shell: true, env: process.env, stdio: 'inherit' }
      )
      .on('close', code => process.exit(0))
      .on('error', spawnError => console.error(spawnError))
    }
  }
}

The issue seems to be related to the Webpack configuration, and the warning messages indicate that there are some critical dependencies that cannot be resolved. You can try adding the following code to the Webpack configuration to resolve the issue:

node: {
  __dirname: true,
  __filename: true,
},

This should fix the critical dependency warnings related to the request of a dependency being an expression.

Regarding the missing module errors, it seems that there are some issues related to the Bazel build system used by Selenium Webdriver. One workaround is to manually build the required modules using the following command:

bazel build /javascript/node/selenium-webdriver/lib/atoms:get-attribute.js

This should create the missing module in the bazel-bin directory, which you can then copy to the appropriate location in the node_modules directory of your project.

Another possible solution is to try using a different version of Selenium Webdriver that does not have these issues. You can check the release notes of different versions to see if they mention any issues related to Bazel or Webpack. You can install a specific version of Selenium Webdriver using npm, like this:

npm install [email protected]

Replace 3.141.0 with the version number you want to use.

Recommended topics

Hot tags