JSX -> JS dist-modules issue

[richieio]

Hi! I really like this project. I'm attempting to use it in an educational workshop tomorrow but I'm stuck.

I'm running I keep running into an issue where my dist-modules are attempting to require .jsx files, but the compiled files in dist-modules has .js extensions resulting in an error.

This is strange to me because the docs compile and run fine, and everything else is great. But when I install the package into another project such as create-react-app it results in the aforementioned errors with JS/JSX

Here are some screenshots

And here is a link to my test repo https://github.com/richattack/testjam

This is my first attempt at making an external component library. I've been debugging this issue for weeks not sure what the problem but I believe it to be a webpack or babel related issue.

Thanks!

Rich

[bebraw]

Can you give me some commands to run? Note that dist-modules is generated through Babel.

[bebraw]

FYI, I upgraded the boilerplate to webpack 2. That won't change your situation (I need more info) but it was good to do so you have something up to date for your workshop.

I don't know the exact topic but you can find my material online. Maybe there's something worthwhile.

[richieio]

That repo is a clone of react-component-boilerplate juat with no history

I ran

1. npm install
2. npm run dist
3. npm version

Then I yarn add file:../path-to-project/ It installs fine but when I import the file such as TestJam component I get the error seen in the first screenshot of the terminal that the file does not exist TestJam.jsx,

I tried with yarn as well. Dist-modules errors because it tries to require a jsx file that doesn't exist. It is a js file extension not jsx

What else can I do to help debug please let me know. Thank you for your assistance so quickly

[bebraw]

I wonder if it would make sense to drop .jsx from the boilerplate entirely... Then we would have one less place that could break. It's a simple change and I can definitely do it if you want.

[richieio]

Yes please! that would probably fix it. I understand it is a useful linting rule but not if it breaks 😂

[bebraw]

Ok, I dropped the JSX bit. I hope that helps. You probably have to fork again etc. to get the newest tweaks.

[richieio]

Thanks! That works perfectly. Just tested it. I will check out your presentations too. The topic is around developer workflow, component libraries and rapid prototyping. Thank you so much again. I will follow up later to tell you how the workshop goes.

[bebraw]

Ok, cool. Especially the webpack book might have relevant content.

Feel free to reach out at gitter.