Create-react-app: Problem with `bcrypt` possibly due to Webpack

Created on 28 Sep 2016  Â·  2Comments  Â·  Source: facebook/create-react-app

Description

App stops working after installing bcrypt.

Actual behavior

What I did:

  1. create-react-app Test
  2. cd Test
  3. npm install bcrypt
  4. Open src/App.js and put import bcrypt from 'bcrypt' in the header.
  5. npm start

    In Terminal

Compiled with warnings.

Warning in ./src/App.js

/Users/React/Test/src/App.js
  5:8  warning  'bcrypt' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)


Warning in ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
 @ ./~/bindings/bindings.js 76:22-40 76:43-53

Warning in ./~/bindings/README.md
Module parse failed: /Users/React/Test/node_modules/bindings/README.md Unexpected token (2:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:3)
 @ ./~/bindings ^\.\/.*$

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

In the browser console

Uncaught TypeError: exists is not a function
webpackHotDevClient.js:180 ./src/App.js

/Users/React/Test/src/App.js
  5:8  warning  'bcrypt' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

webpackHotDevClient.js:180 ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
 @ ./~/bindings/bindings.js 76:22-40 76:43-53
webpackHotDevClient.js:180 ./~/bindings/README.md
Module parse failed: /Users/React/Test/node_modules/bindings/README.md Unexpected token (2:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:3)
    at Parser.pp$4.raise (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOp (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1656:43)
    at Parser.pp$3.parseExprOp (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1658:21)
    at Parser.pp$3.parseExprOps (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1639:17)
    at Parser.pp$3.parseMaybeConditional (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/lib/Parser.js:902:15)
 @ ./~/bindings ^\.\/.*$
Navigated to http://localhost:3000/
bindings.js:153 Uncaught TypeError: exists is not a functiongetRoot @ bindings.js:153bindings @ bindings.js:55(anonymous function) @ bcrypt.js:3(anonymous function) @ bcrypt.js:175(anonymous function) @ bundle.js:2965__webpack_require__ @ bundle.js:556fn @ bundle.js:87(anonymous function) @ App.js:20(anonymous function) @ bundle.js:2911__webpack_require__ @ bundle.js:556fn @ bundle.js:87(anonymous function) @ index.js:13(anonymous function) @ bundle.js:1363__webpack_require__ @ bundle.js:556fn @ bundle.js:87(anonymous function) @ multi_main:3(anonymous function) @ bundle.js:589__webpack_require__ @ bundle.js:556(anonymous function) @ bundle.js:579(anonymous function) @ bundle.js:582
webpackHotDevClient.js:180 ./src/App.js

/Users/React/Test/src/App.js
  5:8  warning  'bcrypt' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

webpackHotDevClient.js:180 ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
 @ ./~/bindings/bindings.js 76:22-40 76:43-53
webpackHotDevClient.js:180 ./~/bindings/README.md
Module parse failed: /Users/React/Test/node_modules/bindings/README.md Unexpected token (2:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:3)
    at Parser.pp$4.raise (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOp (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1656:43)
    at Parser.pp$3.parseExprOp (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1658:21)
    at Parser.pp$3.parseExprOps (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1639:17)
    at Parser.pp$3.parseMaybeConditional (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/React/Test/node_modules/react-scripts/node_modules/webpack/lib/Parser.js:902:15)
 @ ./~/bindings ^\.\/.*$

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected): 
[email protected] /Users/React/Test
└── [email protected]
  1. node -v: v6.2.2
  2. npm -v: 3.9.5

Then, specify:

  1. Operating system: macOS
  2. Browser and version: Chrome 53
picture ivosabev
👍1

Most helpful comment

This package is written in C:

https://github.com/ncb000gt/node.bcrypt.js/tree/master/src

There is no possible way it could work in a browser. It uses node-gyp for bindings which wouldn’t work with Webpack since browser can’t possible run native binaries.

You might want to try an alternative that is written in plain JS and uses browser APIs. Here is a package that claims to be: https://www.npmjs.com/package/bcryptjs

picture gaearon on 28 Sep 2016
👍4

All 2 comments

This package is written in C:

https://github.com/ncb000gt/node.bcrypt.js/tree/master/src

There is no possible way it could work in a browser. It uses node-gyp for bindings which wouldn’t work with Webpack since browser can’t possible run native binaries.

You might want to try an alternative that is written in plain JS and uses browser APIs. Here is a package that claims to be: https://www.npmjs.com/package/bcryptjs

gaearon picture gaearon on 28 Sep 2016
👍4

@gaearon Is there any way to use node-gyp bindings if we are using this in an Electron app, do you know?

We're trying to use odbc module in an Electron app that uses create-react-app and running into the same issue.

Thanks!

joshuapinter picture joshuapinter on 27 May 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wereHamster picture wereHamster  Â·  3Comments
onelson picture onelson  Â·  3Comments
DaveLindberg picture DaveLindberg  Â·  3Comments
Evan-GK picture Evan-GK  Â·  3Comments
dualcnhq picture dualcnhq  Â·  3Comments