Running gatsby through npm script from another directory throws an error

[tleunen]

I have a npm script with this command cd docs && ./node_modules/.bin/gatsby develop.
So gatsby and all the dependencies to run a gatsby website are inside the directory docs, and this error is thrown:

> projectX@0.0.1 serve-docs /Users/tleunen/dev/projectX
> cd docs && ./node_modules/.bin/gatsby develop

Failed to require /Users/tleunen/dev/projectX/docs/html.js
./html.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "/Users/tleunen/dev/projectX/.babelrc" at 0, attempted to resolve relative to "/Users/tleunen/dev/projectX"
  at /Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:179:17
  at Array.map (native)
  at Function.normalisePlugins (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:155:20)
  at OptionManager.mergeOptions (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:277:36)
  at OptionManager.addConfig (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:207:10)
  at OptionManager.findConfigs (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:16)
  at OptionManager.init (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:461:12)
  at File.initOptions (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/index.js:194:75)
  at new File (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/file/index.js:123:22)
  at Pipeline.transform (/Users/tleunen/dev/projectX/docs/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
  at transpile (/Users/tleunen/dev/projectX/docs/node_modules/babel-loader/index.js:14:22)
  at Object.module.exports (/Users/tleunen/dev/projectX/docs/node_modules/babel-loader/index.js:88:12)
 @ (webpack)-require/lib/webpackRequireEntrypoint.js 1:20-41

If, instead, gatsby is also installed in the root directory and I switch the command for cd docs && gatsby develop, everything works. Having gatsby only in the root doesn't work.

[KyleAMathews]

If you could create a test repo here on Github that reproduces this error, that'd be really helpful.

[benstepp]

This looks like a .babelrc thing. I'm guessing that the docs folder does not have a .babelrc in it.

Babel will crawl a directory structure upward until it finds .babelrc and use the configuration and the dependencies required relative to that directory. So, in your case it looks like babel crawled up to your root directory /Users/tleunen/dev/projectX/.babelrc and wants to use babel-plugins from this directory. But, because gatsby is installed in the docs subfolder, it is not able to find them.

Copy or move the .babelrc into docs should fix your problem

mv /Users/tleunen/dev/projectX/.babelrc /Users/tleunen/dev/projectX/docs/.babelrc

[tleunen]

For some reasons, the error has changed on the plugin add-module-exports now.

Having a babelrc file inside my docs directory doesn't solve the issue though. But I think you're right, gatsby/babel is searching for plugins in the root, instead of the docs directory.

[benstepp]

Now I'm just guessing without seeing a repo, but make sure that the package.json in the docs directory is up to date. I know that gatsbyjs/gatsby-starter-documentation@d7da857 added the specific babel plugins to the docs starter's package.json (I'm guessing that's the starter you are using). Not really sure why, but I'm sure it had something to do with babel and npm not playing nicely together.

[tleunen]

Oh.. good to know the site also needs the babel plugin even if it doesn't directly use it. I'll test and will let you know

[tleunen]

Ok, I found the issue...

It's because the docs website requires code from the root. Therefore, it seems that Babel is looking for plugins from the required file, not the source where it's run...

https://github.com/tleunen/gatsby-issue-235
see https://github.com/tleunen/gatsby-issue-235/blob/master/docs/pages/_template.jsx#L7

[benstepp]

// What babel-loader wants to transpile
{ inputSourceMap: undefined,
  sourceRoot: '/Users/ben/Code/gatsby-issue-235/docs',
  filename: '/Users/ben/Code/gatsby-issue-235/src/index.js',
  presets: [ 'react-hmre', 'react', 'es2015', 'stage-1' ],
  plugins: [ 'add-module-exports' ],
  sourceMap: false,
  sourceFileName: '../src/index.js' }

https://github.com/babel/babel/blob/4c371132ae7321f6d08567eab54a59049e07f246/packages/babel-core/src/transformation/file/options/option-manager.js#L422
Not entirely sure why, but when determining the directory for the transformation options babel ignores the sourceFileName. This causes the directory to be set to /Users/ben/Code/src even though the .babelrc is set to be in src/docs and all the plugins should be resolved from src/docs. So, babel just uses the new incorrect directory to try and resolve plugins in the babelrc settings from a completely different directory

Not sure if it's broken, or intended to be such that you cannot require files outside of your project's directory. It's always cool to find out why something isn't working though.

[alampros]

I'm not sure if this helps at all, but I ran into this when npm linking a module (with its own .babelrc) into my gatsby project.

[KyleAMathews]

Fixed in #279 and released in 0.11