javascript - 未捕获的语法错误 : Unexpected identifier when trying to import React-6ren

javascript - 未捕获的语法错误 : Unexpected identifier when trying to import React

转载作者：行者123 更新时间：2023-12-01 01:41:49

26

4

我有一个简单的 React 组件，我正在尝试将其合并到网页中。该组件如下所示(在文件 like_button.js 中)。我正在使用 babel v6.4.1 编译这个 JSX。

'use strict';

import React, {Component} from 'react';

const e = React.createElement;

class LikeButton extends Component {
    constructor(props) {
        super(props);
        this.state = { liked: false };
    }

    render() {
        if (this.state.liked) {
            return 'You liked this.';
        }

        return (
            <button onClick={() => this.setState({ liked: true })}>
                Like
            </button>
        );
    }
}

const frmReg = document.querySelector('#frmReg');
ReactDOM.render(e(LikeButton), frmReg)

我尝试使用它的 HTML 页面 (index.php) 如下所示。

<html>
<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- Load our React component. -->
</head>
<body>
    <div id="frmReg"></div>
</body>
<!-- <script src="assets/js/like_button.js"></script> -->
<script src="assets/js/admincomponent.js"></script>
</html>

我的 package.json 文件如下所示。

{
  "name": "react_dt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.9.0",
    "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

还包含了 .babelrc 包含在项目根目录中，如下所示。

{
    presets: ["es2015", "react"],
    plugins: ["transform-es2015-modules-amd"]
}

但是，当我尝试在浏览器中运行它时，我在页面中看不到任何东西。此外，在开发工具控制台中，我遇到错误 Uncaught SyntaxError: Unexpectedidentifier，其中突出显示了 import React, { Component } from 'react'; 语句。

我在没有导入语句的情况下尝试了相同的操作，并且让它完美地工作。所以基本上它可以归结为导入问题。经过研究，我发现这是从 ES5 到 ES6(ES2015) 的问题。此外，我在同一个问题上发现了大约 5 个奇怪的问题，但他们的解决方案都没有帮助我找到解决方案。

出了什么问题？为什么它不让我导入？

最佳答案

请安装react和react-dom包。当您导入包时，意味着包已安装在 node_modules 中。它将在 node_modules 文件夹中搜索包，如果找不到则显示错误。

您是否使用 babel 编译 javascript 文件？请在项目中使用babel编译的javascript。您可以使用babel-node用于将 javascript 编译为 es5

关于javascript - 未捕获的语法错误 : Unexpected identifier when trying to import React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52329868/

26

4

0

文章推荐： Python + MongoDB，如何动态选择DB Collection

文章推荐： javascript - Reactjs - 导入的组件不渲染

文章推荐： Python编程-修改字典中的列表项

文章推荐： javascript - 无法在 v-for 选择菜单中渲染数组项

scala - 为什么可以将 Try[Try[Unit]] 值分配给 Try[Unit]？
我刚刚遇到了一个非常奇怪的行为。这是代码: // So far everything's fine val x: Try[Try[Unit]] = Try(Try{}) x: scala.util.T
ruby-on-rails - 更好的替代方法 try( :output). try( :data). try( :name)?
“输出”是一个序列化的 OpenStruct。定义标题 try(:output).try(:data).try(:title) 结束什么会更好？ :) 最佳答案或者只是这样: def title
scala 模式匹配 (Try,Try)
我有以下元组 - (t1,t2) :(Try,Try) 我想检查两者是否成功或其中之一是否失败，但避免代码重复。像这样的东西: (t1,t2) match { case (Success(v1),Su
java - 是否必须将内部 try-with-resources 放入内部 try-with-resources 或其中一个 try-with-resources 中的所有内容都将自动关闭？
是否必须放置内部 try-with-resources 或其中一个 try-with-resources 中的所有内容都会自动关闭？ try (BasicDataSource ds = Bas
java - grails: try 抛出意外的标记: try:
有一点特殊，尝试创建一段 try catch 代码来处理 GoogleTokenResponse，但编译器在 try 时抛出异常错误。有什么想法吗？错误信息: | Loading Grails 2.
try-catch - try ... catch ... [finally] 是如何工作的？
它几乎可以在所有语言中找到，而且我大部分时间都在使用它。我不知道它是内部的，不知道它是如何真正起作用的。它如何在任何语言的运行时在 native 级别工作？例如:如果在 try 内部发生 sta
java - try catch 与 try-with-resources
为什么在 readFile2() 中我需要捕获 FileNotFoundException 以及稍后由 close( ) 方法，并且在 try-with-resources(inside readfi
java - 有没有办法可以制作一个 try-try-catch block ？
我正在使用 Apache POI 尝试读取 Word 文件，但即使您使用过 Apache POI，这仍然应该是可以回答的。在 HWPF.extractor 包中有两个对象:WordExtractor
try-catch - try catch finally 执行流程
如果try-catch的catch block 中抛出异常，那么finally block 会被调用吗？ try { //some thing which throws error } cat
java - Try With Resources 与 Try-Catch
这个问题已经有答案了: What's the purpose of try-with-resources statements? (7 个回答) 已关闭 3 年前。我一直在查看代码，并且已经看到了对
java - Try With Resources 与 Try-Catch
这个问题已经有答案了: What's the purpose of try-with-resources statements? (7 个回答) 已关闭 3 年前。我一直在查看代码，并且已经看到了对
perl - Try::Tiny:try-catch 的奇怪行为与否？
我正在使用 Try::Tiny尝试捕捉。代码如下: use Try::Tiny; try { print "In try"; wrongsubroutine(); # undefi
c++ - try-catch 在 try 中检查多个对象
我想知道这样的代码是否会在抛出异常后总是中断而不继续运行，因此代码不会继续执行第二个 temp.dodaj(b)。 Avto *a = new Avto("lambo",4); Avt
Java 7 try-with-resources - try 子句中可以包含什么
我知道在try子句中必须有一个与资源关联的变量声明。但是除了被分配一个通常的资源实例化之外，它是否可以被分配一个已经存在的资源，例如: public String getAsString(HttpS
java - try-catch 语句在捕获异常时不返回 try block
我有一个写的方法。此方法仅扫描用户输入的整数输入。如果用户输入一个字符值，它将抛出一个输入不匹配异常，这是在我的 Try-Catch 语句中处理的。问题是，如果用户输入任何不是数字的东西，然后抛出异常
java - 为什么不能在 try-with-resources try 子句中重用引用变量？
我注意到这不会编译: PrintWriter printWriter = new PrintWriter("test.txt"); printWriter.append('a'); printWrit
Python:将 try 代码与 try 语句放在同一行有什么好处吗？
我经常看到人们写这样的代码: try: some_function() except: print 'something' 当我认为这样做更干净时: try: some_functio
objective-c - iOS 方向 : Tried this and tried that
该应用程序将在第二个显示器上正常显示内容。问题是当我旋转 iPad 时内容不会在 iPad 上旋转。看过: http://developer.apple.com/library/ios/#qa/qa
java - 我的 try 语句之后的所有内容都必须包含在该 try 语句中才能访问其中的变量吗？
我正在学习 java，我发现我不喜欢的一件事通常是当我有这样的代码时: import java.util.*; import java.io.*; public class GraphProblem
c++ - TRY/CATCH_ALL 与 try/catch
我使用 C++ 有一段时间了，对普通的 try/catch 很熟悉。但是，我现在发现自己在 Windows 上，在 VisualStudio 中编码以进行 COM 开发。代码的几个部分使用了如下内容:

首页

博学

6Ren·AI

商城

javascript - 未捕获的语法错误 : Unexpected identifier when trying to import React