Shared library from Create React App projects giving (jsx isn't currently enabled error)

0
votes

I'm attempting to use a shared library for reusable components and using just 2 out of the box Create react apps. One is called 'shared-lib' the other 'project-example'. I made a super simple component in shared-lib, exported (working when I test). I NPM linked both seemingly correctly (shared-lib is in my project-example node_modules with a special icon). I built the shared-lib, I also imported the shared component (SharedComponent)

import SharedComponent from 'shared-lib'; <- lib is in my node_modules

../shared-lib/src/index.js SyntaxError: /Users/bemker/dev/portals-modern/shared-lib/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:3):

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

I'm following a vid tutorial and he didn't have to eject his create react app, but I'm guessing this is where the error is coming from.

Here is the vid I'm following if anyone wants to take a look. https://www.youtube.com/watch?v=B7iYJT_ll-U

Anyone know why this is occurring, or how to get past it (preferably without ejecting)?

1
shared-librariescreate-react-appnpm-link

1 Answers

0
votes

I couldn't find a solution using the above, but there is a package similar to Create React App for building libraries that made it pretty easy. Its not maintained by FB, but it worked for me.

https://github.com/transitive-bullshit/create-react-library https://github.com/transitive-bullshit/react-modern-library-boilerplate (multiple exports)

vid tutorial using it: https://www.youtube.com/watch?v=N8d-CLmg3hw second w/ 'real' usage: https://www.youtube.com/watch?v=6R699AQYH74

Hope this helps someone.