Webpack / реагировать / Babel не компилирует JSX - PullRequest
Новая
       11

Webpack / реагировать / Babel не компилирует JSX

0 голосов
/ 10 января 2019

Я знаю, что есть много похожих вопросов, но я не нашел решения, и некоторые из них старые, поэтому они не применяются.

Я создал среду Webpack для реагирования, но не компилирую синтаксис JSX.

Я использую: 

"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",

В моем babel.config.js у меня есть: 

  ...
  'presets': [
    [
      '@babel/preset-env',
      {
        'targets': {
          'chrome': 61,
        },
        'modules': false,
        'useBuiltIns': 'usage'
      },
      '@babel/preset-react'
    ]
  ],
  ...

Я могу скомпилировать код реакции следующим образом: 

import React from 'react'
import ReactDOM from 'react-dom'
require('./scss/main.scss')

const e = React.createElement

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

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

    return e(
      'button',
      {
        onClick: () => this.setState({
          liked: true
        })
      },
      'Like'
    )
  }
}

const domContainer = document.querySelector('#like_button_container')
ReactDOM.render(e(LikeButton), domContainer)

но когда я пытался использовать JSX 

const name = 'Name';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

он жалуется на < из h1

вот мой репо:

https://github.com/sebalaini/test

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Переместите @babel/preset-react за пределы вашей конфигурации для @babel/preset-env (переместите его за пределы массива), например: 

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

@babel/preset-react должен быть на том же уровне (верхний уровень для presets), что и ваш @babel/preset-env.

0 голосов
/ 10 января 2019

const element в вашем коде не является допустимым компонентом React. Вам необходимо вернуть функцию и всегда начинать имена компонентов с заглавной буквы. 

// Always import React at the top of the file!
import React from 'react';

function Person(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Person name="Name of the person" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Подробнее о компонентах здесь: https://reactjs.org/docs/components-and-props.html

...