fix(server): fix chunkName resolving (#219)

Author: marcmrf

packages/babel-plugin/src/__snapshots__/index.test.js.snap

@@ -5,7 +5,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
   chunkName({
     foo
   }) {
-    return \`\${foo}\`;
+    return \`\${foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
   },
 
   isReady(props) {
@@ -48,7 +48,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
 exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] = `
 "loadable({
   chunkName(props) {
-    return \`\${props.foo}\`;
+    return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
   },
 
   isReady(props) {
@@ -87,7 +87,7 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`]
 exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = `
 "loadable({
   chunkName(props) {
-    return \`dir-\${props.foo}-test\`;
+    return \`dir-\${props.foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
   },
 
   isReady(props) {
@@ -128,7 +128,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
   chunkName({
     foo
   }) {
-    return \`dir-\${foo}-test\`;
+    return \`dir-\${foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
   },
 
   isReady(props) {
@@ -171,7 +171,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
 exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = `
 "loadable({
   chunkName(props) {
-    return \`\${props.foo}\`;
+    return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
   },
 
   isReady(props) {
@@ -327,7 +327,7 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1
 exports[`plugin simple import should work with template literal 1`] = `
 "loadable({
   chunkName() {
-    return \`ModA\`;
+    return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
   },
 
   isReady(props) {

packages/babel-plugin/src/properties/chunkName.js

@@ -2,6 +2,8 @@ import vm from 'vm'
 import { getImportArg } from '../util'
 
 const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/
+// https://github.com/webpack/webpack/blob/master/lib/Template.js
+const WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^°]+/g
 
 function readWebpackCommentValues(str) {
   try {
@@ -39,11 +41,11 @@ function getRawChunkNameFromCommments(importArg) {
 }
 
 function moduleToChunk(str) {
-  return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(/\//, '-') : ''
+  return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : ''
 }
 
 function replaceQuasiValue(str) {
-  return str ? str.replace(/\//g, '-') : str
+  return str ? str.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : str
 }
 
 export default function chunkNameProperty({ types: t }) {
@@ -109,6 +111,19 @@ export default function chunkNameProperty({ types: t }) {
     return `${v1}[request]${v2}`
   }
 
+  function sanitizeChunkNameTemplateLiteral(node) {
+    return t.callExpression(
+      t.memberExpression(
+        node,
+        t.identifier('replace')
+      ),
+      [
+        t.regExpLiteral(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX.source, 'g'),
+        t.stringLiteral('-')
+      ]
+    )
+  }
+
   function replaceChunkName(callPath) {
     const agressiveImport = isAgressiveImport(callPath)
     const values = getExistingChunkNameComment(callPath)
@@ -118,14 +133,22 @@ export default function chunkNameProperty({ types: t }) {
       return t.stringLiteral(values.webpackChunkName)
     }
 
-    const chunkNameNode = generateChunkNameNode(callPath)
-    const webpackChunkName = t.isTemplateLiteral(chunkNameNode)
-      ? chunkNameFromTemplateLiteral(chunkNameNode)
-      : chunkNameNode.value
+    let chunkNameNode = generateChunkNameNode(callPath)
+    let webpackChunkName
+
+    if (t.isTemplateLiteral(chunkNameNode)) {
+      webpackChunkName = chunkNameFromTemplateLiteral(chunkNameNode)
+      chunkNameNode = sanitizeChunkNameTemplateLiteral(chunkNameNode)
+    } else {
+      webpackChunkName = chunkNameNode.value
+    }
+
     addOrReplaceChunkNameComment(callPath, { webpackChunkName })
     return chunkNameNode
   }
 
+
+
   return ({ callPath, funcPath }) => {
     const chunkName = replaceChunkName(callPath)