意外的令牌导入 - 使用反应和节点答案

【问题标题】：Unexpected token import - using react and node意外的令牌导入 - 使用反应和节点
【发布时间】：2017-06-01 22:32:08
【问题描述】：

我在运行我的 react 应用时遇到错误：Uncaught SyntaxError: Unexpected token import

我知道这里有很多类似的问题，但我认为我的问题有点不同。首先，这里是存储库，因为我不确定错误到底在哪里：repo

我正在使用 create-react-app，并在一个单独的后端目录中使用 babel（带有一个包含预设 es2015 的 .babelrc 文件）。该应用程序运行良好，直到我在后端文件夹 (/backend/shared/validations/signup.js) 的新目录中添加了另一个文件。
在那之前我也使用过 es6，它工作得非常好。首先我认为这是 Windows 的一些问题，但我在我的 Ubuntu 笔记本电脑上克隆了 repo，我在那里遇到了同样的错误。

我已经尝试过的一些事情：

将整个文件夹从 /backend 移动到根文件夹
仅将文件 (signup.js) 移动到几乎所有位置

所以无论文件在哪里，错误都是一样的。如果我删除整个文件以及对它的所有引用，则该应用程序将再次运行。

我认为这个错误很奇怪，考虑到我在应用程序的其他任何地方都使用 es6 没有问题。如果有人能帮我解决这个错误，那就太好了。

编辑：如果您想在您自己的机器上进行测试，只需克隆 repo 并在根文件夹中运行 npm start（以及在后端文件夹中运行 npm start，但这不是应用程序运行所必需的，或显示错误）。

【问题讨论】：

错误发生在哪个文件和行？
第 1 行的文件 signup.js 中出现错误

标签： node.js reactjs ecmascript-6 babeljs

【解决方案1】：

这就是正在发生的事情：

您的 webpack 设置为仅在 src 文件夹中运行 babel loader（include 指令）。

要改变这一点，一种方法是：

1) 使用npm run eject 提取webpack 配置（不知道是否有其他方法可以覆盖react-create-app 中的设置）。来自文档：

运行 npm runeject 复制所有配置文件和传递依赖（Webpack、Babel、ESLint 等）直接进入你的项目，因此您可以完全控制它们。

2) 在config/paths.js 中，添加一个appShared 键，如下所示：

module.exports = {
  /* ... */
  appSrc: resolveApp('src'),
  appShared: resolveApp('backend/shared'),
  /* ... */
};

3)在config/webpack.config.dev.js中，添加babel loader的路径，像这样：

{
  test: /\.(js|jsx)$/,
  include: [ paths.appSrc, paths.appShared ],
  loader: 'babel',
  /* ... */
},

现在可以了！

【讨论】：