Babel не может скомпилировать простой JSX для функции render () в React - Использование кода Visual Studio - PullRequest
Новая
       16

Babel не может скомпилировать простой JSX для функции render () в React - Использование кода Visual Studio

0 голосов
/ 04 ноября 2018

Я пытаюсь скомпилировать app.js файл 

import React from 'react';
import ReactDOM from 'react-dom';

console.log('test');

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

Я использую код Visual Studio, и мой package.json: 

    {
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^6.1.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d compiled"
  },
  "author": "",
  "license": "ISC"
}

При запуске npm run build я получаю:

SyntaxError: Неожиданный токен (24: 4) для <h1>Hello, world!</h1>

мой .babelrc файл 

{
    "presets": [
        "@babel/preset-env"        
    ]
}

Уточнение: Я не использую Webpack.

https://babeljs.io/repl правильно компилирует код, поэтому я почти уверен, что в самом коде нет ничего плохого. Не стесняйтесь просмотреть его в любом случае.

Можете ли вы определить ошибку? Любая зависимость отсутствует или не нужна? Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Для всеобщей информации я нашел ответ. .babelrc должно быть 

{
    "presets": [
        "@babel/react"        
    ]
}
0 голосов
/ 04 ноября 2018

Какое расширение файла вы используете при создании файла jsx? Я почти уверен, что вы сделали [имя файла] .jsx вместо [имя файла] .js

Вы можете использовать это расширение, но вам нужно добавить его в конфигурацию вашего веб-пакета

Webpack Config: 

   {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['react', 'es2015']
        }
    }

если вы предпочитаете .babelrc, то 

{
  "presets": ["react", "es2015"],
}
...