Web3.js: Babel webpack require

Created on 11 Oct 2017 · 7Comments · Source: ChainSafe/web3.js

I'm getting the following error just trying to require web3 version 1.0.0-beta.23:
const Web3 = require('web3');

This issue seems related to issue #923, the weird thing is that i can require it and compile it without problem on another project that does not use webpack.

Im using Webpack and babel-loader on a Node application.
My package.json:

{
  "name": "blockchain-worker",
  "version": "1.0.0",
  "description": "Microsercvice that makes transactions on the ethereum blockchain",
  "main": "src/index.js",
  "scripts": {
    "start": "node ./build/main.bundle.js",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/nodemon -i build --watch . --exec 'npm run build && NODE_ENV=test ./node_modules/.bin/mocha build/test.bundle.js || true'"
  },
  "author": "crytalchain",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "expect": "^21.2.1",
    "mocha": "^4.0.1",
    "nodemon": "^1.12.1",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "amqplib": "^0.5.1",
    "truffle-contract": "^3.0.0",
    "web3": "^1.0.0-beta.23"
  }
}

my webpack config:

const path = require('path');
const webpack = require('webpack');
const glob = require('glob');

module.exports = {
  target: 'node',
  entry: {
    main: './src/main.js',
    test: glob.sync('./test/**/*.test.js'),
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      },
    ],
  },
  stats: {
    colors: true,
  },
  devtool: 'source-map',
};

Does anyone know why i'm not able to require it with webpack but vanilla node has no problem?

Here is the error message:

WARNING in ./node_modules/any-promise/register.js
24:14-37 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/websocket/lib/BufferUtil.js
Module not found: Error: Can't resolve '../build/Release/bufferutil' in '/home/koolkat/Projects/blockchain_worker/node_modules/websocket/lib'
 @ ./node_modules/websocket/lib/BufferUtil.js 9:19-57
 @ ./node_modules/websocket/lib/WebSocketFrame.js
 @ ./node_modules/websocket/lib/WebSocketConnection.js
 @ ./node_modules/websocket/lib/WebSocketClient.js
 @ ./node_modules/websocket/lib/W3CWebSocket.js
 @ ./node_modules/websocket/lib/websocket.js
 @ ./node_modules/websocket/index.js
 @ ./node_modules/web3-providers-ws/src/index.js
 @ ./node_modules/web3-core-requestmanager/src/index.js
 @ ./node_modules/web3-core/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/blockchain/utilxxx.js
 @ ./src/blockchain/index.js
 @ ./test/integration/contract.test.js
 @ multi ./test/integration/contract.test.js ./test/integration/main.test.js

WARNING in ./node_modules/websocket/lib/Validation.js
Module not found: Error: Can't resolve '../build/Release/validation' in '/home/koolkat/Projects/blockchain_worker/node_modules/websocket/lib'
 @ ./node_modules/websocket/lib/Validation.js 9:21-59
 @ ./node_modules/websocket/lib/WebSocketConnection.js
 @ ./node_modules/websocket/lib/WebSocketClient.js
 @ ./node_modules/websocket/lib/W3CWebSocket.js
 @ ./node_modules/websocket/lib/websocket.js
 @ ./node_modules/websocket/index.js
 @ ./node_modules/web3-providers-ws/src/index.js
 @ ./node_modules/web3-core-requestmanager/src/index.js
 @ ./node_modules/web3-core/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/blockchain/utilxxx.js
 @ ./src/blockchain/index.js
 @ ./test/integration/contract.test.js
 @ multi ./test/integration/contract.test.js ./test/integration/main.test.js

WARNING in ./node_modules/websocket/lib/BufferUtil.js
Module not found: Error: Can't resolve '../build/default/bufferutil' in '/home/koolkat/Projects/blockchain_worker/node_modules/websocket/lib'
 @ ./node_modules/websocket/lib/BufferUtil.js 11:19-57
 @ ./node_modules/websocket/lib/WebSocketFrame.js
 @ ./node_modules/websocket/lib/WebSocketConnection.js
 @ ./node_modules/websocket/lib/WebSocketClient.js
 @ ./node_modules/websocket/lib/W3CWebSocket.js
 @ ./node_modules/websocket/lib/websocket.js
 @ ./node_modules/websocket/index.js
 @ ./node_modules/web3-providers-ws/src/index.js
 @ ./node_modules/web3-core-requestmanager/src/index.js
 @ ./node_modules/web3-core/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/blockchain/utilxxx.js
 @ ./src/blockchain/index.js
 @ ./test/integration/contract.test.js
 @ multi ./test/integration/contract.test.js ./test/integration/main.test.js

WARNING in ./node_modules/websocket/lib/Validation.js
Module not found: Error: Can't resolve '../build/default/validation' in '/home/koolkat/Projects/blockchain_worker/node_modules/websocket/lib'
 @ ./node_modules/websocket/lib/Validation.js 11:21-59
 @ ./node_modules/websocket/lib/WebSocketConnection.js
 @ ./node_modules/websocket/lib/WebSocketClient.js
 @ ./node_modules/websocket/lib/W3CWebSocket.js
 @ ./node_modules/websocket/lib/websocket.js
 @ ./node_modules/websocket/index.js
 @ ./node_modules/web3-providers-ws/src/index.js
 @ ./node_modules/web3-core-requestmanager/src/index.js
 @ ./node_modules/web3-core/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/blockchain/utilxxx.js
 @ ./src/blockchain/index.js
 @ ./test/integration/contract.test.js
 @ multi ./test/integration/contract.test.js ./test/integration/main.test.js

ERROR in ./node_modules/scrypt/index.js
Module not found: Error: Can't resolve './build/Release/scrypt' in '/home/koolkat/Projects/blockchain_worker/node_modules/scrypt'
 @ ./node_modules/scrypt/index.js 3:19-52
 @ ./node_modules/scrypt.js/node.js
 @ ./node_modules/web3-eth-accounts/src/index.js
 @ ./node_modules/web3-eth/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/blockchain/utilxxx.js
 @ ./src/blockchain/index.js
 @ ./test/integration/contract.test.js
 @ multi ./test/integration/contract.test.js ./test/integration/main.test.js

ERROR in ./node_modules/swarm-js/node_modules/got/index.js
Module not found: Error: Can't resolve 'electron' in '/home/koolkat/Projects/blockchain_worker/node_modules/swarm-js/node_modules/got'
 @ ./node_modules/swarm-js/node_modules/got/index.js 45:20-39
 @ ./node_modules/swarm-js/lib/files.js
 @ ./node_modules/swarm-js/lib/api-node.js
 @ ./node_modules/web3-bzz/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/blockchain/utilxxx.js
 @ ./src/blockchain/index.js
 @ ./test/integration/contract.test.js
 @ multi ./test/integration/contract.test.js ./test/integration/main.test.js

Source

adolfo-flores

Most helpful comment

I managed to solve it. It was an error on my side. My path to exclude _node_modules_ from my use of _babel-loader_ in my webpack config was set incorrectly and hence, _Webpack_ was attempting to transpile everything in _node_modules_. So if still relevant @adibas03, your issue might be solved by explicitly telling _Webpack_ to exclude _node_modules_ for _babel-loader_:

{
    test: /\.jsx?$/,
    use: 'babel-loader',
    exclude: path.resolve(__dirname, 'node_modules')
}

michaeldzjap on 21 Feb 2018

👍5

All 7 comments

I am not sure if the same issue,
but i am getting a 'plugin not found' error

Using:
React tool box
and
[email protected]

The error disappears, if i do not require web3.

ERROR in ./~/ethjs-unit/lib/index.js Module build failed: ReferenceError: Unknown plugin "transform-es3-property-literals" specified in "C:\\Users\\Matt\\Desktop\\New folder\\oeae\\node_modules\\ethjs-unit\\package.json" at 19, attempted to resolve relative to "C:\\Users\\Matt\\Desktop\\New folder\\oeae\\node_modules\\ethjs-unit" at C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17 at Array.map (native) at Function.normalisePlugins (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) at OptionManager.mergeOptions (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) at OptionManager.init (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\file\index.js:212:65) at new File (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\file\index.js:135:24) at Pipeline.transform (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at transpile (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-loader\lib\index.js:46:20) at Object.module.exports (C:\Users\Matt\Desktop\New folder\oeae\node_modules\babel-loader\lib\index.js:163:20) @ ./~/web3-utils/src/index.js 25:16-37 @ ./~/web3/src/index.js @ ./src/frontend/component/App.js @ ./src/frontend/index.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/frontend/index.js

adibas03 on 24 Nov 2017

My temporary solution:

resolve: {
...
    alias: {
        'scrypt.js': path.resolve(__dirname, '../node_modules/scrypt.js/js.js'),
        'swarm-js': path.resolve(__dirname, '../node_modules/swarm-js/lib/api-browser.js'),
        'fs': path.resolve(__dirname, '../src/app/fs-fake.js'),
    }
...
}

fs-fake.js is an empty export file:

export default {}

vanhoavn on 2 Jan 2018

I'm using React, Babel and Webpack and I get 3 web3 (sub packages) related errors

ERROR in ./node_modules/eth-lib/lib/hash.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory ".../node_modules/eth-lib"
    at .../node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (.../node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (.../node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (.../node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (.../node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (.../node_modules/babel-loader/lib/index.js:175:20)
 @ ./node_modules/web3-utils/src/utils.js 29:11-38
 @ ./node_modules/web3-utils/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/js/components/App.js
 @ ./src/js/containers/AppContainer.js
 @ ./src/js/app.js

ERROR in ./node_modules/swarm-js/lib/api-browser.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory ".../node_modules/swarm-js"
    at .../node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (.../node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (.../node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (.../node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (.../node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (.../node_modules/babel-loader/lib/index.js:175:20)
 @ ./node_modules/web3-bzz/src/index.js 26:12-31
 @ ./node_modules/web3/src/index.js
 @ ./src/js/components/App.js
 @ ./src/js/containers/AppContainer.js
 @ ./src/js/app.js

ERROR in ./node_modules/ethjs-unit/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-es3-member-expression-literals" specified in ".../node_modules/ethjs-unit/package.json" at 18, attempted to resolve relative to ".../node_modules/ethjs-unit"
    at .../node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (.../node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (.../node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (.../node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (.../node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (.../node_modules/babel-loader/lib/index.js:175:20)
 @ ./node_modules/web3-utils/src/index.js 27:16-37
 @ ./node_modules/web3/src/index.js
 @ ./src/js/components/App.js
 @ ./src/js/containers/AppContainer.js
 @ ./src/js/app.js

I do have an .babelrc which is of the form

{
    "presets": ["env", "stage-0", "react"],
    "env": {
        "production": {
            "plugins": [
                "transform-react-remove-prop-types"
            ]
        }
    }
}

not sure if that might be interfering somehow... If I comment out the web3 import everything works as expected. Any advice would be greatly appreciated.

michaeldzjap on 21 Feb 2018

{
    test: /\.jsx?$/,
    use: 'babel-loader',
    exclude: path.resolve(__dirname, 'node_modules')
}

michaeldzjap on 21 Feb 2018

👍5

thanks @michaeldzjap
Already reverted to [email protected] ,
but will take note of this for future use.

adibas03 on 21 Feb 2018

@adolfo-flores I think I figured this out!

Here's the webpack config that seems to be working for me:

module.exports = {
  ...
  externals: ["fs", "bindings", "any-promise"],
  resolve: {
    alias: {
      // replace native `scrypt` module with pure js `js-scrypt`
      "scrypt": "js-scrypt",

      // fix websocket require path
      "websocket": path.resolve(__dirname, "../")
    }
  },
  plugins: [
    // ignore these plugins completely
    new IgnorePlugin(/^(?:electron|ws)$/)
  ]
};

CruzMolina on 11 Dec 2018

You are likely only including ".js" files or ".jsx" files.

This library is looking for a .node library so you probably have to add it to your extensions.

And you'll have to add the node-loader

yarn add -D node-loader

module: {
    rules: [
      {
        test: /\.node$/,
        use: "node-loader"
      }
    ]
  }

brianfoody on 4 Feb 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

web3.eth.Contract is not a constructor at HTMLDocument

praveengupta0895 · 3Comments

Possible incorrect parsing of receipt status

gabmontes · 3Comments

web3.shh.clearSubscriptions throws TypeError and fails

dhl · 3Comments

UnhandledPromiseRejectionWarning: Error: invalid json request [1.0.0-beta.47]

imthatcarlos · 3Comments

How to determine if an Ethereum address exists

TinyWJL · 3Comments