Next.js - Webpack-Aliasing-Komponentenordner funktioniert nicht

Question

Ich erweitere next.js Webpack-Konfiguration wie in den Dokumenten vorgeschlagen.

const path = require('path') 

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

Ich möchte meine Importe machen wie dies funktioniert:

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

Was habe ich in der Konfiguration falsch gemacht, weil ich Fehler bin immer wie:

kann nicht Modul finden ' Komponenten/Header '

Ich strukturiere mein Verzeichnis wie folgt:

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

Answer 1

Statt Bearbeitung webpack Datei ist es erforderlich, .babelrc Datei mit folgendem Inhalt zu erstellen:

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

So können wir Next.js .babelrc Konfiguration erweitert und es funktioniert gut auf server auch.

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; 
     } 
    };