Fix resolving for esm package with only exports.import condition (#42767

)

Should be able to resolve `exports.import` condition for esm packages only when import them in server components

Fixes: #42534

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

packages/next/build/webpack-config.ts

@@ -1641,7 +1641,7 @@ export default async function getBaseWebpackConfig(
                   return true
                 },
                 resolve: {
-                  conditionNames: ['react-server', 'node', 'require'],
+                  conditionNames: ['react-server', 'node', 'import', 'require'],
                   alias: {
                     // If missing the alias override here, the default alias will be used which aliases
                     // react to the direct file path, not the package name. In that case the condition
@@ -1983,9 +1983,7 @@ export default async function getBaseWebpackConfig(
         new ReactLoadablePlugin({
           filename: REACT_LOADABLE_MANIFEST,
           pagesDir,
-          runtimeAsset: true
-            ? `server/${MIDDLEWARE_REACT_LOADABLE_MANIFEST}.js`
-            : undefined,
+          runtimeAsset: `server/${MIDDLEWARE_REACT_LOADABLE_MANIFEST}.js`,
           dev,
         }),
       (isClient || isEdgeServer) && new DropClientPage(),

test/e2e/app-dir/app-external.test.ts

@@ -90,9 +90,9 @@ describe('app dir - external dependency', () => {
     containClientContent(browserClientText)
 
     // support esm module imports on server side, and indirect imports from shared components
-    expect(serverHtml).toContain('random-module-instance')
+    expect(serverHtml).toContain('pure-esm-module')
     expect(sharedHtml).toContain(
-      'node_modules instance from client module random-module-instance'
+      'node_modules instance from client module pure-esm-module'
     )
   })
 

test/e2e/app-dir/app-external/app/external-imports/server/page.js

@@ -1,4 +1,4 @@
-import { name } from 'random-module-instance'
+import { name } from 'pure-esm-module'
 
 export default function Page() {
   return (

test/e2e/app-dir/app-external/components/random-module-instance.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { name } from 'random-module-instance'
+import { name } from 'pure-esm-module'
 
 export default function () {
   return `node_modules instance from client module ${name}`

test/e2e/app-dir/app-external/node_modules_bak/random-module-instance/index.js → test/e2e/app-dir/app-external/node_modules_bak/pure-esm-module/index.js

@@ -1,2 +1,2 @@
 export const random = ~~(Math.random() * 1e5)
-export const name = 'random-module-instance'
+export const name = 'pure-esm-module'

test/e2e/app-dir/app-external/node_modules_bak/pure-esm-module/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "pure-esm-module",
+  "type": "module",
+  "exports": {
+    "import": "./index.js"
+  }
+}

test/e2e/app-dir/rsc-basic/app/shared/page.js

@@ -1,7 +1,6 @@
 import ClientFromDirect from '../../components/client'
 import ClientFromShared from '../../components/shared'
 import SharedFromClient from '../../components/shared-client'
-// import Random from '../../components/random-module-instance'
 import Bar from '../../components/bar'
 
 export default function Page() {