Possible Breaking Change on Web in 15.5.0

[jspizziri]

Description

This commit which was released on v15.5.0 introduces a dependency on @react-native/assets-registry which previously didn't exist.

@react-native/assets-registry is a transitive dependency of react-native but is NOT a transitive dependency of react-native-web. Therefore, in web contexts, an error is thrown due to the missing dependency.

Steps to reproduce

Setup a bare react-native-web project that depends on [email protected] and does NOT install react-native. This seems to only happen in non-expo contexts.

Snack or a link to a repository

working on it

SVG version

15.5.0

React Native version

0.74.5

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[FurySwordXD]

Can reproduce this issue on RNSVG 15.6.0

[shawnmclean]

Can reproduce.

I'm using this in a nextjs project that worked before. Now its throwing errors about reading flowtypes.

Example here: https://github.com/shawnmclean/sovoli/actions/runs/10548468653/job/29222414744#step:7:64

[jonstuebe]

I've gotta say, seems like we could have a test added to make sure web support isn't broken on release right?

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[jspizziri]

@jonstuebe , I'm sure the maintainers would welcome a PR from you adding such a test 😄

[bohdanprog]

I've gotta say, seems like we could have a test added to make sure web support isn't broken on release right?

It seems like the same problem as here.
The best solution for that problem now is to:

Install this dependency.
If you are using Next.js, you need to transpile @react-native/assets-registry/registry. I guess you can configure it here.

[bohdanprog]

@shawnmclean If you have any questions let us know ;)

[johnf]

FYI: I tried transpiling via next.js, but that doesn't seem to work. I think it's because it's a flow file with a .js extension and not typescript.

I ended up patching registry.js instead.

[bohdanprog]

FYI: I tried transpiling via next.js, but that doesn't seem to work. I think it's because it's a flow file with a .js extension and not typescript.

I ended up patching registry.js instead.

Can you share an example of how you tried transpiling via next.js?

[johnf]

I added the package to transpilePackages in next.config.mjs (I already have other entire in there so I know it's working). I tried a couple of options

• @react-native/assets-registry
• @react-native/assets-registry/registry
• @react-native/assets-registry/registry.js

None of these made any difference.

[bohdanprog]

Hello @johnf, sorry it took a while. I found the solution to your problem.
here is my configuration for the next.js project.

/** @type {import('next').NextConfig} */

const path = require("path");

const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        "react-native": "react-native-web",
      },
      resolveExtensions: [
        ".web.js",
        ".web.jsx",
        ".web.ts",
        ".web.tsx",
        ".mdx",
        ".tsx",
        ".ts",
        ".jsx",
        ".js",
        ".mjs",
        ".json",
      ],
    },
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      include: [
        path.resolve(__dirname, "src"),
        path.resolve(
          __dirname,
          "node_modules/@react-native/assets-registry/registry"
        ),
      ],
      use: {
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          presets: ["module:metro-react-native-babel-preset"],
          plugins: ["react-native-web"],
        },
      },
    });
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      "react-native$": "react-native-web",
    };
    config.resolve.extensions = [
      ".web.js",
      ".web.jsx",
      ".web.ts",
      ".web.tsx",
      ...config.resolve.extensions,
    ];
    return config;
  },
};

module.exports = nextConfig;

[stevenwchien]

@bohdanprog Thank you for posting your fix. However, even with the next.config.js you recommended, I'm still running into this issue. I was wondering if you could share the versions of all of the relevant packages you are using, like react-native-web, react-native, nextjs, etc.

Thank you!