Next.js: why webpack alias doesn't work as expected in nextjs?

[videni]

Bug report

Describe the bug

webpack alias doesn't work as expected . I created an descussion here, but I think this might be a bug, because it did work a few days ago.

To Reproduce

I created a demo here

Screenshots

[Exelord]

I did this in next config:

const config = {
  webpack(config) {
    config.resolve.alias[package.name] = path.resolve(__dirname, 'src');
    return config;
  }
};

So then I can import by app name import Input from 'my-app/components/input'

[JazibJafri]

You also need to add it to tsconfig.json. You are using typescript with next.js. I got it working like this
My tsconfig.json

"baseUrl": ".",
"paths": {
     "@": ["src/"],
     "@/*": ["src/*"],
 }

My next.config.js webpack

config.resolve.alias['@'] = path.join(__dirname, 'src')

Removing one or the other breaks it.

[videni]

@JazibJafri, it works, thanks a lots.

[Exelord]

https://github.com/zeit/next.js/pull/11293
This will solve your issue better :)

[jesseaborden]

@Exelord You just saved me a whole lot of strife. Thannnnnk ya!