Can't specify `src` as root directory about gatsby-plugin-root-import

[mongkuen]

I'm not sure what the issue is. I made an example with gatsby-starter-default, and using src as the root directory works by simply adding 'gatsby-plugin-root-import' to the config plugins list.

You can see the repo and the commit here: https://github.com/mongkuen/gatsby-starter-default/commit/228d01e2fb371117cf7b1100d3b6d467f338998e

options: {
    root: path.join(__dirname, 'src'),
},

This wouldn't work because as the docs say, this plugin is a shallow wrapper around webpack's alias, and the above code makes root/myFolder resolve to src/myFolder
https://webpack.js.org/configuration/resolve/#resolvealias

Furthermore, root itself has been deprecated also I believe. https://webpack.js.org/migrate/3/#resolveroot-resolvefallback-resolvemodulesdirectories

[Maushundb]

@mongkuen The docs on the gatsby site, as well as in your README still have an example using the root field - https://www.gatsbyjs.org/packages/gatsby-plugin-root-import/#plugin-options-1

If this field is not longer supported, can we remove the example from the docs? Also, what do you suggest using if we want to import files like components/MyFile rather than src/component/MyFile, other than making an alias for each top level dir?

[andyhmltn]

@Maushundb Appreciate I'm probably a bit late with the solution but I found this thread via Google having had the same issue. I managed to correct it by iterating through the directories and creating an options object automatically. Two helpers need to be created:

const path = require('path');
const { readdirSync, lstatSync } = require('fs');

const isDirectory = source => lstatSync(source).isDirectory();
const getDirectories = source =>
  readdirSync(source)
    .map(name => path.join(source, name))
    .filter(isDirectory);

Then you can use getDirectories to create options:

# gatsby-config.js
{
      resolve: 'gatsby-plugin-root-import',
      // We don't want to manually add the directory to options everytime a new
      // one is created in src so this fetches all directories in src and maps them
      // to an object of options expected by `gatsby-plugin-root-import`
      options: getDirectories('src').reduce((finalOptions, directory) => {
        finalOptions[directory.replace('src/', '')] = path.resolve(
          __dirname,
          directory
        );

        return finalOptions;
      }, {}),
},

Its a shame this use-case isn't supported by gatsby-plugin-root-import without resorting to this. Having to prefix all imports with src/ seems messy and unneeded when it applies to everything

[mongkuen]

Yeah you're right, having to list every top level folder isn't ideal. Plugin now resolves the src folder automatically with resolve.modules.