Help needed to bundle React components

[gsouf]

Hello

I'm doing a hook library that also needs to bundle components that can be used with the provided hooks.

So as soon as I add some jsx then it throws the following message:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (5:9)
3: 
4: export const Foo = () => {
5:   return <div></div>;
            ^
6: };

I'm not familiar with rollup and thus I'm not sure how to fix it. Can you help with configuring rollup properly to compile jsx?

Thanks

[Hermanya]

Did you import react?

[gsouf]

Yes that's the content of index.tsx:

import React from "react";

export const Foo = () => {
  return <div></div>;
};

[Hermanya]

That's odd, I thought it was supported. Try something like https://www.npmjs.com/package/rollup-plugin-jsx

[gsouf]

@Hermanya I made some testings, errors were differents, but I never could get typescript + jsx working together.
Because I don't really enjoy typescript then I just decided to get rid of it and went back to standard js with the babel plugin as you do in the default package.

Note that I still had to add jsx to resolve plugin:

    resolve({
      extensions: ['.jsx', '.js']
    }),

Thanks for your help