Next.js: Module not found: Can't resolve webpack alias

[JerryGreen]

Bug report

Describe the bug

I experience a problem with webpack aliases. They are not working since I've updated to Next v9. I get the following error:

Module not found: Can't resolve '~/components/nav' in '/Users/jerrygreen/projects/next-test/pages'

To Reproduce

I've made a repo with reproducible bug:

https://github.com/JerryGreen/next.js-issue8452

Steps to reproduce:

git clone https://github.com/JerryGreen/next.js-issue8452
cd next.js-issue8452
yarn
open http://localhost:3000
yarn dev

Expected behavior

The repo I've linked should work without bugs

Screenshots

System information

• OS: macos 10.14.5
• Version of Next.js: 9.0.4

Additional context

I think this might be related to this problem:

https://github.com/zeit/next.js/issues/8157

I am not sure but I'm experiencing this bug too, in my own project, since I've updated to Next v9. However, it's not covered by my reproducible repo, nor by this issue. Just may be related.

[timneutkens]

Sounds like you're customizing webpack configuration so it's not really a bug / not related to Next.js.

[JerryGreen]

@timneutkens, huh. Looks like you're right. I've just tried downgrading Next to 8.1.0 and the bug is still there. What do you think is it then? I mean, these aliases were working for me earlier.

P.S. Sorry, I was just almost sure it's update of Next9. Still investigating...

[timneutkens]

Pretty sure it's unrelated to Next.js tbh.

[stormy251]

@JerryGreen I would strongly consider you not use the ~ within your webpack alias configuration. This is going to clash with the webpack nomenclature that tells webpack ~ means it should look in the node_modules directory.

[timneutkens]

@stormy251 that sounds strange, I'm not aware of a behavior like that.

[walleXD]

@JerryGreen you next.config.js is pointing to the wrong directory for the alias.

// this is what you have in the repo
module.exports = {
  webpack(config, options) {
    config.resolve.alias["~"] = resolve("components");
    return config;
  }
};

// this is what you need to connect `~` to the root
module.exports = {
  webpack(config, options) {
    config.resolve.alias["~"] = join(__dirname);
    return config;
  }
};

Also, your one will work if you import with import Nav from '~/nav'

[walleXD]

@timneutkens I also have a similar problem to @JerryGreen but I'm using typescript. I have tried to get alias working four the last couple hours but haven't had much luck.

const config = {
  webpack(config) {
    config.resolve.alias['@modules'] = resolve(
      __dirname,
      'modules'
    )

    return config
  }
}

module.export =  config

I'm getting Module not found: Can't resolve '@modules/bootstrapApi' inpages/api.ts`. Alias doesn't also work in the other pages

[JerryGreen]

@walleXD heck, you're right! This was a silly mistake. Should have used import Nav from '~/nav'. Turns out I can't reproduce the error (yet). But it's still happening in my real project. I'm also using typescript there (not sure if it's important). I've also spent several hours for this. Still investigating... Keep us informed here if you find something. Thanks!

[JerryGreen]

@walleXD I'm not sure what's changed but looks like I don't have this problem locally now. Nor with yarn next, nor with now dev - all fine. But when I deploy this to nowsh - I still experience this problem:

My webpack config:

  webpack(webpackConfig, options) {
    webpackConfig.resolve.alias['~'] = resolve('src')
    webpackConfig.resolve.alias['@assets'] = resolve('assets')
    return webpackConfig
  },

This is very weird. How do you experience this? In production only? Locally too?

[timneutkens]

You'll want to resolve('./src'), notice the ./ part.

[walleXD]

I ended up rolling w/ babel-plugin-module-resolver to create the alias

[JerryGreen]

@walleXD that's cool. What version of Next do you use?

Also, can you show the .babelrc config? Do you use @zeit/next-typescript?

[JerryGreen]

@timneutkens this has nothing to do with ./ – resolve returns same values for both resolve('./src') and resolve('src'):

[timneutkens]

@JerryGreen the problem is that it doesn't between certain node versions and runtimes, @Timer ran into this recently. It's generally better to use path.join(__dirname, 'src').

[JerryGreen]

@timneutkens, actually yea, I’ve tried it also, was suspecting this too. It’s no difference in my environment but I’ve tried it. I’ve tried to log it in production and see the values, also tried the join with __dirname instead of resolve - it’s all the same, no difference, all same values and it haven’t fixed anything

[Timer]

The provided demo deploys to Now and runs locally for me just fine.

However, to be safe, the alias should be:

config.resolve.alias['~'] = resolve(__dirname, './components')

Closing this as there's no Next.js bug -- this is just standard webpack modification.

[JerryGreen]

Barely important, but want to notice what the problem was there. Turned out it's something with now.json. Once I've added it to .nowignore, it started to functioning normally on production too.

Probably some problems with this row (which was a standard but now it's not):

"builds": [{ "src": "next.config.js", "use": "@now/next" }],

Which made it non-functioning on production (at least the relative imports, which were set in next.config.js and were working normally on local machine using simple next -p 4000 command, but not in production).

P.S. @now/next = 0.7.0, next = 9.0.4
P.P.S. should have mentioned it two months earlier, once I've handled it, sorry for a necro post