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

Answer 2

检查NextJS example with-absolute-imports

const path = require('path')

module.exports = {
   webpack (config, options) {
       config.resolve.alias['components'] = path.join(__dirname, 'components')
       return config
    }
}

或者，应该通过将其添加到next.config.js文件中来工作：

config.resolve.modules.push(path.resolve('./'));

（并且不需要任何babel插件）

next.js和webpack resolve.modules

2 个答案: