React native web + vitest issue - Cannot use import statement outside a module

[sergioisidoro]

Bug

We are building a shared component library inside a react dom + react native project.

apps / dom-app1
     / native-app1
 
packages / package1     <--- React native svg used here
         / package2

we are using react-native-svg in one of the shared packages. Things seem to work out pretty good in development, and things build ok. However while testing things in vitest, we get this error:

SyntaxError: Cannot use import statement outside a module
 ❯ Object.<anonymous> ../../node_modules/react-native-svg/src/lib/SvgTouchableMixin.ts:2:1

Module /......../node_modules/react-native/index.js:14 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "react-native" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "react-native"
        ]
      }
    }
  }
}

Other packages depending on React native are working correctly, I've tried pretty much anything, like trying to change the type of all our packages to 'module`. Nothing worked, and we were completely stuck.

We found some related issues reported in one major repo related to the same error message, in ag-grid -- ag-grid/ag-grid#4986

This made us wonder if there's any issue on how react-native-svg is bundled? So we tried the same workaround as in the ag-grid repo, and it worked. by using

import Svg, { Path, Polygon } from 'react-native-svg/lib/module/ReactNativeSVG';

It fixed our issue. Could there be a similiar issue here as in the ag-grid repo?

Environment info

    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-svg": "^15.1.0",
    "react-native-web": "^0.19.9"

We're using Vite with

      alias: {
        'react-native': 'react-native-web',
        ...
       }

Any help to fallback to the normal import of react-native-svg would be appreciated :)

[radelcom]

also running into the exact same problems. any help is greatly appreciated!

[sergioisidoro]

@radelcom did our workaround work for you?

import Svg, { Path, Polygon } from 'react-native-svg/lib/module/ReactNativeSVG';

[radelcom]

@radelcom did our workaround work for you?

import Svg, { Path, Polygon } from 'react-native-svg/lib/module/ReactNativeSVG';

?

@sergioisidoro yeah, it did thanks! however, was getting type errors regarding definitions but was able to workaround it with adding the definitions to d.ts

declare module 'react-native-svg/lib/module/ReactNativeSVG';

[radelcom]

@sergioisidoro just following up to this. looks like that fix broke the native side of things. my new workaround is using vite.config.ts

resolve: {
    extensions: extensions,
    alias: {
      'react-native': 'react-native-web',
      'react-native-svg': 'react-native-svg/lib/module/ReactNativeSVG',
    },
  },