Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Next.js / General

Getting Next.js to see shared code in Yarn Monorepo?

Getting Next.js to see shared code in Yarn Monorepo?

Next.js/General · August 8, 2018 at 11:10pm

Getting Next.js to see shared code in Yarn Monorepo?

Next.js / General · August 8, 2018 at 11:10pm
I am currently unable to get my Next.js application inside of my Yarn monorepo to see shared code. Is there any steps I should be taking, such as my config, to get everything linked up? Thanks a ton for your time.

August 9, 2018 at 7:35am

Can you elaborate a bit more on the project structure? The next.js app is one package of multiple? Where is the shared code you're trying to access? In another package?

  • reply
  • like

August 9, 2018 at 8:45am

@clayh - we managed to get yarn workspace packages set up for our repository - would you be able to share your code somewhere? I can help out if I can!

  • reply
  • like

August 9, 2018 at 9:51am

August 9, 2018 at 6:02pm

@stevenlangbroek @josephluck

Thanks for the replies! I'm actually starting several Next.js apps from scratch concurrently. I have these each as their own package. I also have another package that is going to be a React component library. I have been able to properly hook up the component library to create-react-app projects just from Googling, but am at a loss on how to wire Next.js apps.

Monorepo structure might look something like:

packages

-NextJSProj1

-NextJSProj2

-ComponentLib

  • reply
  • like

August 9, 2018 at 10:56pm

I'm largely doing something like this: https://medium.com/viewstools/how-to-use-yarn-workspaces-with-create-react-app-and-create-react-native-app-expo-to-share-common-ea27bc4bad62

But instead of CRA/CRNA, I was hoping to have a Next.js project that can also share components with other applications.

  • reply
  • like

August 10, 2018 at 7:23am

@stevenlangbroek @josephluck

Thanks for the replies! I'm actually starting several Next.js apps from scratch concurrently. I have these each as their own package. I also have another package that is going to be a React component library. I have been able to properly hook up the component library to create-react-app projects just from Googling, but am at a loss on how to wire Next.js apps.

Monorepo structure might look something like:

packages

-NextJSProj1

-NextJSProj2

-ComponentLib

You can use this plugin! https://github.com/wellcometrust/next-plugin-transpile-modules

I'm using it in a monorepo structure, and it's matches the structure you provided above, and it did works!

Let me know if it does work for you too :)

  • reply
  • like

August 10, 2018 at 9:34am

@clayh I've spent a lot of time setting up something exactly like this but with pnpm. I'd love to show you, just have to clean it up a bit first.

  • reply
  • like

August 10, 2018 at 11:20am

@clayh

One important thing to know is, you have to put a .babelrc in the shared folder too

  • reply
  • like

@clayh I've spent a lot of time setting up something exactly like this but with pnpm. I'd love to show you, just have to clean it up a bit first.

Which Next version it was? Since v5 with plugins it's less bit of a pain :)

  • reply
  • like

August 10, 2018 at 4:06pm

@morajabi I am on 6 unfortunately. Is there possibly example code I would be able to peek at? I'm a little bit at a loss for how to get this all going! Thanks!

  • reply
  • like

August 14, 2018 at 12:55pm

Since v5, includes 6 as well!

  • reply
  • like

December 17, 2018 at 11:17pm

hi @clayh, were you able to get this working?

  • reply
  • like

December 18, 2018 at 9:43am

Hey all, since Next uses a newer version of babel, the root level `.babelrc` no longer works. Instead, you need to add a root level `babel.config.js` file and use a next.js plugin to have next's babel-loader resolve the shared config file:

https://github.com/josephluck/next-plugin-custom-babel-config

Let me know how you get on and if I can help at all.

  • reply
  • like

December 18, 2018 at 7:23pm

thanks @josephluck. Do you know if this Next examples, solves the problem as well? https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces

  • reply
  • like

December 23, 2018 at 11:41am

Yes, however you won't be able to use a custom babel config with that example (the default next-babel-loader will be used). I'm working on the post that explains how a yarn monorepo, typescript and custom babel config works.

  • reply
  • like

December 24, 2018 at 10:11am

As well, the above example doesn't hot-reload (something I'm still figuring out how to get working with yarn workspaces!)

  • reply
  • like

December 29, 2018 at 6:38pm

As promised, I've written a blog post explaining how to set up a Next.js monorepo with TypeScript and custom Babel config:

https://josephluck.co.uk/blog/next-typescript-monorepo/

If you prefer to see some code, I've also set up an example repo here:

https://github.com/josephluck/next-typescript-monorepo

  • reply
  • like

Log in or sign up to chat