I’m trying to get an app in my monorepo to deploy, and it’s not working. I’m following the directions in Monorepos | 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.
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.
Change your build command to cd ./packages/chess-game/ && CI= npm run build (or the yarn equivalent).
Configure your publish path to be: ./packages/chess-game/build/.
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.
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?
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.
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.
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
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.
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.
)