Webpack 热重载失败，并显示“意外的令牌 '['预期在类主体的开头打开 '{'”

问题描述

我将此 Boilerplate 与 React、Webpack、Babel 和热重载一起使用。 一切正常，直到我尝试添加 Chakra-UI

现在，加载失败，因为热重载无法导入 Chakra-UI 的导入之一。 SyntaxError: Unexpected token '['. Expected opening '{' at the start of a class body. 是我得到的错误。

我相信这是导致错误的文件：

import { createMotionComponent } from '../../motion/index.js';
import { Drag } from '../../motion/features/drag.js';
import { Gestures } from '../../motion/features/gestures.js';
import { Exit } from '../../motion/features/exit.js';
import { Animation } from '../../motion/features/animation.js';
import { AnimateLayout } from '../../motion/features/layout/Animate.js';
import { MeasureLayout } from '../../motion/features/layout/Measure.js';
import { createDomMotionConfig } from './utils/create-config.js';
import { createMotionProxy } from './motion-proxy.js';

var allMotionFeatures = [
    MeasureLayout,Animation,Drag,Gestures,Exit,AnimateLayout,];
/**
 * HTML & SVG components,optimised for use with gestures and animation. These can be used as
 * drop-in replacements for any HTML & SVG component,all CSS & SVG properties are supported.
 *
 * @public
 */
var motion = /*@__PURE__*/ createMotionProxy(allMotionFeatures);
/**
 * Create a DOM `motion` component with the provided string. This is primarily intended
 * as a full alternative to `motion` for consumers who have to support environments that don't
 * support `Proxy`.
 *
 * ```javascript
 * import { createDomMotionComponent } from "framer-motion"
 *
 * const motion = {
 *   div: createDomMotionComponent('div')
 * }
 * ```
 *
 * @public
 */
function createDomMotionComponent(key) {
    return createMotionComponent(createDomMotionConfig(allMotionFeatures,key,false));
}

export { createDomMotionComponent,motion };

但是，当我从 Webpack 配置中删除“HotModuleReplacementPlugin”以禁用热重载时，一切正常。是不是我遗漏了什么（也许是一个 babel 插件做了一些奇怪的事情？）或者我在 react-hot-loader 中遇到了一个错误？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）