Gatsby: Is it possible to add a resolve path to webpack config?

[colbycheeze]

I see how I can add plugins and loaders, but what about a root resolve path?
I always do something like this in my projects and it is very helpful.

resolve: {
    root: path.resolve(__dirname, './src'),
    extensions: ['', '.js', '.jsx', '.json'],
  },

[f0rr0]

In gatsby-node.js

export function modifyWebpackConfig(config, env) {
  config.merge({
    resolve: {
      root: path.resolve(__dirname, './src'),
      extensions: ['', '.js', '.jsx', '.json'],
    }
  });
  return config;
}

[KyleAMathews]

It'd be good to add this to the README for documentation.

[revolunet]

as gatsby-node doesnt looks like to support es6/babel, we need to write this as ES5. Also, note the destructuring in modifyWebpackConfig arguments

exports.modifyWebpackConfig = function({config, env}) {
  config.merge({
    resolve: {
      root: path.resolve(__dirname, './src'),
      extensions: ['', '.js', '.jsx', '.json'],
    }
  });
  return config;
}

[revolunet]

@KyleAMathews what about a FAQ section in the docs ? i could add a note there

[sebastienfi]

@revolunet Maybe add another example here ? https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/add-custom-webpack-config.md

[KyleAMathews]

@revolunet gatsby-node.js is run by Node.js so it supports the JS your version of Node supports. So use Node 8 if you want support for (most) ES6 features.

[ssuvorov]

Updated: while was writing the comment, already solved my problem. Don't know, might be a problem with webpack resolver too.

I had the next error:

Uncaught Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

The problem was that I moved Header out of layouts/index.js to layouts/Header/index.js. That leads to error which i described above.
import { FormattedMessage } from 'react-intl' can't be resolved.

My solution was to put header in src/component/Header/index.js instead.