Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled

问题

I am unable to use my npm component package that i have created. I have published the package successfully but when i am using it in a fresh code it is showing this error "SyntaxError: /home/trinendra/Desktop/react-test/node_modules/iconbox1/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:17)"

My package name:"iconbox1"

My npm package code is here:

import React,{Component} from "react"

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

module.exports.Welcome = Welcome;

And i am using it here in my main app:

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


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

export default App;

enter image description here

回答1:

Might be good not to mix ES5 and ES6. This might be happening because of the way you are exporting your Component.

There is a render(){} function missing in your App component.
Try exporting Your welcome component using export {Welcome} or export default Welcome, but make sure to remove the brackets around welcome in your app component if you are using the second option

回答2:

You are using both ES6 and ES5 syntax for importing and exporting.

Try this code instead Here's a Screenshot of the output. It's working for me

Check the name of the file is iconbox1 or not

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;

来源：https://stackoverflow.com/questions/65176364/syntax-error-support-for-the-experimental-syntax-jsx-isnt-currently-enabled

标签

reactjs

npm-publish