All Questions
204
questions
23
votes
1
answer
4k
views
Yarn workspace, react, monorepo issue with conflict library version
I'm experimenting with yarn workspace monorepo. It is consisting of a TestProject created with create-react-app, and a SharedLib1 which is created with create-react-library. TestProject imports code ...
- 4,289
22
votes
7
answers
16k
views
Global Type Declarations within a NX and NextJS monorepo
I've been looking around the web to try and find s nice solution to my problem but so far I have not.
I have a NX monorepo with NextJS and I am trying to create a global types/ folder that can be used ...
- 2,598
20
votes
0
answers
5k
views
Typescript pnpm monorepo, path aliases conflicts between local dependencies during build
I have a PNPM with TurbeRepo monorepo, used this template. In this monorepo I have a NextJS app that uses a ui-shared package (local shared code, not actually an npm package).
The ui-shared is made in ...
- 1,747
18
votes
2
answers
1k
views
Share codebase using common Sdk module in create react app Reactjs application
I want to start a new app that will have both web and reactnative interfaces.
I decided to move all business -non enviroment dependent- code into a third package -aka sdk- that i can share between ...
- 8,979
13
votes
4
answers
7k
views
Styled-jsx typescript error after migrating to monorepo structure. Property 'jsx' does not exist on type 'DetailedHTMLProps'
I am using styled-jsx in my project and I just migrated it to a monorepo structure, and since then I have been having the following problem:
Type '{ children: string; jsx: true; }' is not ...
- 1,301
12
votes
2
answers
9k
views
How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
I have a fun project made with create react app. I want to convert the same application to a browser extension. This idea forces me to make the project a mono repo. Because in both applications, I ...
- 628
8
votes
2
answers
6k
views
Can I have multiple babel.config.js in a monorepo?
I have a monorepo with the structure like below
babel.config.js
packages/
|---mobile/
|----package.json
|----src/index.js
|---desktop/
|----package.json
|----src/index.js
|---server/
...
- 726
8
votes
2
answers
1k
views
Mismatching React types in pnpm monorepo
i'm trying to convert an inherited monorepo from yarn+lerna to pnpm workspaces
i'm currently getting an error due to mismatching react versions, typescript isn't picking up on the @types/react version ...
- 123
8
votes
2
answers
10k
views
Jest: "Directory in the roots[0] option was not found"
I am trying to set up monorepo to run all of its Jest tests at once. In each package, I'm using react-app-rewired to get Babel to transpile code imported from other packages without ejecting from ...
- 1,334
7
votes
3
answers
7k
views
React-native, monorepo: Unable to resolve module @babel/runtime/helpers/interopRequireDefault
I've set up a react-native app as workspace in a monorepo. I did this because I want to share some react components I've created between my mobile and web apps.
The basic structure of my repo is:
...
- 4,654
7
votes
1
answer
5k
views
Resolving TypeScript dependencies in yarn workspaces
I'm currently trying to set up a React/TypeScript monorepo with two workspaces, @scope/project-lib and @scope/project-app. I have @scope/project-app's package.json importing @scope/project-lib: "*...
- 383
7
votes
1
answer
4k
views
How to import absolute paths in a @nrwl/nx monorepo?
I'm working on a @nrwl/nx monorepo. I want to import the folders inside the project src by the absolute paths. I tried specifying the baseUrl but didn't work. The only solution worked is, adding the ...
- 1,636
7
votes
1
answer
2k
views
"Error: Invalid hook call." when importing React component from shared component library in monorepo (turborepo & npm workspaces)
I've been setting up a monorepo with the goal of creating a shared component library to use for several different Next.js apps (following this example) but whenever I import a component from the ...
- 211
7
votes
0
answers
620
views
Deduplicating assets in a monorepo
My file structure is as follows:
- packages
- app1
- node_modules
- shared
- public
- svg1
- src/pages
- app2
- node_modules
...
- 2,766
6
votes
2
answers
3k
views
Can't resolve 'fs' in firebase-admin/lib' when using nextjs monorepo project with lerna
I have a Lerna MonoRepo project setup.
Like
root/
lerna.json
packgae.json
package.lock.json
packages/
app1 - Create react app (with firebase sdk dependency)
app2 - Next Js ...
- 161
6
votes
1
answer
2k
views
Folder hierarchy in packages - Turbo/Monorepo
Many articles and tutorials teach how to share components in monorepo projects.
But they show something in an unproductive way.
Share each component (package1, package2) separately in workspace. What ...
- 691
6
votes
0
answers
1k
views
Wrong dependency is getting picked up in monorepo and with yarn workspaces
We just started to use monorepo and yarn workspaces for two of our main projects. One is originally built on Angular 11 and another is in React.
We set up yarn workspaces, and on one project (Angular) ...
- 2,557
5
votes
3
answers
7k
views
Nx shared asset library
I want my React app in my Nx monorepo to retrieve all the assets in my asset library called common-assets.
I managed to do it with my NextJS app like so :
project.json of my NextJS app
{
"$...
5
votes
0
answers
740
views
How to use two different React versions in a monorepo with Turborepo and avoid conflicts?
I'm creating a monorepo using Turborepo and have two applications in my apps folder: app-x, which uses "react": "17.0.2", and app-y, which uses "react": "18.0.2"...
- 1,061
5
votes
0
answers
2k
views
Next.js multi zones with i18n and shared components
I am using Next.js' multi zone feature with a blog and web app so I can develop and deploy both apps independently. It was easy to set up by following their with zones example and I have set up a blog ...
- 1,264
5
votes
0
answers
241
views
When using a babel.config.js as well as specifying options in webpack babel loader, would it merge both or ignore babel.config.js?
Hypothetically, if someone puts configuration of babel in three files at the same time:
babel.config.js
babel key in package.json
babel loader options/query in webpack.config.js
Then which one of ...
- 55
5
votes
0
answers
306
views
Create-react-app monorepo use source map for local module
I created a monorepo with 2 modules. One is a create-react-app and the other is a package which contains shared components.
After importing a shared component the application starts without any ...
- 3,263
4
votes
1
answer
2k
views
Environmental variables in Turbo
I am trying to use an environmental variable defined in my local .env file in one of my turbo packages, but it always comes up as undefined. I am using Turbo to manage my monorepo. The app is build in ...
- 63
4
votes
1
answer
1k
views
Create a monorepo with ionic and react (and capacitor)
I understood that Ionic cannot handle 'yarn workspace' which build the project with react-app-rewired https://github.com/ionic-team/ionic-cli/issues/4430
As suggested in this post, I configure my ...
- 9,975
4
votes
1
answer
6k
views
How do you enable hot reloading in a Typescript monorepo with Lerna and Yarn Workspaces?
We use a full TypeScript mono repo with this structure:
project
| - packages
| - common
| - appsCommon
| - Next.js-App
| - React-Native-App
| - Google-Cloud-Functions
So far ...
- 3,207
4
votes
1
answer
2k
views
Monorepo with Expo and Multiple Entry Points
I have two Expo (React Native) apps that share most of their code and are already in production. We are trying to move them to a monorepo directory structure as follows:
lerna.json
package.json
...
4
votes
0
answers
180
views
How to use shared assets between react and react-native in nxWorkspace
I have a nxWorkspace with React, React-Native and Nodejs. I've create a shared assets library to use between React and React Native. I'm able to use it with React, but I have no idea how to use it in ...
- 2,450
4
votes
0
answers
2k
views
webpack 5 in a lerna monorepo loads files outside of the package
I have a fairly standard lerna monorepo setup, using yarn workspaces and TypeScript.
There are pacakge folders for various services and also the React frontend. I've been migrating the Webpack config ...
4
votes
0
answers
935
views
Self Hosted Font in material-ui theme component library not working
I'm building a component library to sit alongside some react apps within a monorepo, library is currently being consumed by app1 and displaying components exported from the library just fine.
The ...
- 41
4
votes
0
answers
898
views
Use babel, webpack, react in a mono repo setup without lerna or yarn
i'm trying to create a mono repo setup with webpack and babel to bundle multiple react apps that share some code. I would like to avoid lerna because of unnecessary overhead and unresolved problems ...
- 41
4
votes
0
answers
1k
views
Can I reuse React Context logic between packages in a monorepo?
I structure my code under a monorepo structure maintained with yarn workspaces. Looks roughly like this:
packages/
react-hooks/
foo-app/
bar-app/
Both foo-app and bar-app are React ...
- 20.2k
4
votes
1
answer
978
views
Lerna Monorepo keeping individual git repos as packages
In lerna, one can initialize git at the root level of the lerna project and inside the packages folder, we keep our small individual projects. Now suppose, you want to keep the git histories and ...
- 1,365
3
votes
1
answer
2k
views
Error when importing JSX files from another package in monorepo with React
I created a simple project to study monorepo. The example consists of three React applications, where one consists of a lib of components with the Storybook and the other two will import the ...
3
votes
1
answer
3k
views
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 ...
- 85
3
votes
1
answer
2k
views
How to structure monorepo for React SSR and API [closed]
I'm trying to understand best practices of structuring monorepos for NodeJS/React projects.
I need:
React SPA with server side rendering.
Backend with Express, MongoDB, mongoose modules etc.
...
- 20.3k
3
votes
1
answer
789
views
Modularizing the system independently - Micro Front-End or Monorepo (React)
Problem
Well, start with the problem at hand. Several systems support several functionalities, whether they are applications or pages, and most of them independently.
But for lack of planning, this ...
- 691
3
votes
1
answer
2k
views
Share redux state among workspaces or libraries inside a monorepo
I’m recently having a hard time to understand how to manage some logic between shared apps and libs, in particular with redux setted up in the main app and the need to use it on the shared-ui ...
- 422
3
votes
1
answer
1k
views
Someone tried to add service workers with NX.dev in React app?
A few months ago I started using monorepos and, specifically NX, in my work. What happens is that I need to start using service workers to add several things in my application (PWA, pusher, etc...) ...
3
votes
0
answers
1k
views
Cannot read property snapshot of undefined webpack storybook
I have created monorepo using yarn workspace which have two microfrontends app developed using webpack module federation and one ui lib application which has storybook also. When I am trying to run ...
- 85
3
votes
0
answers
1k
views
React Native App In Yarn Workspace Monorepo
I have an existing app built using react native v0.61.5 as well as a website built using React and Next.js. There's lots of configuration already built into both projects for CI/CD through GitLab and ...
- 311
3
votes
1
answer
2k
views
Nx workspace - Shared lib with tailwindcss and react
I struggled in setting this up, so I thought I would share my Knowledge.
Basically, I wanted to have a UI Kit / Component library with NX that could be shared with for example a webapp with react and ...
- 1,354
2
votes
2
answers
16k
views
How to serve Vite development server behind an Nginx reverse proxy
I'm working on a Typescript monorepo using turborepo that holds multiple microservices (nextjs, expressjs, create-react-app).
each of these microservices is served in its own PORT.
In order to make ...
2
votes
1
answer
2k
views
RTK Query Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
So this is the issue , im currently working on a monorepo application with different redux-toolkit versions , whenever i mix the versions the applications crash with the below issue, i do have the ...
2
votes
1
answer
11k
views
Jest TypeError: Cannot read properties of undefined (reading 'html') at new JSDOMEnvironment
I've setup a monorepo with Node.js and React.
Trying to configure jest to run test suites the api Node works fine but I got the following error on the client side:
FAIL client/src/App.test.tsx
● ...
2
votes
1
answer
2k
views
Babel config file not working in Lerna monorepo
I'm using Lerna to build a monorepo containing several React apps and some custom libraries (utils, UI React components, etc.).
Here's the structure of my monorepo so far:
packages
app1
app2
ui-...
- 1,722
2
votes
1
answer
1k
views
How to change the public directory of a next js application
I have a monorepo with the following architecture:
apps/
web/
- next.config.js
- pages/
public/
My next js application is in the apps/web/ folder. How do I change the next.config.js file so ...
- 3,570
2
votes
1
answer
1k
views
Can't set up absolute module imports in monorepo
I'm trying to set up absolute imports in react/typescript project, but can't find a solution for my case. Always get same error:
ERROR in ./src/app/App.tsx 18:14-37
Module not found: Error: Can't ...
- 41
2
votes
1
answer
1k
views
Unable to configure mobx in monorepo (using yarn workspaces)
I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here ...
- 1,485
2
votes
1
answer
1k
views
implementing monorepo for react and node js web application using lerna
i am trying to build a monorepo , which consist of a react and node js application so the frontEnd folder which is created using react app and backEnd folder which consist of all server code.
I have ...
- 8,909
2
votes
2
answers
2k
views
Setup react-i18next with NX Monorepo
I trying to set up i18next inside a monorepo using NX and Module Federation and I'm getting 404, I'm using i18next-http-backend to load the translations async.
I've tried to put public/locales/en/...
- 410