metro: 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 16
change terminal default node version. -> nvm alias default v12.22.1.
Hey @MichaReiser
Thanks for the quick reply! Everything does build correctly once when I try with Node 12, thanks so much!!