Question

我正在尝试运行JSX代码，但出现此错误。我确实安装了 npm install -g babel-cli npm install-保存babel-preset-env babel-preset-react 但是我仍然遇到错误。

这是我的代码 index.html

 <html>
    <body>
        <div id="appRoot"></div>
        <script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
        <script src="scripts/app.js" type="text/jsx"></script>
    </body>
</html>

src / app.js -> JSX代码

console.log("App.js is running");

const appRoot = document.querySelector("#appRoot");
const template = <p>This is a JSX code!</p>;

ReactDOM.render(template, appRoot);

babel命令-> babel命令将JSX转换为ES5

babel src/app.js --out-file=public/scripts/app.js --preset=env,react -watch

错误

subhro@subhro-X550LD:~/React-Project$ babel src/app.js --out-file=public/scripts/app.js --preset=env,react -watch
SyntaxError: src/app.js: Unexpected token (4:17)
  2 | 
  3 | const appRoot = document.querySelector("#appRoot");
> 4 | const template = <p>This is a JSX code!</p>;
    |                  ^
  5 | 
  6 | ReactDOM.render(template, appRoot);

Answer 1

您有错字：

预设=>预设

babel src/app.js --out-file=public/scripts/app.js --presets=env,react -watch

Babel显示意外错误，找不到解决方法

1 个答案: