Create-react-app: Error [BABEL] Cannot find module 'js-levenshtein' build in react-scripts 3.4.1

Created on 9 Apr 2020  ·  4Comments  ·  Source: facebook/create-react-app

Describe the bug

When the build is generated in the bitbucket pipeline, it fails searching. Some BABEL dependencies.

Did you try recovering your dependencies?

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@devexpress/dx-react-core": "^1.11.0",
    "@devexpress/dx-react-grid": "^1.11.0",
    "@devexpress/dx-react-grid-material-ui": "^1.11.0",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@fortawesome/fontawesome-pro": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/pro-light-svg-icons": "^5.12.0",
    "@fortawesome/pro-regular-svg-icons": "^5.12.1",
    "@fortawesome/pro-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/lab": "^3.0.0-alpha.30",
    "@material-ui/styles": "^4.4.1",
    "axios": "^0.19.2",
    "babel-jest": "24.9.0",
    "bootstrap": "^3.4.1",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.8.0",
    "cron-builder": "^0.3.0",
    "cron-parser": "^2.13.0",
    "date-fns": "^2.11.0",
    "fast-deep-equal": "^3.1.1",
    "font-awesome": "^4.7.0",
    "formik": "^2.1.4",
    "formik-material-fields": "^0.0.6",
    "formik-material-ui": "^2.0.0-beta.1",
    "history": "^4.10.1",
    "hoist-non-react-statics": "^3.3.2",
    "javascript-terminal": "^1.0.3",
    "jquery": "^3.4.1",
    "material-ui-pickers": "^2.2.4",
    "node-sass": "^4.13.1",
    "paho-mqtt": "^1.1.0",
    "prop-types": "^15.7.2",
    "query-string": "^6.11.1",
    "react": "^16.9.0",
    "react-bootstrap": "^0.32.4",
    "react-chartjs-2": "^2.7.6",
    "react-copy-to-clipboard": "^5.0.2",
    "react-dom": "^16.9.0",
    "react-iframe": "^1.8.0",
    "react-json-view": "^1.19.1",
    "react-list": "^0.8.13",
    "react-loadable": "^5.5.0",
    "react-rangeslider": "^2.2.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "react-select": "^3.0.8",
    "react-sidebar": "^3.0.2",
    "react-slider": "^0.11.2",
    "react-terminal-component": "^1.4.1",
    "react-virtualized": "^9.21.2",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-debounced": "^0.5.0",
    "redux-orm": "^0.16.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "seamless-immutable": "^7.1.4",
    "swagger-client": "^3.10.0",
    "uuid": "^3.3.3",
    "uuidv4": "^6.0.6",
    "velocity": "^0.7.2",
    "velocity-animate": "^1.5.2",
    "yup": "^0.28.3"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --verbose --env=jsdom --coverage",
    "test:ci": "react-app-rewired test --verbose --coverage --reporters=default --reporters=jest-junit",
    "eject": "react-app-rewired eject",
    "lint": "eslint --ext .js --ext .jsx ."
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js}",
      "!<rootDir>/node_modules/",
      "!<rootDir>/test/"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },
  "jest-junit": {
    "outputDirectory": "./test-reports/"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/polyfill": "^7.8.7",
    "circular-dependency-plugin": "^5.2.0",
    "core-js": "^3.6.4",
    "customize-cra": "^0.2.14",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "eslint": "^6.6.0",
    "eslint-plugin-react": "^7.13.0",
    "jest-enzyme": "^7.1.2",
    "jest-junit": "^10.0.0",
    "jest-localstorage-mock": "^2.4.0",
    "micro": "^9.3.4",
    "moxios": "^0.4.0",
    "react-app-rewired": "^2.1.5",
    "react-test-renderer": "^16.9.0",
    "redux-mock-store": "^1.5.4"
  }
}

Which terms did you search for in User Guide?

Error building BABEL in react-script

Environment

yarn install --frozen-lockfile

Steps to reproduce

  1. yarn install --frozen-lockfile
  2. yarn lint
  3. CI=true yarn build

Expected behavior

react-app-rewired build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  1.69 MB (-16 B)     build/static/js/13.b463107c.chunk.js
  127.56 KB (-4 B)    build/static/js/main.9f176c2b.chunk.js
  121.98 KB (-405 B)  build/static/js/14.54a09d57.chunk.js
  98.59 KB            build/static/js/1.fc11a43a.chunk.js
  83.39 KB (-4 B)     build/static/js/0.91111ea5.chunk.js
  66.88 KB (+54 B)    build/static/js/dashboard.7d1a5294.chunk.js
  38.19 KB (+7 B)     build/static/css/main.59e63fbd.chunk.css
  19.23 KB            build/static/css/13.8840a5de.chunk.css
  5.52 KB (-2 B)      build/static/js/user.11e767d6.chunk.js
  1.79 KB (+1 B)      build/static/js/users.ab3bf51f.chunk.js
  1.69 KB (-1 B)      build/static/js/runtime-main.aebe7311.js
  1.66 KB (-1 B)      build/static/js/login.b777fc38.chunk.js
  1.62 KB (+1 B)      build/static/js/signUp.2d455453.chunk.js
  1.44 KB (-1 B)      build/static/js/create_site.cef78d2e.chunk.js
  1.02 KB             build/static/js/select_site.206cc594.chunk.js
  1013 B              build/static/css/dashboard.7dbf11cf.chunk.css
  587 B (+1 B)        build/static/js/not-found.b5dc6704.chunk.js
  473 B               build/static/js/home.7b1003ac.chunk.js
  385 B               build/static/css/14.71916e70.chunk.css

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Actual behavior

Screen Shot 2020-04-08 at 5 47 55 PM

Reproducible demo

+ CI=true yarn build
yarn run v1.12.3
$ react-app-rewired build
Creating an optimized production build...
Failed to compile.
./src/index.js
Error: [BABEL] /opt/atlassian/pipelines/agent/build/src/index.js: Cannot find module 'js-levenshtein' (While processing: "/opt/atlassian/pipelines/agent/build/node_modules/babel-preset-react-app/index.js")
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
bug report needs triage
Source
picture apipemc
👍19

Most helpful comment

For anyone else hitting this issue, the root cause is @babel/preset-env swapped their levenshtein distance package from js-levenshtein to levenary in 7.8.0 https://github.com/babel/babel/commit/30f3b07ebf48ca116216f425849dd862cc2174ec#diff-cf817afef443d0d96acf65275e0edf13.

react-scripts has a dependency on that package like this react-scripts ->babel-preset-react-app -> @babel/preset-env`, so it's likely you have an old version of preset-env, but yarn pruned the js-levenshtein dependency.

In my case I had @babel/[email protected] installed at node_modules/babel-preset-react-app/node_modules/@babel/preset-env. I'm not sure how this was still their given that version wasn't in my yarn.lock, but reinstalling the dependency fixed the issue 🤷‍♂️ .

rm -r node_modules/babel-preset-react-app
yarn install --force
picture kirbycool on 21 Apr 2020
👍5

All 4 comments

Thanks @apipemc, I am seeing this issue also on a project. For what it's worth, it is intermittent for us; clearing node_modules and/or yarn cache clean has worked for us several times to clear the error.

rmckeel picture rmckeel on 9 Apr 2020
👍4

Thanks, these steps are not controllable.
Because this happens in the Bitbucket CI environment and I can't do these every time I do a release.
Every time it is created it goes through the pipeline yarn install --frozen-lockfile is being used to generate and reinstall the node_modules and ignore the cache for enviroment.

apipemc picture apipemc on 10 Apr 2020

@apipemc Good point on --frozen-lockfile for Yarn v1. For posterity, the equivalent for yarn v2 is yarn install --immutable (though it's backwards compatible for now), and adding --immutable-cache also seems useful.

rmckeel picture rmckeel on 16 Apr 2020

For anyone else hitting this issue, the root cause is @babel/preset-env swapped their levenshtein distance package from js-levenshtein to levenary in 7.8.0 https://github.com/babel/babel/commit/30f3b07ebf48ca116216f425849dd862cc2174ec#diff-cf817afef443d0d96acf65275e0edf13.

react-scripts has a dependency on that package like this react-scripts ->babel-preset-react-app -> @babel/preset-env`, so it's likely you have an old version of preset-env, but yarn pruned the js-levenshtein dependency.

In my case I had @babel/[email protected] installed at node_modules/babel-preset-react-app/node_modules/@babel/preset-env. I'm not sure how this was still their given that version wasn't in my yarn.lock, but reinstalling the dependency fixed the issue 🤷‍♂️ .

rm -r node_modules/babel-preset-react-app
yarn install --force
kirbycool picture kirbycool on 21 Apr 2020
👍5
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fson picture fson  ·  3Comments
xgqfrms-GitHub picture xgqfrms-GitHub  ·  3Comments
fson picture fson  ·  3Comments
barcher picture barcher  ·  3Comments
dualcnhq picture dualcnhq  ·  3Comments