Next.js-Webpack别名组件文件夹不起作用

Question

I am extending next.js webpack configuration as suggested in docs.

const path = require('path')

module.exports = {
  webpack: (config, { dev }) => {
    config.resolve = {
      alias: {
        Templates: path.resolve(__dirname, 'templates/'),
        Components: path.resolve(__dirname, 'components/')
      }
    }
    return config
  }
}

I want to make my imports to work like this:

import Template from 'Templates/Base'
import Input from 'Components/Input'

What have I done wrong in configuration because I am getting errors such as:

Cannot find module 'Components/Header'

I am structuring my directory like this:

.next
.storybook
components
|_ Header
|__ index.js
|_ Input
|__ index.js
templates
|_ Base
|__ index.js
pages
|_ index.js
node_modules
containers
stories
...

Answer 1

Instead of editing webpack file, it is required to create .babelrc file with these contents:

{
  "plugins": [
    ["module-alias", [
      { "src": "./components", "expose": "Components" },
      { "src": "./containers", "expose": "Containers" },
      { "src": "./templates", "expose": "Templates" }
    ]]
  ],
  "presets": [
    "es2015",
    "next/babel"
  ]
}

This way we extended Next.js .babelrc configuration and it works well on serverside too.

Answer 2

const path = require("path");

    module.exports = {

        webpack: function(config, { dev }) {

            config.resolve.alias = {
                Templates: path.resolve(__dirname, "templates/"),
                Components: path.resolve(__dirname, "components/")
            };

        return config;
        }
    };