Add support for mono-repos by specify packages as scoped

[LordZardeck]

Expected Behavior

I would expect to put the boilerplate in a yarn workspace, add another package in the workspace that requires babel compilation, and require that second package in the boilerplate package. Running yarn dev or packaging the component should properly build run the package.

Current Behavior

Errors occur resolving dependencies from the secondary workspace package.

Steps to Reproduce (for bugs)

1. Create an empty workspace in the project root:

{
  "private": true,
  "workspaces": ["packages/*"]
}

2. Clone the boilerplate into a package:

git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git packages/electron-app

3. Add the new secondary package and initialize yarn:

mkdir -p packages/database && cd $_ && yarn init

4. Require the secondary package within the boilerplate app and run yarn install in the project root

For my example, i tried to make a simple sqlite database package. It simply consists of two files, within packages/database/models:

• index.js
• tasks.js

Including this within packages/electron-app/containers/App.js as import db from '@timing-export/database'; causes the following error in the renderer process:

vm.js:74 Uncaught SyntaxError: Unexpected identifier
    at new Script (vm.js:74)
    at createScript (vm.js:246)
    at Object.runInThisContext (vm.js:298)
    at Module._compile (internal/modules/cjs/loader.js:678)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722)
    at Module.load (internal/modules/cjs/loader.js:620)
    at tryModuleLoad (internal/modules/cjs/loader.js:559)
    at Function.Module._load (internal/modules/cjs/loader.js:551)
    at Module.require (internal/modules/cjs/loader.js:658)
    at require (internal/modules/cjs/helpers.js:20)

Now while it doesn't say what identifier is unexpected, I'm pretty sure it's the import statement. This all worked 100% when it didn't need babel compiling, and when I converted it to use import statements, the first thing that failed was the main process. By adding a config for @babel/register to not ignore my packages:

require('@babel/register')({
	ignore: [
		/node_modules\/(?!(@timing-export)\/?).*/
	]
});

This instantly fixed my main renderer process. (@timing-export is the scope I put my database module under). Now my first thought was to try to accomplish the same thing in the webpack configuration.

I tried setting the exclude to /node_modules\/(?!(@timing-export)\/?).*/ as well, but that made no effect. The next thing I tried was to remove my package as an external. That's when things really blew up. I got all kinds of errors regarding packages my database package depended on: log-output

So then after a bit more digging, I realized not only did my other package have to be marked as not external, I also needed each and every dependency for every monorepo package to be marked as external. So that brings me to this PR.

I thought about the most non-intrusive, but simplest to implement way of getting workspaces setup, and I figured using the scoped package syntax would suffice. If any of you think of a better way to implement this, I'm all ears as I'm new to this whole monorepo/yarn workspaces mentality anyway.

My solution consists of setting up each package using a scoped name, such as @monorepo/electron-app and @monorepo/electron-app-dependency. Using that logic, I scan the folders for package.json files and read them in, whitelisting any scoped packages under the same scope as the electron boilerplate.

If I did this all wrong in the first place, please let me know how I should have setup mono-repos with yarn workspaces. I spent hours debugging these issues having absolutely no direction.

[vikr01]

If I'm understanding correctly, this is about using babel to compile your other workspaces packages?

I assume your repo looks something like this?:

.
├── babel.config.js
├── package.json
├── packages
│   ├── electron-react-boilerplate
│   └── other-package
└── yarn.lock

In that case, you'll want to use the root or rootMode options for babel when using @babel/register/@babel/node/babel-loader, and the babelrcRoots option in your root level babel.config.js (example mentioned here).

[LordZardeck]

@vikr01 Does that matter if I'm running babel within packages/electron-react-boilerplate? I tried once before running webpack and all that from that root but it was a mess, and i'd like to stick as close to the boilerplate as possible.

[LordZardeck]

@vikr01 I've even tried getting this running from root, no such luck. Any chance you could create a small example for me that works? There's 2 key pieces: a secondary package that needs babel transpilation and has external dependencies that should NOT be transpiled?

[vikr01]

Here's an example where another workspace module is imported and rendered.

I'm closing this PR since this is more of an issue you're having with babel and yarn than an issue with the boilerplate and there's not really anything to fix here.