Синтаксическая ошибка: поддержка экспериментального синтаксиса jsx в настоящее время не включена.

Я не могу использовать созданный мной пакет компонентов npm. Я успешно опубликовал пакет, но когда я использую его в новом коде, он показывает эту ошибку SyntaxError: /home/trinendra/Desktop/react-test/node_modules/iconbox1/index.js: Поддержка экспериментального синтаксиса 'jsx' в настоящее время не включен (6:17)

Имя моего пакета: iconbox1

Код моего пакета npm находится здесь:

import React,{Component} from "react"

class Welcome extends Component{
    render(){
        return (
                <input type="text" placeholder="Your name"></input>
        )
    }
}

module.exports.Welcome = Welcome;

И я использую его здесь, в своем основном приложении:

import logo from './logo.svg';
import './App.css';
import {Welcome} from "iconbox1"


function App() {
  return (
    <div className="App">
      <Welcome></Welcome>
    </div>
  );
}

export default App;

введите здесь описание изображения


reactjs npm-publish
person Trinendra    schedule 07.12.2020    source источник
comment
Можете ли вы поделиться package.json вашего пакета.   -  person Yilmaz    schedule 22.12.2020

Ответы (2)


arrow_upward
0
arrow_downward

Было бы неплохо не смешивать ES5 и ES6. Это могло произойти из-за того, как вы экспортируете свой компонент.

  • В вашем компоненте приложения отсутствует функция render () {}.
  • Попробуйте экспортировать компонент приветствия с помощью экспорта {Добро пожаловать} или экспортировать приветствие по умолчанию, но не забудьте удалить скобки вокруг приветствия в компоненте приложения, если вы используете второй вариант.
person Noah Kanyo    schedule 07.12.2020
comment
вам не нужен метод рендеринга в функциональных компонентах. - person Roj; 07.12.2020
comment
Я внес изменения, но все равно выдает ту же ошибку - person Trinendra; 07.12.2020
comment
Попробуйте изменить компонент приветствия на ‹Welcome /›, а не на ‹Welcome› ‹/Welcome› - person Noah Kanyo; 07.12.2020

arrow_upward
0
arrow_downward

Вы используете синтаксис ES6 и ES5 для импорта и экспорта.

Попробуйте вместо этого использовать этот код. Вот снимок экрана с результатами. Это работает для меня

Проверьте имя файла iconbox1 или нет

import React,{Component} from "react"

class Welcome extends Component{
    render(){
        return (
                <input type="text" placeholder="Your name"></input>
        )
    }
}

export default Welcome;

// import logo from './logo.svg';
import './App.css';
import Welcome from "./iconbox1"


function App() {
  return (
    <div className="App">
      <Welcome></Welcome>
    </div>
  );
}

export default App;
person Yash Chaudhari    schedule 07.12.2020
comment
Я внес изменения, но все равно выдает ту же ошибку - person Trinendra; 07.12.2020