Next.js: Next.config.js `resolve.modules` not working to resolve module

[abstracthat]

I'm looking for a simple way to link up a few directories that are in the root of my project to use as paths for webpack to resolve modules. That is, import Button from 'components/Button' without all of the ../.. directory hops. I believe that either of these would do that...

module.exports = config => {
  config.resolve.modules = [
    __dirname,
    'node_modules'
  ]
  return config
}

or with alias...

module.exports = config => {
  config.resolve.alias = {
    components: path.resolve(__dirname, 'components')
  }
  return config
}

Neither of those seem to work. Am I missing something? Is __dirname not giving me my project root?

[abstracthat]

My apologies. I set up that import incorrectly. It does work on the client when I use the webpack key but not on the server. I guess that's because we don't have webpack on the server. Any other ideas?

[abstracthat]

I got it working with a Babel plugin instead. https://github.com/tleunen/babel-plugin-module-resolver

It does make me wonder the examples that alias react with Inferno for example, is that using React or Inferno on the server since the alias is just in webpack?

[arunoda]

@abstracthat inferno example doesn't use React on the server.
See fjx: https://github.com/zeit/next.js/pull/767

Using https://github.com/tleunen/babel-plugin-module-resolver is the current solution.

[msell]

Does anybody have any examples of a next.js app working with the babel-plugin-module-resolver? I've been trying for a couple of days to get it to resolve my components using this plugin, but I must be doing something wrong and I haven't seen any examples online.

[zsherman]

@msell I was able to get it working pretty easily with this .babelrc:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./"]
    }]
  ]
}

you can try running it yourself and see an example at https://github.com/timberio/next-go

[timneutkens]

There's an example for doing this now https://github.com/zeit/next.js/tree/master/examples/with-absolute-imports