ESLint ES6 Redux global-required 意外的 require();

Question

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?

Answer 1

It's because you're requiring in branched code: http://eslint.org/docs/rules/global-require .

If you don't want to change your code, just add disabling comments:

/* eslint-disable global-require */

// your code here

/* eslint-enable global-require */

Answer 2

You can disable it in your .eslintrc file.

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

Answer 3

You can also disable it inline:

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

Answer 4

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')

Answer 5

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>