eslint Parse errors in imported module for images

Question

I'm currently working with a React Project and I typically add images I use for components in this way:

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

All is well and the image loads up properly in my app. Unfortunately the are some linting errors and warnings that I get:

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

This happens to all files where I import an image. Below is my .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"] 
            }
        }
    }
}

I then tried adding the following settings to my .eslintrc file:

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

The error for the images went away but now I keep getting errors for most of my javascript files similar to below:

1:8 No default export found in module import/default

For example, all my files with this:

import webpack from ‘webpack’;

Now gets the no default export found in module error.

Anything else wrong with my eslint configuration?

Please update your question with an example of an import that's giving the error. — Jamie Weston, Jul 28 '18 at 12:17
You said you solved that issue, but that now you get errors with the JavaScript files instead. Add an example of a failing JavaScript import. — Jamie Weston, Jul 28 '18 at 12:26
As far as I'm aware, you should never import webpack into your modules. It's a build tool, not a module to be referenced inside your other modules. Try commenting out all instances of that and see if you still have errors. — Jamie Weston, Jul 29 '18 at 16:33
Unfortunately that error shows up in my webpack.config.js when I run eslint. — lem.mallari, Jul 30 '18 at 02:11
So you're getting `1:8 No default export found in module import/default` inside webpack.config.js? You shouldn't need to import webpack into that file - see here for details on what you can include in the config file: https://webpack.js.org/configuration/ — Jamie Weston, Jul 30 '18 at 10:04
I think it's not possible. If I don't import webpack then I'll be getting errors when I try to add plugins like: `new webpack.HotModuleReplacementPlugin()` By the way, I'm using webpack 1.13. — lem.mallari, Jul 30 '18 at 10:19

score 0 · Answer 1 · answered Dec 08 '20 at 22:51

You have to make the parser ignore the folder that contains your images or gifs. In my case I added to my eslintrc the following properties:

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

eslint Parse errors in imported module for images

1 Answers1