ESlint module.exports が no-undef なエラーになるとき

react-scripts で作成したプロジェクトで init で下記のようなオプションを選択して .eslintrc.js を作成しました。

$ yarn eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JavaScript
? Would you like to install them now with npm? Yes

module.exports を使っているファイルがエラーになる

lint を走らせると module.exports を使っているファイルが下記のようなエラーになってしまいます。

error  'module' is not defined       no-undef

env に node を追加する

module.exports / require は JavaScript modules の書き方ではなく、node.js の書き方なので、これらを許容する場合は .eslintrc.js の env に node も指定する必要がある

// .eslintrc.js
"env": {
  "browser": true,
  "es6": true,
  "node": true, // <- 追加
},

完
　
ESM と CJS の違い早めにおさらいして基礎部分を理解しておきたい。

---

[参考]

• JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう – WPJ

webpack 実践入門: webpackの基礎をしっかり理解して使いこなす