CODEWITHSUNDEEP
javascriptnode.jsnpmbrowserifybabeljs
laurencedorman
laurencedorman

Reputation: 166

Browserify - transform in package.json on symlinked modules not working in npm3

Environment: [email protected] [email protected] [email protected] [email protected]

Trying to build an app that worked with npm@2 and babelify@6 but having problems upgrading to npm@3 and babelify@7. Allow me to try and explain the problem.

}, "devDependencies": { "babel-preset-es2015": "^6.5.0", "babelify": "^7.2.0" }, "browserify": { "transform": [ [ "babelify", { "presets": [ "es2015" ] } ] ] }

Attempting to build I get error:

"Browserify Error: Couldn't find preset "es2015" relative to directory"

npm 3 has flattened out the dependency tree, so the babel-preset-es2015 the symlinked module needs are in the node_modules of app. According to the explanation by @substack here and this example here browserify should walk up the tree from the symlinked module to app and check in the node_modules there, but it doesn't seem to be doing this.

My directory layout looks like this:

~/projects |-- app |-- entry.js (this file can see babel-preset just fine) |-- node_modules |-- babel-preset-es2015 |-- my-module (symlink pointing at ~/projects/modules-shared/my-module) |-- index.js (we want babelify to transform this file) |-- modules-shared |-- my-module

If I install babel-preset-es2015 in the modules-shared folder, browserify finds the preset.

Upvotes: 1

Views: 914

Answers (1)

laurencedorman
laurencedorman

Reputation: 166

Coming back to this question that I somewhat neglected. This problem was difficult to solve because it is related to two different characteristics of the tooling used.

Firstly, Browserify does not treat symlinks as it should. Instead of treating a symlinked npm module as being in its symlinked position, it takes its actual position in the filesystem, and hence can't find its dependencies under the flat file-tree of npm3.

Secondly, Babel requires that its dependencies be in the node_modules of the module in question, effectively a hard dependency on the npm2 nested file-tree system.

So we have two different problems for the same reason - npm3 changed how node_modules are organised.

The best work-around I could find was to write a custom script that installed only the babel dependencies of any symlinked module. You might think it would be a good idea to just install all the dependencies of a symlinked module, but this will lead to duplicate instances in the Browserified bundle, which leads to all sorts of subtle, difficult to understand errors.

The Browserify problem might be solvable with this transform realpathify, but as for the problem with Babel I don't see any movement towards a solution.

Upvotes: 2

Related Questions