Question

在我的react js应用程序中，在webpack编译之后，它在控制台未显示的语法错误中显示错误：意外的令牌导入，它引用 bundle.js （输出文件）import React from 'react';中的行。

这是参考线及其相邻线。

    var replaceLocation = exports.replaceLocation = function replaceLocation(location, pathCoder, queryKey) {
      return updateLocation(location, pathCoder, queryKey, function (path) {
        if (getHashPath() !== path) replaceHashPath(path);
      });
    };
    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(3)))

/***/ }),
/* 282 */
/***/ (function(module, exports) {

    import React from 'react';
    import WatchableStore from 'watchable-store';
    import { CSSTransitionGroup } from 'react-transition-group';

    import './animate.css';
    import './styles.css';

我不知道发生了什么，我是新的反应......提前谢谢

Answer 1

错误指向import关键字。 ES6模块不能在浏览器环境中工作，因此您需要使用babel（babel-loader用于webpack）将ES6不支持的代码编译为ES5代码。

您需要设置至少包含以下预设的.babelrc文件：

{
  "presets": ["es2015", "react"]
}

然后在webpack.config中加载：

{
  test: /.jsx?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

以下是此主题的articles之一。你可以自己找到更多。

driven.js：30491 Uncaught SyntaxError：意外的令牌导入，它引用了反应js应用程序中的行？

1 个答案: