Ensure next/dynamic transpiles for tests (vercel#24751)

Co-authored-by: Tobias Koppers <[email protected]>

Author: ijjk

packages/next/build/babel/plugins/react-loadable-plugin.ts

@@ -151,10 +151,12 @@ export default function ({
                 t.binaryExpression(
                   '+',
                   t.stringLiteral(
-                    relativePath(
-                      state.file.opts.caller.pagesDir,
-                      state.file.opts.filename
-                    ) + ' -> '
+                    (state.file.opts.caller.pagesDir
+                      ? relativePath(
+                          state.file.opts.caller.pagesDir,
+                          state.file.opts.filename
+                        )
+                      : state.file.opts.filename) + ' -> '
                   ),
                   node
                 )

test/unit/next-babel-loader.unit.test.js

@@ -11,10 +11,13 @@ const path = require('path')
 
 const dir = path.resolve(os.tmpdir())
 
-const babel = async (
-  code,
-  { isServer = false, resourcePath = 'index.js', development = false } = {}
-) => {
+const babel = async (code, queryOpts = {}) => {
+  const {
+    isServer = false,
+    resourcePath = 'index.js',
+    development = false,
+  } = queryOpts
+
   let isAsync = false
   return new Promise((resolve, reject) => {
     function callback(err, content) {
@@ -47,7 +50,10 @@ const babel = async (
         cwd: dir,
         isServer,
         distDir: path.resolve(dir, '.next'),
-        pagesDir: path.resolve(dir, 'pages'),
+        pagesDir:
+          'pagesDir' in queryOpts
+            ? queryOpts.pagesDir
+            : path.resolve(dir, 'pages'),
         cache: false,
         development,
         hasReactRefresh: Boolean(!isServer && development),
@@ -196,6 +202,28 @@ describe('next-babel-loader', () => {
       expect(code).toMatchInlineSnapshot(`"if(false){}"`)
     })
 
+    it('should handle no pagesDir', async () => {
+      const code = await babel(
+        `
+        import dynamic from 'next/dynamic'
+        
+        const Comp = dynamic(() => import('comp'))
+        
+        export default function Page(props) {
+          return <Comp />
+        }
+      `,
+        {
+          pagesDir: undefined,
+        }
+      )
+      expect(
+        code.replace(/modules:\[".*?"/, 'modules:["/path/to/page"')
+      ).toMatchInlineSnapshot(
+        `"import React from\\"react\\";var __jsx=React.createElement;import dynamic from'next/dynamic';var Comp=dynamic(function(){return import('comp');},{loadableGenerated:{webpack:function webpack(){return[require.resolveWeak('comp')];},modules:[\\"/path/to/page\\"+'comp']}});export default function Page(props){return __jsx(Comp,null);}"`
+      )
+    })
+
     it('should not drop unused exports by default', async () => {
       const code = await babel(
         // effectful