CODEWITHSUNDEEP
reactjsnext.jsstorybooklernamonorepo
Mauro
Mauro

Reputation: 85

How to use Storybook components (and Lerna) in an external project done with Next.js?

I've just created my Storybook library of components (ES6 etc). It is structured as a Lerna project (all components isolated in the packages/ folder). However, that's a private repo with no real publish feature so, I think Lerna won't work with a private (free) account. I've pushed the storybook repo to my Bitbucket as it is.

Now, I'd like to use my storybook library of components from the main application which is a different repo (on Bitbucket) build on Next.js.

I was attempting to import the individual storybook components as follows

import MyComponent from 'storybook-repo/packages/my-component/my-component';

but it obviously doesn't work, returning this error:

Module parse failed: Unexpected token (8:9)
You may need an appropriate loader to handle this file type.

This, because MyComponent is a jsx file. I was hoping Next.js to transpile the imported modules but this is not the case.

My questions are:

  1. My guts say the import of the whole storybook as git+ssh://[email protected]/myusername/storybook-repo.git from package.json is not a good idea. Any better solutions?

  2. Is it true that Lerna works only for public/Pro repos where I can publish my packages?

  3. Why is Next.js not transpiling the imported jsx modules? At this point, how does this process work? Shall I transpile the storybook components from the remote repo or do the job from my main application?

Thanks

Upvotes: 3

Views: 3065

Answers (1)

LMulvey
LMulvey

Reputation: 1680

On my last project, we used Rollup.js to create a dist build of just the components we had developed in Storybook. Our components were located in src/components directory. We maintained an index.js for the components using an internal scaffolding tool. We published our dist folder as a privately scoped NPM package and then pulled in our components from there.

For local development, we used Webpack aliasing to check the current environment and either pull the published NPM package or pull directly from the storybook/dist folder that we were building to.

There's a great guide on building this here. Hope this points you in the right direction. As an alternative, I believe you can fiddle with next.config.js to override the Webpack config and make sure that your external imports get sucked up through the same Webpack, but, you also have to add a few rules to the .babelrc on the Storybook side to ensure that it gets ignored over there. We found it to be easier to just publish a package and bundle everything up.

Upvotes: 6

Related Questions