bug: `@react-native/polyfills/error-guard.js` not transpiled in distrobution #33426

therynamo · 2022-03-14T16:21:42Z

Description

In trying to integrate @swc/jest into our React Native codebase - it was discovered that one of the files (error-guard) was not being transpiled correctly. I'm not sure if this is by design or not - but the sibling files do not have types. So my guess is that this is not intended.

Version

0.66.1

Output of `npx react-native info`

System:
    OS: macOS 12.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 38.22 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/theryn.groetken/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 6.1.0 => 6.1.0
    react: 17.0.2 => 17.0.2
    react-native: 0.66.1 => 0.66.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

See https://github.com/therynamo/SWCJestRepro#swcjestrepro

Snack, code example, screenshot, or link to a repository

https://github.com/therynamo/SWCJestRepro

The text was updated successfully, but these errors were encountered:

kopax-polyconseil · 2022-07-19T16:04:41Z

Is it possible to have an update on this? Our repository suffer with jest and supporting @swc/jest for testing would be really cool.

aike19115 · 2022-08-01T09:31:23Z

It's also preventing our codebase to work properly when using Jest for unit testing. It looks unintentional because there is typescript code in a .js file which is a big no go

emclab · 2022-08-25T21:59:17Z

I am having the same issue. https://stackoverflow.com/questions/73493430/how-to-make-jest-ignore-type-which-is-not-js-keyword-and-used-in-react-native

emclab · 2022-08-26T19:44:40Z

Is there any fix for the issue? I can not run any test.

mikemeyer30 · 2022-09-23T19:54:23Z

I am also encountering this problem..

RN Version 0.65.2

npx react-native info:

    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 92.84 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.4 - /opt/homebrew/bin/npm
    Watchman: 2022.08.08.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/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: 23, 25, 29, 30, 31, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 31.0.0
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8139111
    Xcode: 14.0/14A309 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_322 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: ^0.65.2 => 0.65.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

jest.config.js:

module.exports = {
  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,

  // Indicates whether the coverage information should be collected while executing the test
  collectCoverage: true,

  // The directory where Jest should output its coverage files
  coverageDirectory: 'coverage',

  // A preset that is used as a base for Jest's configuration
  preset: 'jest-expo',

  // The paths to modules that run some code to configure or set up the testing environment before each test
  setupFiles: ['<rootDir>/mocks/mockLibs.js'],

  // The glob patterns Jest uses to detect test files
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: [
    'node_modules/(?!@react-native|react-native)',
    'node_modules/(?!@react-native/polyfills/)',
    'node_modules/(?!(jest-)?@react-navigation|@react-native-community|@react-navigation-redux-helpers)',
    'node_modules/(?!(jest-runtime))',
  ],
};

babel.config.js:

module.exports = {
  presets: [
    '@babel/preset-react',
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

If anyone knows of any work arounds, will gladly give you the stronger of my two kidneys

CoSNaYe · 2022-10-03T17:15:26Z

not working too 😔
I've tried all methods mentioned here

Here's the repo which is just a new RN project.
If possible, please someone to help. Thanks!

    "react": "18.1.0",
    "react-native": "0.70.1"
    "@babel/core": "^7.19.3",
    "@testing-library/jest-native": "^5.0.0",
    "@testing-library/react-native": "^11.2.0",
    "@types/jest": "^29.1.1",
    "babel-jest": "^29.1.2",
    "babel-preset-expo": "^9.2.0",
    "detox": "^19.12.5",
    "jest": "^29.1.2",
    "metro-react-native-babel-preset": "^0.72.1",
    "ts-jest": "^29.0.3",
    "typescript": "^4.8.4"

nzcodarnoc · 2022-11-23T04:12:17Z

I'm in the process of upgrading from 0.67.4 to 0.70.1 and I'm blocked by this presently. I watch this thread with interest, and, I'll report back anything that gets the tests working again.

nzcodarnoc · 2022-11-23T18:38:50Z

In my case I had to rename all instances of .babelrc with babel.config.js and run the tests with the --clear-cache flag.

The additional code in polyfills/error-guard.js is not Typescript, it is flow (flow is what FB uses instead of Typescript).

So I added this module to strip of the flow annotations in the file.
yarn add -D @babel/plugin-transform-flow-strip-types and then added it to the presets array in babel.config.js like this:

// ...
const plugins = [
  "@babel/plugin-transform-flow-strip-types",
// ...

In the end my working jest.config.js is:

export default {
  preset: "react-native",
  globalSetup: "<rootDir>/global-test-setup.js",
  setupFilesAfterEnv: ["<rootDir>/test-setup.ts"],
  moduleNameMapper: {
    ".png": "<rootDir>/../../jest/fileMock",
    "react-native-url-polyfill/auto": "<rootDor>/../../jest/fileMock",
  },
  setupFiles: [
    "<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js",
    "./jest-cucumber-config",
  ],
  transform: {
    "^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$": require.resolve(
      "react-native/jest/assetFileTransformer.js"
    ),
  },
  transformIgnorePatterns: [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
  ],
  globals: {
    "ts-jest": {
      isolatedModules: true,
    },
  },
};

supmanyu · 2022-12-14T09:11:58Z

@nzcodarnoc tried your solution by converting it for a js based project, unfortunately it did not work. Is there a definite root cause for this error or is this something that can only be resolved through hit and trial?

chemdrew · 2023-01-31T18:45:03Z

Ran into this issue as well when trying to use @swc/jest to get away from some memory issues (jestjs/jest#12205).

Unfortunately this issue does not just affect @react-native/polyfills/error-guard.js but also react-native. I found this out attempting to use patch-package to remove any flow syntax on the error-guard polyfill and I gave up there when it turned into a game of whack-a-mole.

latobibor · 2023-04-20T20:31:33Z

transformIgnorePatterns: [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.|@expo-google-fonts/.|react-navigation|@react-navigation/.|@unimodules/.|unimodules|sentry-expo|native-base|react-native-svg)"
],

☝️ This line alone solved the problem for me.

jzaefferer · 2023-10-31T08:45:58Z

Unfortunately this issue does not just affect @react-native/polyfills/error-guard.js but also react-native. I found this out attempting to use patch-package to remove any flow syntax on the error-guard polyfill and I gave up there when it turned into a game of whack-a-mole.

Since I just tried that, too: After error-guard.js it's node_modules/react-native/Libraries/vendor/core/ErrorUtils.js, then comes node_modules/react-native/index.js

I guess this works fine when using babel thanks to node_modules/metro-react-native-babel-preset/src/configs/main.js including @babel/plugin-syntax-flow.

I wonder if it would be an option to ship npm packages without flow types, to remove the need for flow transform in each project and making swc/jest an option.

github-actions · 2024-04-29T05:01:10Z

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.

github-actions · 2024-05-06T05:01:16Z

This issue was closed because it has been stalled for 7 days with no activity.

therynamo added the Needs: Triage 🔍 label Mar 14, 2022

therynamo mentioned this issue Mar 14, 2022

bug: Tests Fail Using Basic Configuration (React Native/TypeScript) swc-project/jest#85

Open

aike19115 mentioned this issue Aug 1, 2022

[Bug]: jest fails with @react-native/polyfills/error-guard.js jestjs/jest#12978

Closed

siddarthkay mentioned this issue Sep 25, 2023

component tests fail after upgrading react native to 0.72.x status-im/status-mobile#17409

Closed

jiji14 mentioned this issue Oct 3, 2023

React Component Testing Setup e-mission/e-mission-phone#1049

Merged

jzaefferer mentioned this issue Oct 31, 2023

Jest react native SyntaxError: Unexpected identifier when using pnpm package installer #36765

Closed

oscklm mentioned this issue Apr 27, 2024

Issue when running yarn test - Expo SDK 51 expo/expo#28495

Closed

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 29, 2024

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale May 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: `@react-native/polyfills/error-guard.js` not transpiled in distrobution #33426

bug: `@react-native/polyfills/error-guard.js` not transpiled in distrobution #33426

therynamo commented Mar 14, 2022 •

edited

Loading

kopax-polyconseil commented Jul 19, 2022

aike19115 commented Aug 1, 2022

emclab commented Aug 25, 2022

emclab commented Aug 26, 2022

mikemeyer30 commented Sep 23, 2022 •

edited

Loading

CoSNaYe commented Oct 3, 2022

nzcodarnoc commented Nov 23, 2022

nzcodarnoc commented Nov 23, 2022 •

edited

Loading

supmanyu commented Dec 14, 2022

chemdrew commented Jan 31, 2023

latobibor commented Apr 20, 2023

jzaefferer commented Oct 31, 2023

github-actions bot commented Apr 29, 2024

github-actions bot commented May 6, 2024

bug: @react-native/polyfills/error-guard.js not transpiled in distrobution #33426

bug: @react-native/polyfills/error-guard.js not transpiled in distrobution #33426

Comments

therynamo commented Mar 14, 2022 • edited Loading

Description

Version

Output of npx react-native info

Steps to reproduce

Snack, code example, screenshot, or link to a repository

kopax-polyconseil commented Jul 19, 2022

aike19115 commented Aug 1, 2022

emclab commented Aug 25, 2022

emclab commented Aug 26, 2022

mikemeyer30 commented Sep 23, 2022 • edited Loading

CoSNaYe commented Oct 3, 2022

nzcodarnoc commented Nov 23, 2022

nzcodarnoc commented Nov 23, 2022 • edited Loading

supmanyu commented Dec 14, 2022

chemdrew commented Jan 31, 2023

latobibor commented Apr 20, 2023

jzaefferer commented Oct 31, 2023

github-actions bot commented Apr 29, 2024

github-actions bot commented May 6, 2024

bug: `@react-native/polyfills/error-guard.js` not transpiled in distrobution #33426

bug: `@react-native/polyfills/error-guard.js` not transpiled in distrobution #33426

therynamo commented Mar 14, 2022 •

edited

Loading

Output of `npx react-native info`

mikemeyer30 commented Sep 23, 2022 •

edited

Loading

nzcodarnoc commented Nov 23, 2022 •

edited

Loading