Babel webpack require #1105

adolfo-flores · 2017-10-11T14:16:05Z

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

The text was updated successfully, but these errors were encountered:

adibas03 · 2017-11-24T09:04:28Z

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

Using:
React tool box
and
web3.js@1.0.0-beta.26

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

vanhoavn · 2018-01-02T01:20:20Z

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 {}

michaeldzjap · 2018-02-21T07:16:08Z

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 · 2018-02-21T08:07:20Z

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')
}

adibas03 · 2018-02-21T09:19:22Z

thanks @michaeldzjap
Already reverted to web3@0.x.x ,
but will take note of this for future use.

CruzMolina · 2018-12-11T01:33:25Z

@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)$/)
  ]
};

brianfoody · 2019-02-04T08:20:36Z

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"
      }
    ]
  }

This is a known issue: web3/web3.js#1105

mwawrusch · 2021-04-03T16:00:06Z

Same issue still exists today.

nivida closed this as completed Aug 9, 2018

sUndar-Balaji mentioned this issue Oct 20, 2018

web3 does not work with webpack unless I manually install with --unsafe-perm=true #1969

Closed

namesty added a commit to dOrgTech/the-graph-mutations-spec that referenced this issue Dec 11, 2019

Webpack workaround for Web3 bundling

bd236e2

This is a known issue: web3/web3.js#1105

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Babel webpack require #1105

Babel webpack require #1105

adolfo-flores commented Oct 11, 2017 •

edited

adibas03 commented Nov 24, 2017

vanhoavn commented Jan 2, 2018

michaeldzjap commented Feb 21, 2018 •

edited

michaeldzjap commented Feb 21, 2018

adibas03 commented Feb 21, 2018

CruzMolina commented Dec 11, 2018

brianfoody commented Feb 4, 2019 •

edited

mwawrusch commented Apr 3, 2021

Babel webpack require #1105

Babel webpack require #1105

Comments

adolfo-flores commented Oct 11, 2017 • edited

adibas03 commented Nov 24, 2017

vanhoavn commented Jan 2, 2018

michaeldzjap commented Feb 21, 2018 • edited

michaeldzjap commented Feb 21, 2018

adibas03 commented Feb 21, 2018

CruzMolina commented Dec 11, 2018

brianfoody commented Feb 4, 2019 • edited

mwawrusch commented Apr 3, 2021

adolfo-flores commented Oct 11, 2017 •

edited

michaeldzjap commented Feb 21, 2018 •

edited

brianfoody commented Feb 4, 2019 •

edited