繁体   English   中英

SyntaxError:从 IntellijIDEA 启动 NodeJS 时不能在模块外使用 import 语句

[英]SyntaxError: Cannot use import statement outside a module when start NodeJS from IntellijIDEA

我尝试通过 react js 创建 hello world 应用程序。 我在 IntelliJ IDEA 中创建了 NodeJS 应用程序。 创建一个 helloworld.js 文件。 并将此代码添加到此文件中

import React from 'react';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

向 package.json 添加了 react-dom 依赖项。 制作了 npm install 命令。 开始申请

{
  "name": "testjsapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react-dom": "^16.12.0"
  }
}

错误:

"C:\Program Files\nodejs\node.exe" D:\projects\testjsapp\hello\helloworld.js
D:\projects\testjsapp\hello\helloworld.js:2
import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:891:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11

Process finished with exit code 1

您正在尝试在 Node.js 中执行 React 程序,但它被设计为在 Web 浏览器中运行。 Node.js 中没有 DOM 供您操作。 那是行不通的。

由于您正在运行的程序使用 JSX,因此您需要先对其进行转译,然后它才能在那里工作。

回到教程 关于设置本地开发环境的部分提供了一种启动和运行的方法,或者您可以查看一系列可供选择的工具链

检查您当前的版本

节点 -v

将您的节点版本更新到最新的 13.X

更新 nodejs

并执行以创建 React App

npx create-react-app my-app
cd my-app
npm start

参考创建反应应用程序

并交叉检查您现有的应用程序,如果需要

如果您既不想使用create-react-app也不想设置 webpack 和其他工具,我建议您从一个简单的 HTML 页面开始,其中包含指向babel-standalone和所需库的链接,请参阅https://reactjs.org/docs/add -react-to-a-website.html#quickly-try-jsx

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>

  <div id="root"></div>
  <script type="text/babel">

    function Hello(props) {
      const [name, setName] = React.useState(props.name);
      return (
        <h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
          Hello {name}
        </h1>
      );
    }
    ReactDOM.render(
      <Hello name='World'/>,
      document.getElementById('root'),
    );
  </script>
</body>
</html>

创建一个空项目,添加一个新的 HTML 文件,将上面的内容粘贴到其中,然后右键单击该文件并从其右键单击菜单中选择RunDebug以在浏览器中打开应用程序

更换您的线路

import React from 'react';

有了这个

const React = require("react")

好吧,我遇到了同样的问题,我意识到我做的事情不对。 首先,一旦您已经使用 react-create-app 创建了一个反应应用程序并且您关闭了项目或运行另一个项目文件夹,如果您想再次启动该项目请确保文件夹路径正确,然后只需在终端中键入 npm start 即可解决这个问题。

我遇到这个问题是因为我从客户client导入了一个模块到server文件夹。 虽然没有使用这个模块,但是这种导入好像是被禁止的,

在你的 Reactapp 中已经有名为 Src 的文件夹 --> 转到那个 Src 目录并用你的代码替换 App.js 然后返回到 ReactApp 目录并运行代码 npm start ..它对我有用..

对我来说,当我传递一个参数来即时转换导入时它起作用了,如下所示 -

// transpile imports on the fly
require("@babel/register")({
    ignore: [/(node_modules)/],
    presets: ["@babel/preset-env", "@babel/preset-react"],
});

另外,我在服务器端的 package.json 所在的文件夹中有一个 babel.config.js。

module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-async-to-generator",
    "@babel/transform-arrow-functions",
    "@babel/proposal-object-rest-spread",
    "@babel/proposal-class-properties",
],

};

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM