Node built-in module functions are getting undefined under vue-cli

[fabiooliveira1]

Version

3.5.1

Reproduction link

https://github.com/FabioOliveira1/minimal

Environment info

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
  Binaries:
    Node: 10.15.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 65.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.5.1 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.5.1 
    @vue/cli-plugin-babel: ^3.2.0 => 3.5.1 
    @vue/cli-plugin-eslint: ^3.2.0 => 3.5.1 
    @vue/cli-service: ^3.2.0 => 3.5.1 
    @vue/cli-shared-utils:  3.5.1 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/server-test-utils: ^1.0.0-beta.28 => 1.0.0-beta.29 
    @vue/test-utils: ^1.0.0-beta.28 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0-0 => 5.2.2 
    vue: ^2.5.22 => 2.6.9 
    vue-cli-plugin-vuetify: ^0.4.6 => 0.4.6 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-sweetalert2: ^1.5.9 => 1.6.4 
    vue-template-compiler: ^2.5.22 => 2.6.9 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: ^1.3.0 => 1.5.6 
    vuetify-loader: ^1.0.5 => 1.2.1 
    vuex: ^3.0.1 => 3.1.0 
    vuex-persistedstate: ^2.5.4 => 2.5.4 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

npm i

npm run serve

-- Open in browser

-- Open inspector, there will be the logs of crypto as object and the scryptSync as undefined

What is expected?

scryptSync as a function, since it's a built in node module

What is actually happening?

scryptSync is undefined

---

I am not sure if this is caused by vue cli or by one of its dependencies, but at my searching I found something related here

[LinusBorg]

Since you can't use native node modules in the browser, those will always be undefined.

What behaviour did you expect?

[fabiooliveira1]

I can use crypto, except for some properties (e.g. scrypt, scryptSync). In the minimal project showed the crypto object. Now I even used other functions from it and pushed to the example repo.

What behaviour did you expect?

I expected to have all properties/functions present at crypto

[LinusBorg]

Scrypt is written in native code (C++), not JavaScript. It can not run in the browser. Webpack cannot bundle it with your JavaScript, and a browser can't run it.

[fabiooliveira1]

My bad, thank you

[imsnif]

Webpack can be provided with polyfills: https://webpack.js.org/configuration/node/

The specific case of scrypt is a little complicated though. There's a browserify shim that might need some adjustment: https://github.com/crypto-browserify/scrypt

Hope this helps someone.