'ESLint ES6 Redux global-required Unexpected require();

I have this problem with ESLint and can't soulve on my own, those stores are separated for each enviroement as you can see on the screenshot, how could I fix that to make ESLint happy and I to learn a new thing?

Solution 1:^[1]

You can disable it in your .eslintrc file.

{
   rules: {
     "global-require": 0  
    }
}

Solution 2:^[2]

In my case, I imported image files in functional components like below.

export const facebookIcon = require('../../assets/images/facebook.svg')
export const googleIcon = require('../../assets/images/google.svg')
export const logoboxImage = require('../../assets/images/logo-box.svg')

To avoid this lint error I just removed 'export' in front of images, it's gone.

const facebookIcon = require('../../assets/images/facebook.svg')
const googleIcon = require('../../assets/images/google.svg')
const logoboxImage = require('../../assets/images/logo-box.svg')

Solution 3:^[3]

You can also disable it inline:

const facebookIcon = require('../../assets/images/facebook.svg'); // eslint-disable-line global-require

Solution 4:^[4]

This is the way I did in 2022 without changing the rule

<div :style="{backgroundImage: 'url(' + bg + ')'}" </div>
<script>
import bgImg from './assets/images/lg_bg.jpg';
export default {
    data() {
      return {
        bg: bgImg,
    };
  },    
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bimal Grg
Solution 2
Solution 3	Ruben O. Chiavone
Solution 4	W Kenny

'ESLint ES6 Redux global-required Unexpected require();

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]