Unexpected token, You may need an appropriate loader to handle this file type.

[justinlazaro-ubidy]

Just created an npm package, and when i use it on my project created by create-react-app
got error, any thoughts?

Module parse failed: Unexpected token (8:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <section className="FullWidthLoading-section">
|         <Spin
|           delay={props.delay}

my npm package

class FullWidthLoading extends Component {
  render() {
   return (
    <section className="FullWidthLoading-section">
      <Spin
        delay={props.delay}
        indicator={props.indicator}
        size={props.size}
        spinning={props.spinning}
        tip={props.tip}
        wrapperClassName={props.wrapperClassName}
      >
        {props.children}
      </Spin>
    </section>
    )
  }
};

export default FullWidthLoading;

[threepointone]

you should ship compiled code in your npm package, not raw jsx, since babel/other loaders don't run on anything inside node_modules.

[justinlazaro-ubidy]

Solve, thanks.

 // Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            // include: paths.appSrc, remove to support reactjs in node_modules
            loader: require.resolve("babel-loader"),
            options: {
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true
            }
          }

[miraage]

Usually it is not a great idea to compile everything with babel since it will slow compilation time.

Almost all code you're using from node_modules has already been processed with babel so you don't need to do it.

I would suggest you to process your package code with Rollup to achieve smallest output possible and point main section to correct file. Also it is noteworthy to mention is how to organize exports in package in order to make tree-shaking work as efficient as possible.

[justinlazaro-ubidy]

Hi @miraage thanks for the info. Im doing a UI kit in react, or maybe i can do this?

include: {
paths.appSrc,
/node_modules/custom_ui_kit/
}

or i need to build my ui kit before publish in npm.

any tips? thanks.

[gaearon]

You need to compile code before publishing. People who use your library shouldn’t need to configure anything to use it.

Here’s a tool that you can use to do that: https://github.com/insin/nwb

[justinlazaro-ubidy]

Many thanks for the info @gaearon

[mileung]

I've published React Native packages with JSX no problem. Guess this is just a React thing?

[umeshShindepatil]

@threepointone or @justinlazaro-ubidy

Please can you share file path where i can put my changes for this issue

thanks