fix: dynamic imports with webpack 5

Author: lindsaylevine

Diff for: package-lock.json

@@ -77,7 +77,7 @@
     "husky": "^4.3.0",
     "jest": "^26.6.1",
     "netlify-cli": "^3.29.5",
-    "next": "^10.0.8",
+    "next": "^10.2.0",
     "path-exists": "^4.0.0",
     "prettier": "^2.1.2",
     "react": "^17.0.1",

Diff for: package.json

@@ -1,26 +1,43 @@
 const { join } = require('path')
 
-const { copySync, readdirSync } = require('fs-extra')
+const { copySync, existsSync, readdirSync } = require('fs-extra')
 
 const getNextDistDir = require('./getNextDistDir')
 const { logTitle } = require('./logger')
 
 // Check if there are dynamic import chunks and copy to the necessary function dir
 const copyDynamicImportChunks = async (functionPath) => {
   const nextDistDir = await getNextDistDir()
-  const chunksPath = join(nextDistDir, 'serverless')
-  const files = readdirSync(chunksPath)
-  const chunkRegex = new RegExp(/^(\.?[-$~\w]+)+\.js$/g)
+  const chunksPathWebpack4 = join(nextDistDir, 'serverless')
+  const filesWP4 = readdirSync(chunksPathWebpack4)
+  const chunkRegexWP4 = new RegExp(/^(\.?[-$~\w]+)+\.js$/g)
   const excludeFiles = new Set(['init-server.js.js', 'on-error-server.js.js'])
-  files.forEach((file) => {
-    if (!excludeFiles.has(file) && chunkRegex.test(file)) {
-      logTitle('💼 Copying dynamic import chunks to', functionPath)
-      copySync(join(chunksPath, file), join(functionPath, file), {
+  filesWP4.forEach((file) => {
+    if (!excludeFiles.has(file) && chunkRegexWP4.test(file)) {
+      // WP4 files are looked for one level up (../) in runtime
+      // This is a hack to make the file one level up i.e. with
+      // nextPage/nextPage/index.js, the chunk is moved to the inner nextPage
+      const copyPath = join(functionPath, 'nextPage')
+      logTitle('💼 Copying WP4 dynamic import chunks to', copyPath)
+      copySync(join(chunksPathWebpack4, file), join(copyPath, file), {
         overwrite: false,
         errorOnExist: true,
       })
     }
   })
+  const chunksPathWebpack5 = join(nextDistDir, 'serverless', 'chunks')
+  const filesWP5 = existsSync(chunksPathWebpack5) ? readdirSync(chunksPathWebpack5) : []
+  filesWP5.forEach((file) => {
+    // WP5 files are looked for two levels up (../../chunks) in runtime
+    // This is a hack to make the file one level up i.e. with
+    // nextPage/nextPage/index.js, the chunk is moved to outer nextPage in a /chunks dir
+    const copyPath = join(functionPath, 'chunks')
+    logTitle('💼 Copying WB5 dynamic import chunks to', copyPath)
+    copySync(join(chunksPathWebpack5, file), join(copyPath, file), {
+      overwrite: false,
+      errorOnExist: true,
+    })
+  })
 }
 
 module.exports = copyDynamicImportChunks

Diff for: src/lib/helpers/copyDynamicImportChunks.js

@@ -38,8 +38,9 @@ const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage
   // Copy any dynamic import chunks
   await copyDynamicImportChunks(functionDirectory)
 
-  // Copy page
-  const nextPageCopyPath = join(functionDirectory, 'nextPage', 'index.js')
+  // Copy page to our custom path
+  // (hack needed for dynamic imports, see: copyDynamicImportChunks.js)
+  const nextPageCopyPath = join(functionDirectory, 'nextPage', 'nextPage', 'index.js')
   const nextDistDir = await getNextDistDir()
   copySync(join(nextDistDir, 'serverless', filePath), nextPageCopyPath, {
     overwrite: false,

Diff for: src/lib/helpers/setupNetlifyFunctionForPage.js

@@ -38,13 +38,9 @@ describe('next-on-netlify', () => {
     expect(buildOutput).toMatch('Success! All done!')
   })
 
-  test('copies chunk files to ', () => {
-    const functionFiles = readdirSync(join(functionsDir, 'next_index'))
-    const chunkRegex = new RegExp(/(\.?[-_$~A-Z0-9a-z]+){1,}\.js$/g)
-    let chunkFileExists
-    functionFiles.forEach((file) => {
-      chunkFileExists = chunkRegex.test(file)
-    })
-    expect(chunkFileExists).toBe(true)
+  test('copies chunk files to functions dir', () => {
+    // This only tests WP5 as Next is -D installed @ 10.2.0
+    const chunkFiles = readdirSync(join(functionsDir, 'next_index', 'chunks'))
+    expect(chunkFiles.length).toEqual(1) // just the header
   })
 })