fix(docz-plugin-babel6): change babel syntax dynamic import when needed

doczjs · Aug 2, 2018 · 8cb278a · 8cb278a
1 parent 00deef5
commit 8cb278a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/docz-core/src/utils/babel-config.ts b/packages/docz-core/src/utils/babel-config.ts
@@ -39,7 +39,7 @@ const getPresets = (args: Config, { presets }: BabelRC) => {
  */
 
 const PRESETS_WITH_DYNAMIC = /babel-preset-react-app|next\/babel|razzle/
-const DYNAMIC_IMPORT = /@babel\/plugin-syntax-dynamic-import/
+const DYNAMIC_IMPORT = /(babel-|@babel\/)plugin-syntax-dynamic-import/
 const HOT_LOADER = /react-hot-loader\/babel/
 const DOCGEN = /babel-plugin-react-docgen/
 

diff --git a/packages/docz-plugin-babel6/package.json b/packages/docz-plugin-babel6/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-react-app": "^3.1.2",
     "babel-runtime": "^6.26.0",
     "docz-core": "^0.9.0-beta.1",

diff --git a/packages/docz-plugin-babel6/src/index.ts b/packages/docz-plugin-babel6/src/index.ts
@@ -12,19 +12,30 @@ const modifyHappypackLoader = (plugin: any) => {
 export const babel = () =>
   createPlugin({
     modifyBabelRc: (babelrc: BabelRC) => {
+      const { presets, plugins = [] } = babelrc
       if (!babelrc.presets) return babelrc
 
-      const idx = babelrc.presets.findIndex(preset =>
+      const idx = presets.findIndex(preset =>
         /babel-preset-react-app/.test(preset)
       )
 
-      const tsIdx = babelrc.presets.findIndex(preset =>
+      const tsIdx = presets.findIndex(preset =>
         /@babel\/preset-typescript/.test(preset)
       )
 
+      const importIdx = plugins.findIndex(plugin =>
+        /@babel\/plugin-syntax-dynamic-import/.test(plugin)
+      )
+
       babelrc.presets[idx] = require.resolve('babel-preset-react-app')
       tsIdx > -1 && babelrc.presets.splice(tsIdx, 1)
 
+      if (importIdx > -1) {
+        babelrc.plugins[importIdx] = require.resolve(
+          'babel-plugin-syntax-dynamic-import'
+        )
+      }
+
       return babelrc
     },
     modifyBundlerConfig: (config, dev, args) => {