eslint 解析图像导入模块中的错误答案

【问题标题】：eslint Parse errors in imported module for imageseslint 解析图像导入模块中的错误
【发布时间】：2019-01-05 05:08:41
【问题描述】：

我目前正在处理一个 React 项目，我通常以这种方式添加用于组件的图像：

import CartImage from '../../images/icon_cart.png';

一切都很好，图像在我的应用程序中正确加载。不幸的是，我得到了一些 linting 错误和警告：

导入模块“../../images/icon_cart.png”中的解析错误：意外字符 '�' (1:1) 导入/命名空间

导入模块“../../images/icon_cart.png”中的解析错误：意外字符 '�' (1:1) 导入/默认

导入模块“../../images/icon_cart.png”中的解析错误：意外字符 '�' (1:1) 导入/导入/no-named-as-default

导入模块“../../images/icon_cart.png”中的解析错误：意外字符 '�' (1:1) 导入/未命名为默认成员

这发生在我导入图像的所有文件中。下面是我的 .eslintrc：

{
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    ],
    "plugins": [
        "react"
    ],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
        "jsx": true
        }
    },
    "env": {
        "es6": true,
        "browser": true,
        "node": true,
        "jquery": true,
        "mocha": true
    },
    "rules": {
        "quotes": 0,
        "no-console": 1,
        "no-debugger": 1,
        "no-var": 1,
        "semi": [1, "always"],
        "no-trailing-spaces": 0,
        "eol-last": 0,
        "no-unused-vars": 0,
        "no-underscore-dangle": 0,
        "no-alert": 0,
        "no-lone-blocks": 0,
        "jsx-quotes": 1,
        "import/no-unresolved": "off",
        "react/display-name": [ 1, {"ignoreTranspilerName": false }],
        "react/forbid-prop-types": [1, {"forbid": ["any"]}],
        "react/jsx-boolean-value": 1,
        "react/jsx-closing-bracket-location": 0,
        "react/jsx-curly-spacing": 1,
        "react/jsx-indent-props": 0,
        "react/jsx-key": 1,
        "react/jsx-max-props-per-line": 0,
        "react/jsx-no-bind": 1,
        "react/jsx-no-duplicate-props": 1,
        "react/jsx-no-literals": 0,
        "react/jsx-no-undef": 1,
        "react/jsx-pascal-case": 1,
        "react/jsx-sort-prop-types": 0,
        "react/jsx-sort-props": 0,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/no-danger": 1,
        "react/no-did-mount-set-state": 1,
        "react/no-did-update-set-state": 1,
        "react/no-direct-mutation-state": 1,
        "react/no-multi-comp": 1,
        "react/no-set-state": 0,
        "react/no-unknown-property": 1,
        "react/prefer-es6-class": 1,
        "react/prop-types": 1,
        "react/react-in-jsx-scope": 1,
        "react/require-extension": "off",
        "react/self-closing-comp": 1,
        "react/sort-comp": 1,
        "react/wrap-multilines": "off"
    },
    "settings": {
        "import/resolver": {
            "node": {
                "paths": ["src"] 
            }
        }
    }
}

然后我尝试将以下设置添加到我的 .eslintrc 文件中：

  "import/ignore": [
    ".(png)"
  ]

图像的错误消失了，但现在我的大多数 javascript 文件都出现错误，类似于以下内容：

1:8 在模块导入/默认中找不到默认导出

例如，我所有的文件都是这样的：

从‘webpack’导入 webpack；

现在在模块错误中找到没有默认导出。

我的 eslint 配置还有什么问题吗？

【问题讨论】：

请用一个导致错误的导入示例更新您的问题。
一开始就在我的问题中。
你说你解决了这个问题，但现在你得到了 JavaScript 文件的错误。添加一个失败的 JavaScript 导入示例。
现在更新了一个示例导入。
据我所知，你永远不应该将 webpack 导入到你的模块中。它是一个构建工具，而不是要在其他模块中引用的模块。尝试注释掉所有的实例，看看是否还有错误。

标签： javascript reactjs eslint eslintrc

【解决方案1】：

您必须让解析器忽略包含您的图像或 gif 的文件夹。就我而言，我在我的 eslintrc 中添加了以下属性：

  ignorePatterns: [
    'node_modules/',
    'src/serviceWorker.ts',
    'template/src/serviceWorker.ts',
    'src/assets/statics/'
  ],

【讨论】：