Unable to bundle or start metro server on metro-react-native-babel-transformer@0.65

Do you want to request a feature or report a bug? Report a 🐛

What is the current behavior? Ever since updating to metro-react-native-babel-transformer@0.65, we’ve been unable to start our metro server or perform a react-native bundle.

Failed to construct transformer:  /Users/chris/workspace/jobber-mobile/node_modules/metro-react-native-babel-transformer/node_modules/metro-source-map/src/Consumer/DelegatingConsumer.js:27
  static GENERATED_ORDER = GENERATED_ORDER;
                         ^

SyntaxError: Unexpected token =
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/chris/workspace/jobber-mobile/node_modules/metro-react-native-babel-transformer/node_modules/metro-source-map/src/Consumer/index.js:12:28)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
error Cannot read property 'transformFile' of undefined. Run CLI with --verbose flag for more details.
TypeError: Cannot read property 'transformFile' of undefined
    at /Users/chris/workspace/jobber-mobile/node_modules/metro/src/Bundler.js:87:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/chris/workspace/jobber-mobile/node_modules/metro/src/Bundler.js:14:24)
    at _next (/Users/chris/workspace/jobber-mobile/node_modules/metro/src/Bundler.js:34:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)

package.json

{
  "dependencies": {
    "@apollo/react-hooks": "^3.1.5",
    "@apollo/react-testing": "^3.1.4",
    "@formatjs/intl-datetimeformat": "^2.0.2",
    "@formatjs/intl-displaynames": "^3.0.2",
    "@formatjs/intl-numberformat": "^5.0.2",
    "@formatjs/intl-pluralrules": "^3.0.2",
    "@formatjs/intl-relativetimeformat": "^7.3.6",
    "@jobber/design": "^0.7.4",
    "@react-native-async-storage/async-storage": "^1.13.1",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-native-community/netinfo": "^5.9.7",
    "@react-native-picker/picker": "^1.9.7",
    "@react-navigation/bottom-tabs": "^5.10.4",
    "@react-navigation/native": "^5.8.4",
    "@react-navigation/stack": "^5.12.1",
    "@testing-library/react-native": "^7.0.2",
    "@types/base-64": "^0.1.3",
    "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",
    "apollo-link-rest": "^0.7.3",
    "awesome-debounce-promise": "^2.1.0",
    "base-64": "^0.1.0",
    "camelcase": "^6.0.0",
    "date-fns": "^2.14.0",
    "date-fns-tz": "^1.0.10",
    "deepmerge": "^4.2.2",
    "fast-deep-equal": "^3.1.3",
    "graphql": "^15.0.0",
    "graphql-anywhere": "^4.2.7",
    "graphql-tag": "^2.10.3",
    "identity-obj-proxy": "^3.0.0",
    "qs": "^6.9.4",
    "react": "16.13.1",
    "react-content-loader": "^5.1.0",
    "react-hook-form": "^6.13.1",
    "react-intl": "^4.7.5",
    "react-native": "0.63.3",
    "react-native-config": "^1.4.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-image-picker": "^2.3.4",
    "react-native-keychain": "^6.0.0",
    "react-native-modalize": "^2.0.6",
    "react-native-permissions": "^2.2.2",
    "react-native-picker-select": "^8.0.4",
    "react-native-portalize": "^1.0.7",
    "react-native-reanimated": "^1.13.0",
    "react-native-redash": "^14.1.1",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.4.0",
    "react-native-svg": "^12.1.0",
    "react-native-uuid": "^1.4.9",
    "react-native-version-number": "^0.3.6",
    "react-native-webview": "^10.10.0",
    "react-router-native": "^5.1.2",
    "rollbar-react-native": "^0.7.2",
    "snake-case": "^3.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/runtime": "^7.10.4",
    "@graphql-codegen/add": "^2.0.2",
    "@graphql-codegen/cli": "1.20.0",
    "@graphql-codegen/fragment-matcher": "^2.0.1",
    "@graphql-codegen/typescript": "1.20.0",
    "@graphql-codegen/typescript-operations": "1.17.13",
    "@jobber/eslint-config": "^0.5.1-pre.35",
    "@jobber/stylelint-config": "^0.2.0",
    "@react-native-community/eslint-config": "^1.0.0",
    "@testing-library/react-hooks": "^3.2.1",
    "@types/jest": "^26.0.15",
    "@types/react-native": "^0.63.27",
    "@types/react-native-uuid": "^1.4.0",
    "@types/react-test-renderer": "16.9.2",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "babel-jest": "^26.6.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-react-intl": "^7.5.28",
    "babel-plugin-react-native-platform-specific-extensions": "^1.1.1",
    "copy": "^0.3.2",
    "docz": "^2.3.1",
    "docz-core": "^2.3.0",
    "eslint": "^6.5.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-formatjs": "^2.3.18",
    "eslint-plugin-jest": "^24.1.0",
    "husky": "^4.2.5",
    "inquirer": "^7.3.3",
    "jest": "^26.6.0",
    "jest-junit": "^12.0.0",
    "jest-when": "^2.7.2",
    "lint-staged": "^10.1.6",
    "metro-config": "^0.59.0",
    "metro-react-native-babel-preset": "^0.63.0",
    "metro-react-native-babel-transformer": "latest",
    "mock-apollo-client": "^0.4.0",
    "plop": "^2.7.0",
    "postcss": "^7.0.27",
    "postcss-calc": "^7.0.2",
    "postcss-css-variables": "^0.17.0",
    "postcss-custom-properties": "^9.1.1",
    "postcss-import": "^12.0.1",
    "postcss-plugin": "^1.0.0",
    "prettier": "^2.0.2",
    "react-art": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native-postcss-transformer": "^1.2.4",
    "react-native-svg-web": "^1.0.7",
    "react-native-web": "^0.12.2",
    "react-test-renderer": "^16.14.0",
    "stylelint": "^13.6.1",
    "ts-node": "^9.1.1",
    "ts-xor": "^1.0.8",
    "typescript": "^3.8.3"
  },
}

I do note that we’re a bit behind on some metro related packages, and I tried to upgrade them as well, the issue seems to persist. After performing a npm i metro-react-native-babel-transformer@latest, I get a different error:

error Unexpected token =. Run CLI with --verbose flag for more details.
/Users/chris/workspace/jobber-mobile/node_modules/metro-config/node_modules/metro-cache/src/stores/HttpStore.js:31
  static HttpError = HttpError;
                   ^

SyntaxError: Unexpected token =
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/chris/workspace/jobber-mobile/node_modules/metro-config/node_modules/metro-cache/src/stores/HttpGetStore.js:12:19)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
.env file not found. Please run npm run env:<dev/prod>

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

npm start

or

npx react-native bundle \
  --platform ios \
  --entry-file index.js \
  --dev false \
  --bundle-output ios/main.jsbundle \
  --assets-dest ios \
  --sourcemap-output sourcemap.ios.js \
  --sourcemap-sources-root ./

What is the expected behavior? 😎 and ✅

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

• Big Sur
• Node v10.22.1
• npm 6.14.6

[Shangyunliang]

change terminal default node version. -> nvm alias default v12.22.1.

[tophernuts]

Hey @MichaReiser

Thanks for the quick reply! Everything does build correctly once when I try with Node 12, thanks so much!!