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

Question

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

Melloney

can you share the package.json of your package. – Solidarity

Answer 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

Coil

you don't need render method in functional components. – Divulsion

I have done the changes but still it is giving the same error – Melloney

Try changing the welcome component to <Welcome /> rather than <Welcome></Welcome> – Coil

Answer 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;

Japhetic

I have done the changes but still it is giving the same error – Melloney