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.