CRACO compiles monorepo (Yarn workspaces) but doesn't show errors

[MikeSuiter]

I'm working on a POC to see if I can I move our existing code into a monorepo using Yarn workspaces. My sample monorepo has this structure.

apps
  app-one
packages
  btns
  core

The apps folder will contain all of the CRA apps and packages will contain code to be shared among them. I don't want to compile code in packages separately, just want to do a yarn start or yarn build in apps/app-one and have it include dependencies from packages.

This is actually working, and if there is a compile error in app-core it shows it in the terminal as it should. If I introduce a compile error in packages/btns, the terminal shows this:

Compiled successfully!

You can now view @craco/app-one in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.65:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

But my browser shows this:

ReferenceError: Can't find variable: PinkButton123
Layout
src/components/Layout.js:8
   5 | const Layout = () => {
   6 |   return (
   7 |     <span>
>  8 |       <BlueButton label="Remote Blue" />
   9 |       <PinkButton123 label="Remote Pink" />
  10 |     </span>
  11 |   );

This is my craco.config.js

const path = require('path');
const { getLoader, loaderByName } = require('@craco/craco');

const packages = ['btns', 'core'];
const absolutePaths = [];
packages.forEach((item) => {
  absolutePaths.push(path.join(__dirname, `packages/${item}/src`));
});

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
      if (isFound) {
        const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include];
        match.loader.include = include.concat(absolutePaths);
        console.log('Loading sources from:', match.loader.include);
      }

      return webpackConfig;
    },
  },
};

The output from the above code shows this which is correct.

Loading sources from: [
  '/Users/suim01/Developer/Projects/craco/apps/app-one/src',
  '/Users/suim01/Developer/Projects/craco/packages/btns/src',
  '/Users/suim01/Developer/Projects/craco/packages/core/src'
]

Any ideas on why compile errors in packages don't show in the terminal but show in the browser? Also if I do a build, it finishes successfully which it shouldn't.

[MikeSuiter]

I have a repo which shows what is going on here:

https://github.com/MikeSuiter/craco-monorepo-example

Go to the root of the workspace and run yarn start and you'll see both the terminal and browser are happy. Now change PinkButton to PinkButton123 in packages/core/src/components/Layout.js and the terminal still says successful but the browser does show the error. This is an annoyance for development, but a production build will succeed so that's not good at all. Any errors in packages do not cause development or production builds to fail.

Now go to apps/app-one/src/App.js and change LocalButton to LocalButton123 and this time both the terminal and browsers have errors, as they should. So there is something causing errors to fail properly in apps but not in packages.

Any direction would be greatly appreciated.

[dominicboston]

Did you manage to find a solution to this

I did this - https://blog.johnnyreilly.com/2021/01/02/create-react-app-with-ts-loader-and-craco/
which works but I'm not sure I really like it as a solution! There must be a simpler way

[MikeSuiter]

@dominicboston I did figure it out and have an example repo here:

https://github.com/MikeSuiter/craco-monorepo-example

[benvds]

@dominicboston I did figure it out and have an example repo here:

https://github.com/MikeSuiter/craco-monorepo-example

@MikeSuiter you're a hero 👍🏻

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.