problem publishing a package and installing it

Question

I created a simple package where it only has a <div> x </div> and published it with npm publish. Then I tried to install it in a project with npm i and it throws me this error: Support for the experimental syntax 'jsx' isn't currently enabled I tried to install @babel/preset-react, I set the babel.config.js like this

module.exports = {
   presets: ["@babel/env", "@babel/react"],
};

But I couldn't figure it out. PS: sorry for my bad english PS2: i created my app with npx create-react-app

Answer 1

There isn't really enough info / code in your question to solve your specific problem but my guess would be to check your loaders in webpack.config.js . You should have babel-loader installed and included as a rule in webpack config:

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }
  ]
}

Having said that, I found when I wanted to make my own package that starting with create-react-app didn't give enough control and came with a lot of bloat. I'd recommend starting with createapp.dev , where you can select what elements to include in your build and it will generate the boilerplate code. This example is probably enough to build a minimal react component package.

I recently wrote an article about my experiences making a simple-as-possible package, it might also help.