Parsing error: Cannot find module '@react-native/babel-preset'

[flixyudh]

Description

I just create a new library with CRNL, I used .js instead of ts/tsx in my code but everytime declare import React from 'react';, eslint keep saying

Parsing error: Cannot find module '@react-native/babel-preset'
Require stack:
- node_modules/@babel/core/lib/config/files/plugins.js
- node_modules/@babel/core/lib/config/files/index.js
- node_modules/@babel/core/lib/index.js
- node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- node_modules/@babel/eslint-parser/lib/client.cjs
- node_modules/@babel/eslint-parser/lib/index.cjs
- node_modules/@eslint/eslintrc/dist/eslintrc.cjs

I've tried installing @react-native/babel-preset using yarn add -D @react-native/babel-preset, but the error still persist,

is it expected error from eslint? or CRNL is not supported for .js extension?

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

npx create-react-native-library my-library

Link to repro

not published yet

Environment

> npx react-native info
info Fetching system and libraries information...
System:
  OS: macOS 12.5
  CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Memory: 5.08 GB / 16.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.1
    path: ~/.yarn/bin/yarn
  npm:
    version: 10.2.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/administrator_1/.rvm/gems/ruby-2.7.4/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 21.4
      - iOS 16.0
      - macOS 12.3
      - tvOS 16.0
      - watchOS 9.0
  Android SDK:
    API Levels:
      - "27"
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
    System Images:
      - android-23 | Intel x86 Atom_64
      - android-27 | Google APIs ARM 64 v8a
      - android-28 | Google APIs Intel x86 Atom
      - android-29 | Google APIs Intel x86 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-30 | Google Play ARM 64 v8a
      - android-34 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10406996
  Xcode:
    version: 14.0.1/14A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/administrator_1/.rvm/rubies/ruby-2.7.4/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.73.1 is now available (your project is running on v0.72.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.73.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.72.6
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos&platform=android".

[Albert-Gao]

wonder any fix here? it prevents testing as well.

[HurrellT]

Same issue here (fresh library with latest crnl)

[catherinejv2]

I ran into this exact problem. I upgraded react-native to 0.73.2 as listed in my info output and was able to run the tests.

[atlj]

Hey, I'm not able to reproduce this issue, seems like we are missing the @react-native/babel-preset dependency in our root package.json but it's not causing this problem on my end. Obviously we should fix that but the author of the issue says adding it didn't change anything on their end.

To test the library, I basically created a new project using npx create-react-native-library babel-plugin-test and selected Native Module, Kotlin and Swift. Then I removed all the TypeScript files and created a .js and a .jsx file with bad linting, yarn lint worked just fine (it showed the problems). Then I created a .test.js file and a .test.jsx file and yarn test ran just fine.

Could you describe better reproduction steps? In the Selected Options, you only listed the command you ran, not the answers you gave to the CLI. Also, could you provide a reproduction repo? Any help would be appreciated, we want to get this one fixed.

[flixyudh]

hi @atlj I forgot how do i fix the issue, as I remember, I need to run a command Developer: Reload Window from my vscode.

I just tried to replicate the issue I created right now, and it's seems there's no error about eslint anymore so I think it might be a vscode issue.

I'll close the issue since I can't replicated the issue I've created. :)