How to npm-link other project

386 Views Asked by At

I'm trying to write a library module, which in the end is supposed to be imported by other modules, just like material-ui or react-query.

My current setup is like this:

myRoot
  |-- lib
  |        |-- src
  |        |-- config-overwrides.js   (I'm using react-app-rewired, but I think it's not relevant)
  |        |-- package.json
  |        |-- ... other stuff
  |-- consumer
  |        |-- src
  |        |-- package.json
  |        |-- ... other stuff

Please note that consumer is now a single app, but lib is suppsed to be used by more than just one other app.

Currently, for the sake of example, both are just a "Hello, World!", and I'm trying to get the line import myLib from 'lib' to work inside of consumer/src/App.jsx.

What I get is:

SyntaxError: C:\Users\...\lib\src\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:3):

   5 | function MountApp(element) {
   6 |  ReactDOM.render(
>  7 |          <React.StrictMode>
     |          ^
   8 |                  <App />
   9 |          </React.StrictMode>,
  10 |          element

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

I have tried:

  • to look how it is done in create-react-library, but they use in their example applications package.json a direct referece to the surrounding projects. See here. This means that my application can include only one of those libraries, which kinda defeats the idea of having a module.

  • using npm link, but ran into the same issues that are described here. The above description is actually me trying to replicate his way. It's the closes I got to something working.

  • tinkering with the webpack configs, and having react as peerDependency or devDependency, with no real luck. But I don't really have knowledge about that, so it was more a trial-and-error while hoping it works by chance or gives a good error message.

What I really want:

Just a way to have a library, which I can include at will via import myStuff from 'myLibrary', without pushing it to npm (company policy prevents that).

1

There are 1 best solutions below

1
On

It would be nice to be able to see more info on this error, but may I suggest you use Verdaccio? npm link should work just fine, but if you really want to make an emulation of npm, you can make a local private npm with verdaccio and install that package to each of the projects you need. The only thing is that you will need to configure npm to look first in verdaccio.