Cannot create alias

[rohmanhm]

Modify next.config.js file to add alias into webpack, but failed. (sometimes work)

Here's my config
next.config.js

const path = require('path')

module.exports = {
  webpack: (config, { dev }) => {
    // Perform customizations to config
    config.resolve = {
      alias: {
        Utils: path.resolve(__dirname, './src/utils')
      }
    }
    // Important: return the modified config
    return config
  }
}

throw this error

500
Internal Server Error.
Cannot find module 'Utils/const'
Error: Cannot find module 'Utils/const'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/rohmanhm/Desktop/Code/Learn/NextJS/basic/.next/dist/src/components/partial/Header.js:43:14)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

[timneutkens]

You have to handle aliasing in babel since we don't use webpack on all code. There is a ticket for universal webpack. Till then you can use the same code used for aliasing preact here: https://github.com/zeit/next.js/tree/master/examples/using-preact

[sedubois]

Here's the ticket about universal webpack: #1245

[rohmanhm]

Try this babel plugin, and works 🔥 https://www.npmjs.com/package/babel-plugin-module-alias 👍🏼

[timneutkens]

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