Home
Support Forums

Monorepo support not working

Hi,

I’m trying to get an app in my monorepo to deploy, and it’s not working. I’m following the directions in Build from a subdirectory or monorepo | Netlify Docs, which I saw in an email I received yesterday (“Monorepo support” in the subject line).

When I do it the recommended way (path to package – packages/chess-game – as base directory), I get this error in the deploy log: “Cannot find module: ‘components’. Make sure this package is installed.” Components is a sibling to my app in the monorepo’s packages directory. Doing the build the same way locally on my machine works fine.

When I use the root as the base directory, and use “cd packages/chess-game && yarn build” as the build command, I get the same results.

When I use the root as the base directory, and use “cd packages/chess-game && yarn add components && yarn build” then I don’t get the error, but when I load the app, I get a blank page.

My repo on github is here: GitHub - colindavey/chess-monorepo.

Hi @colindavey,

I could get it working: https://competent-galileo-968a78.netlify.app.

Here’s the setup I used:

  1. From ./packages/chess-game/package.json, copy all dependencies to ./package.json (the one in the root). This will tell Netlify to download all dependencies. This was the step missing when you used the cd packages... attempt.

  2. Change your build command to cd ./packages/chess-game/ && CI= npm run build (or the yarn equivalent).

  3. Configure your publish path to be: ./packages/chess-game/build/.

Note, base path should be an empty string.

1 Like

Thanks @hrishikesh! Just to clarify, you don’t modify ./packages/chess-game/package.json? only the one in the root? And just to be sure, can you copy the modified package.json here?

Also, might I suggest adding this info to Build from a subdirectory or monorepo | Netlify Docs?, as my original setup was based on looking at numerous tutorials that do it the way I did it. So other folks might have the same problem.

Honestly, it can be deleted as it’s not going to be of use in this setup.

Yeah, here you go:

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "chess.js": "^0.11.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "components": "*"
  },
  "workspaces": [
    "packages/*"
  ]
}

I think I’d give this one a try too as I don’t see a reason why the module should not be found. But yeah, you could use the setup as I described above and it should work.

Hmm, this is strange, so I used your initial config of setting the correct base directory and yes, it failed with the same error, but then, I modified "components": "*" to "components": "0.1.0" and it worked fine. Would you try that?

The entire file looks like:

{
  "name": "chess-game",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "chess.js": "^0.11.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "components": "0.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Thanks, @hrishikesh I’ll give that a try! Is that while still keeping your modified version of the root package.json?

Hi @colindavey,

Yes, the modified one is still at the root, but since we’re changing the base path, it won’t be read or used. So, you can still use the old one if you haven’t edited it yet.

@hrishikesh, it seems like we’re super close, but it’s still not working. With the changes you’ve suggested, I am now getting this error: 9:00:01 AM: error An unexpected error occurred: "expected workspace package to exist for \"eslint-plugin-import\"".

I’ve tried it a bunch of the variations you’ve suggested, with the same result. The current state is your original suggestion, but with the addition of your later suggestion for editing the components version number.

Hi @hrishikesh, so it’s still not working. I’d like to see the repo and the dashboard page that you are using.

Either I’m doing something different from you, and I’d like to figure out what it is, or I’m doing it right, yet the system is giving me different results than you. I’d like to figure out which.

Hi @colindavey,

Sorry, I missed your thread.

I’m had deleted the repo, so I recloned this commit: GitHub - colindavey/chess-monorepo at 1ba55af6aa546afb41b4e35754f5f84aee789df8. I hope it’s the correct one.

When I test that locally, it doesn’t work. It looks like a problem with the code. When I saw the dependency components in your package.json, I found this in npm: components - npm. I thought you’re using that and thus, suggested you to change the version. But it looks like you’re trying to use your custom component from the ../../components folder. Correct me if I’m wrong. So, when I import that, it doesn’t work as it falls out of the src folder. So, React doesn’t let me import it.

It would help if you could clarify how what exactly you’re importing {Game} from.

@hrishikesh, Yes, that is the correct commit. It works locally for me. Are you doing this to run locally?:

To use, after cloning, from root directory run

yarn install
lerna bootstrap

Then, to run the Game app,

cd packages/chess-game
yarn start

Note that from that repo, you first got it to work by copying the dependencies to the root package.json, as described at Monorepo support not working - #2 by hrishikesh

@hrishikesh

Yes.

The way the monorepo works is that you can import from siblings to your app that are in the packages directory.

{Game} lives in packages/components/src/game.js.

@hrishikesh, I’ve modified my current master so that components is now renamed colins_components to eliminate the confusion with components - npm, and it has the modifications you suggested in Monorepo support not working - #2 by hrishikesh.

It works locally, and doesn’t work on Netlify, though at one point, you had it working on Netlify.

Hi @colindavey,

Yeah this is strange. Maybe the first time it worked by fluke for me. I’ve another thing for you to try if you’d want to go ahead.

The package.json of your packages/components folder contains:

"main": "dist/index.js",
"module": "dist/index.modern.js",

But packages/components/dist folder doesn’t contain any files. I know, this might sound strange as it works locally, but maybe if you take it out of .gitignore (inside packages/components), it might work.

I’m basing this off my discovery. I made various changes and it came down to this:

I modified packages/components/package.json to something like:

"main": "src/game.js",

And in the packages/chess-game/src/index.js, I made the following change: import Game from 'colins_components'. This actually worked to some extent. Some extent, because, now React was able to locate the module (which means, it was able to locate it before too, but maybe it was failing as it was not able to find the file mentioned in main), but I got a different error:

Creating an optimized production build...
12:23:14 AM: Failed to compile.
12:23:14 AM: 
12:23:14 AM: ../components/src/game.js
12:23:14 AM: SyntaxError: /opt/build/repo/packages/components/src/game.js: Support for the experimental syntax 'jsx' isn't currently enabled (38:9):
12:23:14 AM:   36 |
12:23:14 AM:   37 |     return (
12:23:14 AM: > 38 |         <DumbBoard
12:23:14 AM:      |         ^
12:23:14 AM:   39 |             position={position}
12:23:14 AM:   40 |             highlightList={highlightList}
12:23:14 AM:   41 |             handleClick={handleClick}
12:23:14 AM: Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

I tried fixing that as it said, but that didn’t work. But maybe if you add the dist folder there, it might?

Thanks @hrishikesh!
I found a way to make it work without having to modify the project from the way it was set up originally, keeping everything as it was based on the yarn-workspace and lerna tutorials. It involves building locally and deploying from the command line. First, I create a netlify.tom file in the packages/chess-game directory as follows:

[build]
publish = "./build/"

Then I deploy as follows:

yarn build
netlify deploy # optionally with --prod

The disadvantage is I don’t get the automatic deploy from pushes to GitHub, but I can live with that.
The bigger problem for you is that the system doesn’t seem to work as advertised in the docs
Improved Monorepo Support on Netlify by @rstav, and Build from a subdirectory or monorepo | Netlify Docs.
My working version is here: https://colindavey-chess-monorepo-game.netlify.app/
For test purposes, I will keep a site based on the way it should be set up according to my understanding of those docs here: https://colindavey-test-deploy-chess-game.netlify.app/. (It’s quite possible that you might just find that the problem is just a user error on my part. :slight_smile: )

1 Like

Hi @colindavey,

If you can commit the files from the dist folder as I mentioned above it would help us check what’s happening. If it’s not working even after that, it might be a bug as you say, but we would like to eliminate the possibility of it being a user error.

@hrishikesh,

Would it work if I made a separate branch with the dist folder, and gave you the link to that branch?

Do you need any other of your changes above in that branch, or just access to the dist folder?

Hi @colindavey,

Yeah, you could even create a different repo altogether (or a branch would do too) that we can continue to investigate. You can commit the dist folder to it for now and we’d see what might be causing a problem.

Thank you very much for that.

Hi @hrishikesh, here is a branch that includes the components/dist dir.

Sorry for the delay!

@colindavey,

Thank you very much. We’ll investigate this and post an update as we have one.