lerna + webpack + babel-loader issue

Question

Here's where the issue is recreated:

https://github.com/reggi/webpack-lerna-babel-loader-issue

Goal: I'm trying to build ./packages/usage/index.js with webpack.

• I have 4 packages alpha, beta, gamma, usage.
• alpha, beta, gamma are not using babel and should just be consumed using index.js
• usage is using babel and should be converted using babel-loader then the traversal should contunue

When I try and compile babel is oddly being request for the other deps.

$ lerna bootstrap
Lerna v2.0.0-beta.20
Linking all dependencies
Successfully bootstrapped 4 packages.
$ cd packages/usage
$ npm run webpack

> @reggi/usage@1.0.0 webpack /Users/thomasreggi/Desktop/webpack-issue/packages/usage
> webpack

Hash: 27e6d9d1d4147417b516
Version: webpack 1.13.1
Time: 429ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.11 kB       0  [emitted]  main
    + 3 hidden modules

ERROR in ../alpha/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/thomasreggi/Desktop/webpack-issue/packages/alpha
 @ ../alpha/index.js 1:11-33

And with { exclude: /(node_modules|bower_components)/ } enabled I get this.

$ npm run webpack

> @reggi/usage@1.0.0 webpack /Users/thomasreggi/Desktop/webpack-issue/packages/usage
> webpack

Hash: 99d08ad8b664833bba1c
Version: webpack 1.13.1
Time: 401ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.25 kB       0  [emitted]  main
    + 4 hidden modules

ERROR in ../alpha/~/@reggi/beta/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/thomasreggi/Desktop/webpack-issue/packages/alpha/node_modules/@reggi/beta
 @ ../alpha/~/@reggi/beta/index.js 1:17-82

Types of bundles

Without babel-loader excluding node_modules

https://github.com/reggi/webpack-lerna-babel-loader-issue/blob/master/packages/usage/bundle-without-exclude.js#L70

Cannot find module \"@reggi/beta\"

With babel-loader excluding node_modules

https://github.com/reggi/webpack-lerna-babel-loader-issue/blob/master/packages/usage/bundle-with-exclude.js#L77

Cannot find module \"/Users/thomasreggi/Desktop/webpack-issue/packages/beta\"

Without babel-loader & switching code to require

https://github.com/reggi/webpack-lerna-babel-loader-issue/blob/master/packages/usage/bundle-without-babel.js#L97

Includes everything perfectly.

Answer 1

Looking at this error here:

ERROR in ../alpha/~/@reggi/beta/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/thomasreggi/Desktop/webpack-issue/packages/alpha/node_modules/@reggi/beta

It looks like the problem is finding the babel loader because require.resolve isnt going to look in sibling directory node_modules to find it.

Try configuring webpack to tell it where to resolve the babel loader (within the usage project):

resolveLoader: {
  modulesDirectories: [
    path.resolve(__dirname, 'node_modules'),
  ],
},

Answer 2

One nice thing about using Lerna is you can pull devDependencies up to the repo root to factor them out of the individual packages. This can significantly improve bootstrap time if devDependencies are used in many packages. It can also, in this case, help you avoid this strange babel behavior.

If you move the devDependencies from packages/usage up to the root:

diff --git a/package.json b/package.json
index d3728db..e9b313b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,8 @@
 {
   "devDependencies": {
-    "lerna": "2.0.0-beta.20"
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "lerna": "2.0.0-beta.20",
+    "webpack": "^1.13.1"
   }
 }
diff --git a/packages/usage/package.json b/packages/usage/package.json
index 7186ddf..387ddc4 100644
--- a/packages/usage/package.json
+++ b/packages/usage/package.json
@@ -17,10 +17,5 @@
     "presets": [
       "es2015"
     ]
-  },
-  "devDependencies": {
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
-    "webpack": "^1.13.1"
   }
 }

Then re-run npm install at your repo root. After that your npm run webpack in packages/usage should succeed.

Note also that with Lerna you can simplify your workflow here using lerna run webpack.