should explicitly declare type:commonjs since Node experimental-detect-module is on by default

Description

With recent Node versions a vitest test suite which tries to load react-native will load it as a module rather than as commonjs, and that will lead to SyntaxError: Unexpected token 'typeof'

This happens for all Node versions that have experimental-detect-module set to true by default, that is Node 20.19 and later, Node 22.7 and later, Node 23 (all versions) etc.

What I think happens is that based on the index.js file, node detects that React-Native is ESM and tries to run it as a module.

One workaround is to configure this script (see npm run dev below)

"dev": "NODE_OPTIONS='--no-experimental-detect-module' vitest"

Steps to reproduce

checkout the reproduction repo, run npm install
switch to a recent node version like 20.19 or later, 22.7 or later, 23
npm run test (which executes vitest) will fail with SyntaxError: Unexpected token 'typeof'. npm run dev (which also executes vitest, but with the flag above) works for all node versions >= 20 (earlier node versions do not recognize the flag). npm run expo works for any Node version supported by React Native.
edit node_modules/react-native/package.json and add "type":"commonjs". This will help npm run test work as expected.

React Native Version

0.77.1

Affected Platforms

Build - MacOS, Other (please specify)

Output of `npx @react-native-community/cli info`

System:
  OS: macOS 14.2.1
  CPU: (8) arm64 Apple M1
  Memory: 265.11 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.10.0
    path: ~/.nvm/versions/node/v23.10.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v23.10.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK: Not Found
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: ^18.3.1
  react-native:
    installed: 0.77.1
    wanted: ^0.77.*
  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.78.0 is now available (your project is running on v0.77.1).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.77.1&to=0.78.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Tested on a number of macOS and linux platforms, the behavior is the same. The difference is made by the Node version

Here is the output on an alpine-node23 docker:

System:
  OS: Linux 6.12 Alpine Linux
  CPU: (8) arm64 unknown
  Memory: 3.06 GB / 3.83 GB
  Shell:
    version: Unknown
    path: /bin/sh
Binaries:
  Node:
    version: 23.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.9.2
    path: /usr/local/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: ^18.3.1
  react-native:
    installed: 0.75.5
    wanted: ^0.77.*
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.78.0 is now available (your project is running on v0.75.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.75.5&to=0.78.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=linux".

Also tested with React Native versions between 0.75 and 0.77, they all exhibit the same behavior.

Stacktrace or Logs

vitest tests break with SyntaxError: Unexpected token 'typeof'

If the react vite plugin is removed, a more detailed error is shown

 FAIL  test/test.test.jsx [ test/test.test.jsx ]
RollupError: Parse failure: Expected 'from', got 'typeof'
At file: /Users/cristi/expo-vitest/node_modules/react-native/index.js:15:8
  File: /Users/cristi/expo-vitest/node_modules/react-native/index.js:15:8
  13 |  
  14 |  // APIs
  15 |  import typeof ActionSheetIOS from "/node_modules/react-native/Libraries/ActionSheetIOS/ActionSheetIOS.js";
     |         ^
  16 |  import typeof Alert from "/node_modules/react-native/Libraries/Alert/Alert.js";
  17 |  import typeof Animated from "/node_modules/react-native/Libraries/Animated/Animated.js";
 ❯ getRollupError node_modules/rollup/dist/es/shared/parseAst.js:397:41
 ❯ convertProgram node_modules/rollup/dist/es/shared/parseAst.js:1085:26
 ❯ parseAstAsync node_modules/rollup/dist/es/shared/parseAst.js:2071:106
 ❯ ssrTransformScript node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:31239:11
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:41371:65

Node 22.7 displayed this more verbose error

(node:70023) [MODULE_TYPELESS_PACKAGE_JSON] Warning: file:///PATH/node_modules/react-native/index.js parsed as an ES module because module syntax was detected; to avoid the performance penalty of syntax detection, add "type": "module" to PATH/node_modules/react-native/package.json
(Use node --trace-warnings ... to show where the warning was created)

Reproducer

https://github.com/cristianbogdan/react-native-module-issue

Screenshots and Videos

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

I added a docker configuration that demonstrates the same issue on the latest Alpine with Node 23

Just run docker compose up

Configuring FROM node:22.6-alpine in the Dockerfile will avoid the issue because that node version is the most advanced to not have --experimental-detect-module on by default

See above the output of npx @react-native-community/cli info

Googling "react-native" "SyntaxError: Unexpected token 'typeof'" shows remarkably few results, partly because it occurs on quite recent Node versions.

Here is such an issue, with Node 22.11 (probably because it is > 22.6)

tamagui/tamagui#3082

As in the stacktrace above, the issue occurs at import typeof ActionSheetIOS

@cristianbogdan

@cristianbogdan
I believe this issue might be more relevant to vitest-react-native rather than React Native itself. It might be helpful to raise this with the vitest-react-native team for further investigation.

@sarthak-d11 as you can see above I have done quite some reasearch . This has nothing to do with vitest-react-native.

This branch proves that. It has no vite plugins (React or React native). In fact, no vitest.config.js at all, and no React or React Native vite plugins are installed in package.json. Just run npm i && npm run test

Based on the error

RollupError: Parse failure: Expected 'from', got 'typeof'
At file: /Users/cristi/expo-vitest/node_modules/react-native/index.js:15:8

the issue is either in Rollup or React Native , but I'd lean more towards React Native, in the context of the changed Node behaviour in regard to the no-experimental-detect-module flag.

Simply adding "type":"commonjs" (which was the default assumed by Node until version 22.6) in the distributed React Native package.json fixes the issue. But maybe that has other consequences.

none of the above workarounds are working for me. im still getting SyntaxError: Unexpected token 'typeof'.

even something as simple as this doesnt work.

import { render } from '@testing-library/react-native';
import { expect, it } from 'vitest';

it('should render external link', () => {
  const { getByText } = render(<a href="https://example.com">Test Link</a>);
  expect(getByText('Test Link')).toBeTruthy();
});

tried with node 20.18 and the alias fix but that also doesnt work and still warns me to use the alias. 🤷‍♀️ outta ideas at this point.

also mentioned to expo that they really need to add docs on using vitest. expo/expo#39654

I'm also having this issue.

Using Node 22.6.x everything worked ok with some warnings, but 22.18.x resulted in the same SyntaxError: Unexpected token 'typeof',

I assume to be related to the import of the flowtypes import typeof * as ReactNativePublicAPI from './index.js.flow'; which I think is a mixed sytnax. But I'm also getting the same issue on other package (like react-native-svg)

Just to re-iterate that there is a known workaround. In your package.json

 "scripts": {
    "test": "NODE_OPTIONS='--no-experimental-detect-module' vitest"
}

A more brutal workaround is to change your node_modules/react-native/package.json and add "type":"commonjs"

@cristianbogdan

@cristianbogdan only those workarounds dont work at all for me.

@ImLunaHey

@ImLunaHey sorry to hear that. If you share a minimal reproduction setup I can have a look. Or you can compare with the above minimal setup

You can also have a look at related work in other projects, like here

Off-topic: I have done a lot of expo vitest work, the only way I found was to mock most expo features.

@sergioisidoro

@sergioisidoro your issue seems to be exactly the one reported here (node 22.6 working, all later node versions not working, which makes sense because experimental-detect-module was turned on by default in node 22.7 and 20.19). So the workarounds should work for you.

yeah, the "NODE_OPTIONS='--no-experimental-detect-module' vitest" alone doesn't work for me either because react native still has mixed syntax with their flow types. Perhaps this is a mix of node 22.7 + version of react native

@sergioisidoro

@sergioisidoro can you tell us the version of React Native you are using? Or better make a minimal reproduction. Thanks!

@ImLunaHey

@ImLunaHey I am also facing same issue as you. Tried everything from this thread and nothing works

Aliasing to the react-native-web package for the test suite appears to work fine for my use case, e.g.
export default defineConfig({ resolve: { alias: { "react-native": "react-native-web", }, }, ...

The typeof issue is probably due Flow Types.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

This still requires a bit of attention from maintainers

Navigation Menu

Repository navigation

should explicitly declare type:commonjs since Node experimental-detect-module is on by default #50052

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx @react-native-community/cli info`

Stacktrace or Logs

Reproducer

Screenshots and Videos

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

should explicitly declare type:commonjs since Node experimental-detect-module is on by default #50052

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx @react-native-community/cli info

Stacktrace or Logs

Reproducer

Screenshots and Videos

Activity

react-native-bot commented on Mar 17, 2025

react-native-bot commented on Mar 17, 2025

cristianbogdan commented on Mar 17, 2025

cristianbogdan commented on Mar 17, 2025

sarthak-playvision commented on Mar 18, 2025

cristianbogdan commented on Mar 18, 2025

1 remaining item

ImLunaHey commented on Sep 13, 2025

sergioisidoro commented on Oct 7, 2025

cristianbogdan commented on Oct 8, 2025

ImLunaHey commented on Oct 8, 2025

cristianbogdan commented on Oct 8, 2025

cristianbogdan commented on Oct 8, 2025

sergioisidoro commented on Oct 8, 2025

cristianbogdan commented on Oct 8, 2025

R-drg commented on Oct 30, 2025

adrian-stokes commented on Feb 12, 2026

sidferreira commented on Mar 24, 2026

react-native-bot commented on Sep 21, 2026

luixo commented on Sep 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`