fix: livedemo disabled when config babel-plugin-import

src/features/compile/index.ts

@@ -7,6 +7,7 @@ import fs from 'fs';
 import path from 'path';
 import { addAtomMeta, addExampleAssets } from '../assets';
 import { getLoadHook } from './makoHooks';
+import { shouldDisabledLiveDemo } from './utils';
 export const techStacks: IDumiTechStack[] = [];
 export default (api: IApi) => {
   api.describe({ key: 'dumi:compile' });
@@ -87,12 +88,6 @@ export default (api: IApi) => {
     const babelInUmi = memo.module.rule('src').use('babel-loader').entries();
     if (!babelInUmi) return memo;
     const loaderPath = require.resolve('../../loaders/markdown');
-
-    // support require mjs packages(eg. element-plus/es)
-    // memo.resolve.byDependency.set('commonjs', {
-    //   conditionNames: ['require', 'node', 'import'],
-    // });
-
     const loaderBaseOpts: Partial<IMdLoaderOptions> = {
       techStacks,
       cwd: api.cwd,
@@ -103,6 +98,7 @@ export default (api: IApi) => {
       routes: api.appData.routes,
       locales: api.config.locales,
       pkg: api.pkg,
+      disableLiveDemo: shouldDisabledLiveDemo(api),
     };
     memo.module
       .rule('watch-parent')

src/features/compile/makoHooks.ts

@@ -6,6 +6,7 @@ import url from 'url';
 import { techStacks } from '.';
 import { RunLoaderOption, runLoaders } from '../../utils';
 import { addAtomMeta, addExampleAssets } from '../assets';
+import { shouldDisabledLiveDemo } from './utils';
 
 interface ICustomerRunLoaderInterface extends RunLoaderOption {
   type?: 'css' | 'js' | 'jsx';
@@ -31,6 +32,7 @@ const customRunLoaders = async (options: ICustomerRunLoaderInterface) => {
 const mdLoaderPath = require.resolve('../../loaders/markdown');
 
 export const getLoadHook = (api: IApi) => {
+  const disableLiveDemo = shouldDisabledLiveDemo(api);
   return async (filePath: string) => {
     const loaderBaseOpts: Partial<IMdLoaderOptions> = {
       techStacks,
@@ -42,6 +44,7 @@ export const getLoadHook = (api: IApi) => {
       routes: api.appData.routes,
       locales: api.config.locales || [],
       pkg: api.pkg,
+      disableLiveDemo,
     };
 
     const requestUrl = url.parse(filePath);

src/features/compile/utils.ts

@@ -0,0 +1,17 @@
+import { isArray } from '@umijs/utils/compiled/lodash';
+import { IApi } from 'umi';
+
+export const shouldDisabledLiveDemo = (api: IApi) => {
+  const extraBabelPlugins = api.userConfig.extraBabelPlugins;
+  const disableFlag =
+    isArray(extraBabelPlugins) &&
+    extraBabelPlugins?.some((p: any) =>
+      /^import$|babel-plugin-import/.test(p[0]),
+    );
+  if (disableFlag) {
+    api.logger.warn(
+      "dumi don't suggest to use babel-plugin-import, liveDemo will be disabled because of this config.",
+    );
+  }
+  return disableFlag;
+};

src/loaders/markdown/index.ts

@@ -21,6 +21,7 @@ interface IMdLoaderDefaultModeOptions
     atomId: string,
     meta: IMdTransformerResult['meta']['frontmatter'],
   ) => void;
+  disableLiveDemo: boolean;
 }
 
 interface IMdLoaderDemosModeOptions
@@ -166,21 +167,21 @@ function emitDemo(
     }
   });
 
-  const dedupedDemosDeps = Object.entries(demoDepsMap).reduce<
-    IDemoDependency[]
-  >((acc, [, deps]) => {
-    return acc.concat(
-      Object.entries(deps)
-        .map(([key, specifier]) => {
-          const existingIndex = acc.findIndex((obj) => obj.key === key);
-          if (existingIndex === -1) {
-            return { key, specifier };
-          }
-          return undefined;
-        })
-        .filter((item) => item !== undefined),
-    );
-  }, []);
+  const dedupedDemosDeps = opts.disableLiveDemo
+    ? []
+    : Object.entries(demoDepsMap).reduce<IDemoDependency[]>((acc, [, deps]) => {
+        return acc.concat(
+          Object.entries(deps)
+            .map(([key, specifier]) => {
+              const existingIndex = acc.findIndex((obj) => obj.key === key);
+              if (existingIndex === -1) {
+                return { key, specifier };
+              }
+              return undefined;
+            })
+            .filter((item) => item !== undefined),
+        );
+      }, []);
   return Mustache.render(
     `import React from 'react';
 import '${winPath(this.getDependencies()[0])}?watch=parent';
@@ -231,8 +232,13 @@ export const demos = {
       renderContext: function renderContext(
         this: NonNullable<typeof demos>[0],
       ) {
-        // do not render context for inline demo
-        if (!('resolveMap' in this) || !('asset' in this)) return 'undefined';
+        // do not render context for inline demo && config babel-import-plugin project
+        if (
+          !('resolveMap' in this) ||
+          !('asset' in this) ||
+          opts.disableLiveDemo
+        )
+          return 'undefined';
         const context = Object.entries(demoDepsMap[this.id]).reduce(
           (acc, [key, specifier]) => ({
             ...acc,
@@ -245,7 +251,7 @@ export const demos = {
       renderRenderOpts: function renderRenderOpts(
         this: NonNullable<typeof demos>[0],
       ) {
-        if (!('renderOpts' in this)) {
+        if (!('renderOpts' in this) || opts.disableLiveDemo) {
           return 'undefined';
         }
         const renderOpts = this.renderOpts;