diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 486859533a1f9..32955ca41698b 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -220,6 +220,9 @@ export default async function getBaseWebpackConfig(
         default: false,
         vendors: false,
         framework: {
+          // Framework chunk applies to modules in dynamic chunks, unlike shared chunks
+          // TODO(atcastle): Analyze if other cache groups should be set to 'all' as well
+          chunks: 'all',
           name: 'framework',
           test: /[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types)[\\/]/,
           priority: 40,
@@ -232,20 +235,22 @@ export default async function getBaseWebpackConfig(
             )
           },
           name(module: { identifier: Function; rawRequest: string }): string {
-            const rawRequest =
-              module.rawRequest &&
-              module.rawRequest.replace(/^@(\w+)[/\\]/, '$1-')
-            if (rawRequest) return rawRequest
-
             const identifier = module.identifier()
+            // Remove everything up through '/node_modules/'
             const trimmedIdentifier = /(?:^|[/\\])node_modules[/\\](.*)/.exec(
               identifier
             )
             const processedIdentifier =
               trimmedIdentifier &&
-              trimmedIdentifier[1].replace(/^@(\w+)[/\\]/, '$1-')
+              // Remove the file extension(s)
+              /[\w-\/\\]+/.exec(trimmedIdentifier[1])
+
+            let finalName = processedIdentifier && processedIdentifier[0]
+
+            finalName = finalName && finalName.replace(/[\\\/]/g, '~')
+            const backupName = identifier.replace(/[\\\/]/g, '~')
 
-            return processedIdentifier || identifier
+            return finalName || backupName
           },
           priority: 30,
           minChunks: 1,