Disable `no-var-requires` in js

[indralukmana]

Hi there 👋

Thank you for making this project. I've been setting up new projects which incorporate ESLint, Prettier, Airbnb styles, and TypeScript. They are kind of a hassle and lots of the time I got lost fiddling with linting configurations and not actually developing 😅

This project is absolutely great idea! and it's so easy to setup. Again thank you 🎉

---

So to the main bits. I just setup a new next.js project with TypeScript. In the project there is next.config.js file which setup the next.js, there is require import and the linting throws this

Require statement not part of import statement.eslint(@typescript-eslint/no-var-requires)

which refer to this docs no var requires

I think we need to add overrides rule for this on js files. I added this piece to my .eslintrc

  overrides: [
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off',
      },
    },
  ],

Do you think this is a good idea? if so would you accept PR for this?

[arianacosta]

Hi @indralukmana ,

I'm glad Poetic has been useful to you! I'm happy to help with this issue.

What you describe makes sense. I've noticed the same thing also with files like webpack.config.js. I would like to evaluate this a little bit more in-depth to provide a solution that works for more types of projects because we need to make sure that the rule is only disabled for those config files.

In the meantime, this can be solved by adding next.config.js to the .eslintignore file.

Let me know how that goes. I'll keep you posted on my end.

[indralukmana]

Hi @arianacosta!

Absolutely, in my case, I have some scripts in my next.config.js so completely excluding it from linting in .eslintignore isn't suitable for my project. What I had done in my next.js project instead was adding the overrides I mentioned before in my .eslintrc. So my complete .eslintrc has become like this:

module.exports = {
  extends: ['./node_modules/poetic/config/eslint/eslint-config.js'],
  // Add custom rules here
  rules: {
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.tsx'] }],
  },
  overrides: [
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off',
      },
    },
  ],
}

One reference that took me to this configuration: Shopify/eslint-plugin-shopify#159

I also read somewhere else regarding this rule, but actually forgot where they were 😄

[arianacosta]

Hi @indralukmana ,

Thanks again for explaining the issue so clearly.

I went ahead and incorporated your solution. The only thing is that I kept it as a warning instead of turning it off completely. The reasoning behind that is because Airbnb rules recommend using imports over requires whenever possible (https://github.com/airbnb/javascript#modules--use-them). I think there's value in letting people know that imports are the preferred way.

Please, let me know if you find any other issues!

[d-schaffer]

is there no way to fix this without turn off the warning?