我启动了一个 Next.js 应用程序并配置了 eslint。 我的开发依赖列表是:
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
我的 .eslintrc 文件是:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"airbnb",
"airbnb/hooks",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
"prettier"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": [
"react",
"react-hooks"
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/display-name": 1,
"react/jsx-props-no-spreading": "off",
"react/prop-types": "off",
"jsx-a11y/anchor-is-valid": "off"
}
}
我的 Node 版本是最新的 15.11(如果重要的话,我在 MacOS 上)。
问题是我正在导入:
import fs from 'fs/promises';
然后 eslint 抛出
Unable to resolve path to module 'fs/promises'.
否则,脚本可以运行,但我不明白是什么触发了错误。
有人能帮忙吗?
yarn add -D eslint babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier
.eslintrc
文件:(如上问题正文)
file-example.js
:
import path from 'path';
import fs from 'fs/promises'; // <= this throws "Unable to resolve path to module 'fs/promises'.
function HomePage(props) {
const { products } = props;
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
);
}
export async function getStaticProps() {
const filePath = path.join(process.cwd(), 'data', 'dummy-backend.json');
const jsonData = await fs.readFile(filePath);
const data = JSON.parse(jsonData);
return {
props: {
products: data.products,
},
};
}
export default HomePage;
最佳答案
虽然我没有使用 React,而是使用纯 typescript ,但我遇到了同样的问题。我通过像下面的示例一样配置来解决它,使用 eslint-import-resolver-typescript .
settings: {
'import/resolver': {
typescript: {
alwaysTryTypes: true
},
},
}
alwaysTryTypes: true
让它工作,因为它让 eslint 尊重 node_modules/@types/*
,其中包括 @types/node
,其中包含 "fs/promises"
声明(在最新版本的情况下)。
关于reactjs - Next.js + eslint : unable to resolve path to module 'fs/promises' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66511951/