Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Running gatsby through npm script from another directory throws an error #235

Closed
tleunen opened this issue Apr 5, 2016 · 9 comments
Closed

Comments

@tleunen
Copy link
Contributor

tleunen commented Apr 5, 2016

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
Copy link
Contributor

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

@benstepp
Copy link
Contributor

benstepp commented Apr 7, 2016

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
Copy link
Contributor Author

tleunen commented Apr 7, 2016

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
Copy link
Contributor

benstepp commented Apr 7, 2016

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
Copy link
Contributor Author

tleunen commented Apr 7, 2016

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
Copy link
Contributor Author

tleunen commented Apr 8, 2016

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
Copy link
Contributor

benstepp commented Apr 8, 2016

// 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
Copy link
Contributor

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.

benstepp added a commit to benstepp/gatsby that referenced this issue May 7, 2016
This change makes it so the user doesn't need to specify their plugins.
If they want to override it they would need to modify the js loader
config using the modifyWebpackConfig API. Ideally we would support a
user provided .babelrc as well.

```
exports.modifyWebpackConfig = function(config, env) {
  config.removeLader('js')
  config.loader('js', {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      presets: [
        'babel-preset-react',
        'babel-preset-es2015',
        'babel-preset-stage-0',
      ].map(require.resolve),
      plugins: [
        'babel-plugin-add-module-exports',
        'babel-plugin-transform-decorators-legacy',
      ].map(require.resolve),
    },
  })
  return config;
}
```

Fixes gatsbyjs#235. Requires less user package.json dependencies unless the user
wants to add babel plugins (Users no longer need to provide
babel-plugins of any kind in their project as gatsby provides them)
@KyleAMathews
Copy link
Contributor

Fixed in #279 and released in 0.11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants