Error: [BABEL] /opt/build/repo/src/index.tsx: Cannot find module '@babel/helper-call-delegate'

Support
,
1

I am aware that the other thread here, exists - however there seemed to be a resolution there that does not apply to my use case. In my example,

  • the app uses Typescript,
  • uses yarn to install (unlike npm in the other thread),
  • and uses GitHub to create deployments.

Problem:

Pretty much every time a deploy preview is created for the app, it fails to build. If I go onto the UI, go to “Retry deploy” and choose “clear cache and deploy site” then it works, with no other changes/action. It’s rather frustrating to have deploy previews fail just to have to go in manually and clear cache and redeploy.

App name:

cytera-app

Error Log:

yarn run v1.17.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/index.tsx
Error: [BABEL] /opt/build/repo/src/index.tsx: Cannot find module '@babel/helper-call-delegate'
Require stack:
- /opt/build/repo/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-parameters/lib/params.js
- /opt/build/repo/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-parameters/lib/index.js
- /opt/build/repo/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/available-plugins.js
- /opt/build/repo/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/plugins-compat-data.js
- /opt/build/repo/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/normalize-options.js
- /opt/build/repo/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
- /opt/build/repo/node_modules/babel-preset-react-app/create.js
- /opt/build/repo/node_modules/babel-preset-react-app/index.js
- /opt/build/repo/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
- /opt/build/repo/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
- /opt/build/repo/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
- /opt/build/repo/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
- /opt/build/repo/node_modules/loader-runner/lib/loadLoader.js
- /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js
- /opt/build/repo/node_modules/webpack/lib/NormalModule.js
- /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js
- /opt/build/repo/node_modules/webpack/lib/Compiler.js
- /opt/build/repo/node_modules/webpack/lib/webpack.js
- /opt/build/repo/node_modules/react-scripts/scripts/build.js (While processing: "/opt/build/repo/node_modules/babel-preset-react-app/index.js")
error Command failed with exit code 1.

Package.json (since it was requested in the other thread)

{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
    "build": "yarn build:web && npx cap copy",
    "build:web": "react-scripts build",
    "dev": "yarn start",
    "doc": "doctoc README.md",
    "eject": "react-scripts eject",
    "generate": "node bin/generate_assets.js",
    "postinstall": "yarn run requirements-check",
    "lint": "eslint './src/**/*.{ts,tsx}'",
    "lint-staged": "lint-staged",
    "pretty-staged": "pretty-quick --staged",
    "production": "react-scripts build && serve -s build",
    "requirements-check": "node scripts/check_node_version.js",
    "sort-package-json": "sort-package-json",
    "start": "react-scripts start",
    "test": "DISABLE_LOGS=true react-scripts test"
},
"husky": {
    "hooks": {
        "pre-commit": "npm-run-all sort-package-json pretty-staged lint-staged"
    }
},
"lint-staged": {
    "*.{ts,tsx}": "yarn run lint"
},
"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
],
"prettier": "@hackscience/prettier-config",
"dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@capacitor/cli": "^1.5.1",
    "@capacitor/core": "1.5.1",
    "@capacitor/ios": "^1.0.0-beta.19",
    "@ionic/react": "^5.1.1",
    "@material-ui/core": "^4.5.2",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/styles": "^4.5.2",
    "@types/debug": "^4.1.5",
    "@types/jest": "25.2.3",
    "@types/node": "14.0.9",
    "@types/react": "16.9.35",
    "@types/react-dom": "16.9.8",
    "@types/react-router": "^5.1.7",
    "@types/react-router-dom": "^5.1.2",
    "@types/webpack-env": "^1.13.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "debug": "^4.1.1",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "node-sass": "^4.13.0",
    "react": "^16.8.4",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.8.4",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.1.0",
    "react-scripts": "3.4.1",
    "semver": "^7.3.2",
    "typescript": "3.9.3"
},
"devDependencies": {
    "@hackscience/prettier-config": "^1.0.2",
    "@ionic/cli": "^6.10.0",
    "@types/react-test-renderer": "^16.9.2",
    "@typescript-eslint/eslint-plugin": "^3.1.0",
    "@typescript-eslint/parser": "^3.1.0",
    "doctoc": "^1.4.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "^4.2.5",
    "imagemagick": "^0.1.3",
    "jest-localstorage-mock": "^2.4.2",
    "lint-staged": "^10.2.8",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.5",
    "pretty-quick": "^2.0.0",
    "react-test-renderer": "^16.13.1",
    "sort-package-json": "^1.22.1"
},
"engines": {
    "node": ">=12.18.0"
},
"engineStrict": true
}
2

hiya @nebbles and sorry to be slow to get back to you! Have you worked through our build debugging guide yet?

I’d specifically check around making sure that we use the same versions of things to build as you do.

Sounds like you are a thorough individual and so you probably did that already, so I’ll also include my next thought so you don’t wait for another response.

Could you tell us some more about your build pipeline and command? Specifically: do you ever run yarn or npm install yourself, during build? This sounds like some dependencies are being installed by your build, but not cached, and then expected to be present, which might happen if we aren’t the ones installing them - we install somewhat specially, using our own cache dir:

3

Thanks for your response.

For reference I define the build commands in the netlify.toml:

[build]
 
  publish = "build/"

  command = "yarn build:web"

As you can see from the package.json I just use the CRA build script. I haven’t ejected, so I am still using the CRA configuration as is. ("react-scripts": "3.4.1"). When building for web locally (as production) I use the same command as Netlify.

Another thing is that I think that this caching issue only happens on Deploy Previews. I have a master branch which represents production, and a develop branch which is set up with Branch Deployments and a quick check of the deploy logs shows me that those two work ok for rebuilding and succeeding on git push.

Checking out the versions we use…

  • Node 12.18.0 (we use .nvmrc)
  • Yarn 1.22.4

But then again unsure why this might be specific to Deploy Previews created by PRs…master and develop branch seem unaffected… :thinking:

4

Hmm, quite odd. Branch deploys and PR’s will start with master’s cache, so in case state isn’t synced perfectly (different package.json or yarn.lock in the PR missing a dependency, different node version, etc), then the first build you try with cleared cache succeeding could make sense. Wouldn’t explain future builds failing similarly though, and I’d guess it should look about the same on a PR as on a branch build, which do seem to work repeatably for you to judge from your deploy listing.

I guess you can start doing some debugging like adding an npm ls && or yarn list && to the front of your build command, to show what is installed. I suggest this since it feels a bit like something is not installing its dependencies in the usual way, and I’m not sure of a better way to try to guess what that might be (except maybe running locally: GitHub - netlify/build-image: This is the build image used for running automated builds).

Hope that points you towards a solution!