next.js和webpack resolve.modules

Question

我正在使用next.js構建一個React應用程序，並且我正在使用next.config.js文件中的webpack配置。

具體來說，我想使用webpack的resolve.modules配置更好的導入。

然而，當我添加在next.config.js文件以下行：

config.resolve.modules .concat(['styles','static','components','imports'])

然後 import FooBar from 'components/index/FooBar"，例如在pages/index.js文件，它仍然會無法正常工作。找不到FooBar。

該組件存在，並且如果我使用相對路徑，導入工作正常。不過，我想要更好的導入，並且我知道可以使用webpack（例如，參見react-boilerplate）。

我在做webpack的錯誤嗎？也許這是一個真正的錯誤？

Answer 1

resolve.modules將查看爲您導入的模塊配置的目錄。因此，當進口components/index/FooBar它將在：

styles/components/index/FooBar 
static/components/index/FooBar 
components/components/index/FooBar 
imports/components/index/FooBar 

相對路徑看起來進一步，但是這不是與此有關，路徑是一樣的，只是爬上目錄樹（見resolve.modules）。

推測這些路徑都不符合您的組件。要獲得component/index/FooBar，您只需導入index/FooBar。

import FooBar from 'index/FooBar';