React - 我的 App.js 文件中出现意外的标识符错误。我不明白为啥
Posted
技术标签:
【中文标题】React - 我的 App.js 文件中出现意外的标识符错误。我不明白为啥【英文标题】:React - Unexpected Identifier error in my App.js file. I don't understand whyReact - 我的 App.js 文件中出现意外的标识符错误。我不明白为什么 【发布时间】:2019-09-19 07:16:14 【问题描述】:我正在学习如何使用 React、GraphQL 和 Apolo 构建应用程序的教程。我在启动应用程序(“node App.js”)时遇到了意外的标识符错误。这个错误似乎与“import React”有关,我不明白为什么。
另外,我正在使用“npm run dev”同时运行前端和后端并得到不同的错误。
我已尝试重新安装软件包。我已经分别启动了 server.js 和 App.js。服务器工作正常,但 App.js 不行(如上所述)。
这是错误:
_Tutorial_Follow-Alongs/GraphQL_React-Apollo_Tut_Follow/client/src/App.js:1
(function (exports, require, module, __filename, __dirname) import React, Component from 'react';
^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:73:7)
at createScript (vm.js:245:10)
at Object.runInThisContext (vm.js:297:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
EFs-MacBook-Pro:src ef$
这是我的 App.js 代码:
import React, Component from 'react';
import ApolloClient from 'apollo-boost';
import ApolloProvider from 'react-apollo';
import Launches from "./components/Launches"
import "./App.css";
import logo from "./assets/images/logo.png";
// With Apollo wrap the component in a provider and pass in a client
const client = new ApolloClient(
uri: "http://localhose:5000/graphql" //path to the one endpoint created using graphql in server.js
);
class App extends Component
render()
return (
<ApolloProvider client=client>
<div className="container">
<img
src=logo
style= width: 300, display: "block", margin: "auto"
/>
</div>
<Launches />
</ApolloProvider>
);
export default App;
这是并发使用时的错误,“npm run dev”
Failed to compile.
[1]
[1] ./node_modules/react-dev-utils/formatWebpackMessages.js
[1] Module not found: Can't resolve '/Users/ef/Documents/UCF CODING BOOTCAMP/UCF_Local/_PRACTICE/_Tutorial_Follow-Alongs/GraphQL_React-Apollo_Tut_Follow/client/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray' in '/Users/ef/Documents/UCF CODING BOOTCAMP/UCF_Local/_PRACTICE/_Tutorial_Follow-Alongs/GraphQL_React-Apollo_Tut_Follow/client/node_modules/react-dev-utils'
在这两种情况下,应用都不会运行。我完全被困住了。我会很感激任何帮助。谢谢。
【问题讨论】:
没有更多信息很难说,要使用导入语法,您需要使用 babel 转译您的代码,如果您使用 webpack,请发布您的 .babelrc 和 webpack.config 文件.或者给出课程 github repo 的链接。 感谢您的回复。这是我的报告:github.com/efinfl/GraphQL_React-Apollo_Tut_Follow 【参考方案1】:欢迎来到 ***。
出现此问题是因为您尝试使用 node
执行适用于浏览器的前端代码。
正如您在此示例中看到的那样,这不起作用:
代码将由您的服务器提供,并在浏览器中执行。
对于第二个错误,您似乎在 client
目录中使用 CRA,该目录有自己的 package.json
。所以你应该可以从根目录npm install --prefix client
来安装client
文件夹中的依赖项。
【讨论】:
非常感谢,马蒂。我很抱歉没有将我的回购公开。如果您不介意看一下,我已经更改了它。 啊,对不起。我错过了第二个错误。你在客户端目录中做了npm install
吗?我会克隆它,看看我是否无法调试发生了什么。
在运行npm install --prefix client
安装client/package.json
中指定的依赖项后,我能够让它在本地运行
由于某种原因,重新安装依赖项对我现有的本地文件不起作用。我不得不将我的 repo 克隆到一个新的本地目录中,并从根目录(npm install、npm install --prefix client.)安装依赖项,这很有效。非常感谢您花时间帮助我!
太棒了!乐意效劳。随意将我的答案标记为正确? 我将使用 npm install 命令更新它以供将来参考以上是关于React - 我的 App.js 文件中出现意外的标识符错误。我不明白为啥的主要内容,如果未能解决你的问题,请参考以下文章
React Jest 测试无法使用 ts-jest 运行 - 导入文件上出现意外令牌
编译我的应用程序时,我得到模块构建失败:SyntaxError:意外令牌