[Bug]: babel-register preset-env not applied in node_modules

[serdec]

💻

• Would you like to work on a fix?

How are you using Babel?

@babel/register or @babel/node

Input code

I get the following error when trying to transpile the react-native modules inside the node_modules

SyntaxError: .../node_modules/react-native/index.js: Unexpected token, expected "{" (14:7)

  12 |
  13 | // Components
> 14 | import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
     |        ^
  15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
  16 | import typeof Button from './Libraries/Components/Button';
  17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
    at Parser._raise (.../node_modules/@babel/parser/src/parser/error.js:147:45)
    at Parser.raiseWithData (.../node_modules/@babel/parser/src/parser/error.js:142:17)
    at Parser.raise (.../node_modules/@babel/parser/src/parser/error.js:91:17)
    at Parser.unexpected (../node_modules/@babel/parser/src/parser/util.js:190:16)
    at Parser.expect (.../node_modules/@babel/parser/src/parser/util.js:150:28)
    at Parser.parseNamedImportSpecifiers (.../node_modules/@babel/parser/src/parser/statement.js:2421:10)
    at Parser.parseImport (.../node_modules/@babel/parser/src/parser/statement.js:2226:39)
    at Parser.parseStatementContent (.../node_modules/@babel/parser/src/parser/statement.js:332:25)
    at Parser.parseStatement (...node_modules/@babel/parser/src/parser/statement.js:243:17)
    at Parser.parseBlockOrModuleBlockBody (.../node_modules/@babel/parser/src/parser/statement.js:979:25) {
  loc: Position { line: 14, column: 7 },
  pos: 249,
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'UnexpectedToken'
}

i created the following repo to reproduce the issue

https://github.com/serdec/babel-register-react-native-issue-preset-env

Configuration file name

babel.config.js

Configuration

{
  ignore: [/node_modules\/(?!(react-native))/],
  presets: ['@babel/preset-env'],
}

Current and expected behavior

@babel/register applies the @babel/preset-env correctly to the files inside the package but not on those inside the node_modules

i would expect that the same presets are applied when transpiling node_modules

Environment

System:
OS: macOS 12.0.1
Binaries:
Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v14.15.4/bin/yarn
npm: 8.1.1 - ~/.nvm/versions/node/v14.15.4/bin/npm
npmPackages:
@babel/core: ^7.15.8 => 7.15.8
@babel/plugin-transform-runtime: ^7.15.8 => 7.15.8
@babel/preset-env: ^7.15.8 => 7.15.8
@babel/register: ^7.15.3 => 7.15.3
@babel/runtime: ^7.12.5 => 7.15.4
@babel/runtime-corejs2: ^7.15.4 => 7.15.4
babel-jest: ^26.6.3 => 26.6.3
eslint: 7.14.0 => 7.14.0
jest: ^26.6.3 => 26.6.3
metro-react-native-babel-preset: ^0.66.2 => 0.66.2
react-native: 0.66.1 => 0.66.1

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @serdec! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[JLHwung]

import typeof AccessibilityInfo

Babel does compile react-native but this file uses Flow syntax, which is not supported by preset-env because it is not Standard JavaScript. You can add preset-flow to your Babel config.

[serdec]

thanks Huang, that solved the problem. However a few other problems of variables and environment not properly set come up (e.g DEV not defined which i solved defining it globally).

Any suggestion on how to properly transpile react-native modules so that it is possible to use them with other testing frameworks other than jest?

[JLHwung]

Any suggestion on how to properly transpile react-native modules

You may try if babel-preset-expo works for you, the Creact React App communities recommends building react native app by expo.

[nicolo-ribaudo]

I don't think using babel-preset-expo alone would fix this. @babel/register ignores node_modules by default, and you need to explicitly un-ignore them: https://babeljs.io/docs/en/babel-register/#ignores-node_modules-by-default

Due to how require() hooks work, Babel has to decide if a file should be ignored before reading the config, so ignore in the config won't work.

[serdec]

hey @nicolo-ribaudo thanks for your answer. You are actually right and the babel-preset-expo doesn't work.

However, @babel/register seems to run on the node_modules/react-native, in fact if you remove the ignore in the config you get the import syntax error, while with the ignore property that problem is solved.

The problems that i encounter now don't seem related to javascript syntax or transpilation in general, but rather to some missing setup that happens when react-native is run on ios or android.

I checked how jest is able to run with react-native and it seems that the react-native team made up a specific setup and mocks for jest https://github.com/facebook/react-native/tree/main/jest. My best guess is that this setup + mocks solve all the initialization/configuration issues.

Would be nice to hear what you guys think of that

[nicolo-ribaudo]

I tried cloning your repository, but I don't fully understand the problem.

1. If I run node -r @babel/register app.test.js I get this error, but it's expected because there is no Babel config (and because even if there was, by default it's not applied to node_modules):

   SyntaxError: /workspaces/babel-register-react-native-issue-preset-env/app.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:37):
   
      5 |
      6 | describe('test', async assert => {
   >  7 |   const {queryAllByTestId} = render(<View testID='home'/>)
        |                                     ^
      8 |   assert({
      9 |     given: 'no arguments',
     10 |     should: 'compare 1 and 1',
   
   Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
   If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
       at Parser._raise (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:541:17)
       at Parser.raiseWithData (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:534:17)
       at Parser.expectOnePlugin (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:3565:18)
       at Parser.parseExprAtom (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11814:20)
       at Parser.parseExprSubscripts (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11414:23)
       at Parser.parseUpdate (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11394:21)
       at Parser.parseMaybeUnary (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11369:23)
       at Parser.parseMaybeUnaryOrPrivate (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11183:61)
       at Parser.parseExprOps (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11190:23)
       at Parser.parseMaybeConditional (/workspaces/babel-register-react-native-issue-preset-env/node_modules/@babel/parser/lib/index.js:11160:23) {
     loc: Position { line: 7, column: 36 },
     pos: 221,
     missingPlugin: [ 'jsx', 'flow', 'typescript' ],
     code: 'BABEL_PARSE_ERROR'
   }
   

2. If I run node -r ./babel-register-start.js app.test.js the file is parsed succesfully, but I get this error:

   TAP version 13
   # test
   not ok 1 Error: Cannot find module '../Utilities/Platform' Require stack: - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/StyleSheet/processColor.js - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/NativeComponent/ViewConfig.js - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/NativeComponent/NativeComponentRegistry.js - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/Components/View/ViewNativeComponent.js - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/Components/View/View.js - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/index.js - /workspaces/babel-register-react-native-issue-preset-env/app.test.js
     ---
       operator: error
       stack: |-
         Error: Cannot find module '../Utilities/Platform'
         Require stack:
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/StyleSheet/processColor.js
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/NativeComponent/ViewConfig.js
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/NativeComponent/NativeComponentRegistry.js
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/Components/View/ViewNativeComponent.js
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/Components/View/View.js
         - /workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/index.js
         - /workspaces/babel-register-react-native-issue-preset-env/app.test.js
             at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
             at Function.Module._load (internal/modules/cjs/loader.js:745:27)
             at Module.require (internal/modules/cjs/loader.js:961:19)
             at require (internal/modules/cjs/helpers.js:92:18)
             at Object.<anonymous> (/workspaces/babel-register-react-native-issue-preset-env/node_modules/react-native/Libraries/StyleSheet/processColor.js:15:32)
             at Module._compile (internal/modules/cjs/loader.js:1072:14)
             at Module._compile (/workspaces/babel-register-react-native-issue-preset-env/node_modules/pirates/lib/index.js:99:24)
             at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
             at Object.newLoader [as .js] (/workspaces/babel-register-react-native-issue-preset-env/node_modules/pirates/lib/index.js:104:7)
             at Module.load (internal/modules/cjs/loader.js:937:32)
     ...
   
   1..1
   # tests 1
   # pass  0
   # fail  1
   

   which looks correct, because that node_modules/react-native/Libraries/Utilities/Platform file does not exist.

[nicolo-ribaudo]

You could try using https://www.npmjs.com/package/babel-plugin-module-resolver to map that missing file to a custom mock.

[serdec]

thanks Nicolo', yes i guess at this stage the problem is not related to babel anymore, but rather to react-native.

I doubt that simply mapping the Platform file is going to work, rather i guess i'd need to deal with the react-native setup.