Eslint Ошибки разбора в импортированном модуле для изображений

В настоящее время я работаю с React Project и обычно добавляю изображения, которые использую для компонентов, следующим образом:

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

Все в порядке, и изображение в моем приложении загружается правильно. К сожалению, я получаю несколько ошибок и предупреждений при линтинге:

Parse errors in imported module '../../images/icon_cart.png': Unexpected character '�' (1:1) import/namespace

Parse errors in imported module '../../images/icon_cart.png': Unexpected character '�' (1:1) import/default

Parse errors in imported module '../../images/icon_cart.png': Unexpected character '�' (1:1) import/import/no-named-as-default

Parse errors in imported module '../../images/icon_cart.png': Unexpected character '�' (1:1) import/no-named-as-default-member

Это происходит со всеми файлами, в которые я импортирую изображение. Ниже мой .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 No default export found in module import/default

Например, все мои файлы с таким:

import webpack from ‘webpack’;

Теперь при ошибке модуля не обнаружен экспорт по умолчанию.

Что-нибудь еще не так с моей конфигурацией eslint?

Обновите свой вопрос, добавив в него пример импорта, приводящего к ошибке.

Jamie Weston 28.07.2018 14:17

Это у меня с самого начала вопрос.

lem.mallari 28.07.2018 14:19

Вы сказали, что решили эту проблему, но теперь вместо этого вы получаете ошибки с файлами JavaScript. Добавьте пример неудачного импорта JavaScript.

Jamie Weston 28.07.2018 14:26

Обновлено сейчас с образцом импорта.

lem.mallari 29.07.2018 04:14

Насколько мне известно, никогда не следует импортировать webpack в свои модули. Это инструмент сборки, а не модуль, на который нужно ссылаться в других ваших модулях. Попробуйте закомментировать все случаи этого и посмотрите, остались ли у вас ошибки.

Jamie Weston 29.07.2018 18:33

К сожалению, эта ошибка появляется в моем webpack.config.js, когда я запускаю eslint.

lem.mallari 30.07.2018 04:11

Итак, вы получаете 1:8 No default export found in module import/default внутри webpack.config.js? Вам не нужно импортировать веб-пакет в этот файл - подробности о том, что вы можете включить в файл конфигурации, см. Здесь: webpack.js.org/configuration

Jamie Weston 30.07.2018 12:04

Думаю, это невозможно. Если я не импортирую веб-пакет, то при попытке добавить такие плагины, как: new webpack.HotModuleReplacementPlugin(), я буду получать сообщения об ошибках. Кстати, я использую веб-пакет 1.13.

lem.mallari 30.07.2018 12:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
1 543
1

Ответы 1

Вы должны заставить парсер игнорировать папку, содержащую ваши изображения или гифки. В моем случае я добавил в свой eslintrc следующие свойства:

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

Другие вопросы по теме