webpack中的eslint导入：无法解析模块的路径

Posted 2023-02-16

【中文标题】webpack中的eslint导入：无法解析模块的路径

【英文标题】：eslint imports in webpack: Unable to resolve path to module

【发布时间】：2017-05-26 21:31:52

【问题描述】：

使用 eslint-import-resolver-webpack，我试图通过引用“快捷方式”（例如组件/计数器）让 eslint 知道我想要导入文件。

在下面的示例中，webpack (v2.2.0-rc.3) 构建良好，但测试失败，因为它是“无法解析模块 'components/Counter' 的路径”。 导入“组件/计数器/减速器”时也出现此错误，因此不限于索引。

运行 npm run lint 和我的 IDE (IntelliJ) 都会出现相同的错误。

按照文档，我设置了以下配置：

（部分）文件结构：

project-root/
  app/
    components/
      Counter/
        index.js
        reducer.js
    app.js
 internals/ 
   config/
      .eslintrc
      webpack.test.js
  package.json

文件：project-root/app/app.js

import Counter from 'components/Counter'
// etc...

摘录：project-root/package.json

...
"lint": "npm run lint:eslint -- . ",
"lint:eslint": "eslint -c internals/config/.eslintrc --fix --ignore-path .gitignore --ignore-pattern internals"
...

文件：project-root/config/.eslintrc

  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": 
    "browser": true,
    "node": true,
    "mocha": true,
    "es6": true
  ,
  "plugins": [
    "redux-saga",
    "react",
    "jsx-a11y"
  ],
  "parserOptions": 
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": 
      "jsx": true
    
  ,
  "settings": 
    "import/resolver": 
      "webpack": 
        "config": "./internals/config/webpack.test.js"
      
    
  ,
  "rules": 
    "arrow-parens": [
      "error",
      "always"
    ],
    "import/imports-first": 0,
    "import/newline-after-import": 0,
    "import/no-dynamic-require": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default": 0,
    "import/prefer-default-export": 0,
    "jsx-a11y/aria-props": 2,
    "jsx-a11y/heading-has-content": 0,
    "jsx-a11y/href-no-hash": 2,
    "jsx-a11y/label-has-for": 2,
    "jsx-a11y/mouse-events-have-key-events": 2,
    "jsx-a11y/role-has-required-aria-props": 2,
    "jsx-a11y/role-supports-aria-props": 2,
    "max-len": [
      2,
      120,
      2,
      
        "ignoreComments": true,
        "ignoreTrailingComments": false,
        "ignoreRegExpLiterals": true
      
    ],
    "newline-per-chained-call": [
      2,
      
        "ignoreChainWithDepth": 4
      
    ],
    "no-console": [
      1,
      
        "allow": [
          "warn",
          "error"
        ]
      
    ],
    "no-use-before-define": [
      2,
      
        "functions": false,
        "classes": true
      
    ],
    "prefer-template": 2,
    "class-methods-use-this": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-uses-vars": 2,
    "react/jsx-first-prop-new-line": [
      2,
      "multiline"
    ],
    "react/jsx-filename-extension": 0,
    "react/jsx-no-target-blank": 0,
    "react/prefer-stateless-function": 0,
    "react/require-extension": 0,
    "react/self-closing-comp": 0,
    "redux-saga/no-yield-in-race": 2,
    "redux-saga/yield-effects": 2,
    "semi": [
      2,
      "never"
    ]
  

还有：project-root/internals/config/webpack.test.js：

const webpack = require('webpack')

module.exports = 
  devtool: 'inline-source-map',

  module: 
    loaders: [
       test: /\.json$/, loader: 'json-loader' ,

       test: /\.css$/, loader: 'null-loader' ,

       test: /\.js$/,
        loader: 'babel',
        exclude: [/node_modules/],
      ,

       test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
        loader: 'null-loader',
      ,
    ],
  ,

  plugins: [
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      ,
    ),
  ],

  resolve: 
    modules: [
      'app',
      'node_modules',
    ],
  ,

注意：我还尝试指向一个仅导出解析对象的文件。一样的：

module.exports = 
  resolve: 
    modules: [
      'app',
      'node_modules',
    ],
  

【参考方案1】：

看来我的依赖项需要更新...

彻底的 linting 过程需要大量的插件、配置等。

-- 编辑--

这是我的项目依赖项的摘录。这里可能有一些不需要的包，我只删除了那些我确定不会产生影响的包。

请注意，前端陆地会像 6 档的猎豹一样移动，因此版本可能很快就会过时。无论如何，截至目前（2017 年 2 月），这是一个有效的配置。

"dependencies": 
    "babel-polyfill": "6.16.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
  ,
  "devDependencies": 
    "babel-cli": "6.18.0",
    "babel-core": "6.21.0",
    "babel-eslint": "7.1.0",
    "babel-loader": "6.2.10",
    "babel-plugin-react-transform": "2.0.2",
    "babel-preset-es2015": "6.18.0",
    "babel-preset-react": "6.16.0",
    "babel-preset-stage-3": "6.17.0",
    "babel-register": "6.22.0",
    "eslint": "3.13.1",
    "eslint-config-airbnb": "14.0.0",
    "eslint-import-resolver-webpack": "0.8.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "3.0.2",
    "eslint-plugin-react": "6.9.0",
    "eslint-plugin-redux-saga": "0.1.5",
    "webpack": "2.2.0",
    "webpack-dev-middleware": "1.9.0",
    "webpack-hot-middleware": "2.14.0"
  

【讨论】：

嗨，我和你有同样的问题，但是我所有的依赖都是最新的。有什么想法吗？

@Zephir77167 首先确保您没有任何警告/错误。有时一些 peerDependencies 已经过时了。您将通过警告收到通知。如果一切正常，请尝试删除您的node_modules 文件夹并使用npm install 重新安装整个东西。如果这不能解决问题，根据您的堆栈，可能需要您使用非常新版本的包、RC 甚至 beta 包。检查 github 发布选项卡，看看是否有更新的东西可用。然后，再次相应地更新依赖项

嗨，我找到了问题的根源......我不得不在 .eslintrc > settings > import/resolver > webpack > config 中使用 path.resolve ！

对于像我一样想在这里寻找答案的人：来自这里的解决方案帮助我让它工作***.com/a/45003022/4603159