[Turbopack] Import statements are not resolved in the order specified in the resolve extensions config

[gabrieltrompiz]

Link to the code that reproduces this issue

https://github.com/gabrieltrompiz/turbopack-rn-reproduction-app

To Reproduce

1. Start the application in dev mode (pnpm dev, yarn dev or npm run dev)
2. Go to localhost:3000 (or whatever port Next is using)

Current vs. Expected behavior

Using Turbopack, the app throws an error while compiling the page because it tries to import React Native code. I assume this happens because it's not resolving the modules using the order specified in the resolve extensions config. The extension web.js should be evaluated before .js since that's the usual way third-party React Native libraries allow for React Native for Web usage.

If Webpack is used (with --webpack flag), then the application compiles successfully. I would expect the resolve extensions from Turbopack to work similarly to how Webpack resolve extensions option works.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:07:05 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 24.11.1
  npm: 11.6.2
  Yarn: 1.22.22
  pnpm: 10.26.2
Relevant Packages:
  next: 16.2.0-canary.85 // Latest available version is detected (16.2.0-canary.85).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

Next config being used:

const nextConfig: NextConfig = {
  turbopack: {
    resolveAlias: {
      "react-native": "react-native-web",
    },
    resolveExtensions: [
      ".web.js",
      ".web.jsx",
      ".web.ts",
      ".web.tsx",
      ".mdx",
      ".tsx",
      ".ts",
      ".jsx",
      ".js",
      ".mjs",
      ".json",
    ],
    root: __dirname,
  },

  webpack: (config) => {
    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;
  },
};

[idirdev]

This is a Turbopack resolve extensions ordering issue with React Native for Web projects. The config specifies extensions like ['.web.tsx', '.web.ts', '.web.js', '.tsx', '.ts', '.js'] so that .web.js files are resolved before .js files. Webpack respects this ordering, but Turbopack doesnt, causing it to resolve the native .js files instead of the web-specific .web.js variants.

This is a common pattern in RN for Web projects, libraries like react-native-reanimated, react-native-gesture-handler, etc. rely on this resolution order to provide web-compatible implementations.

Workaround: use the --webpack flag to fall back to Webpack:

next dev --webpack

Or if you want to keep using Turbopack, try using turbopack.resolveAlias to explicitly map the problematic packages:

const nextConfig = {
  turbopack: {
    resolveAlias: {
      'react-native': 'react-native-web',
      // add other RN packages that have .web.js variants
    },
  },
};

This explicitly tells Turbopack which module to use without relying on extension resolution order. More verbose but should work until the extensions ordering gets fixed in Turbopack.

[yeddaTech]

I experienced something similar when experimenting with Next.js and different module resolution settings.

It might be related to how Turbopack prioritizes extensions internally.

Really excited to see how Turbopack evolves, the performance improvements look very promising.