symfony / webpack-encore

A simple but powerful API for processing & compiling assets built around Webpack
https://symfony.com/doc/current/frontend.html
MIT License
2.23k stars 198 forks source link

Improve ESLint and Babel help messages, when enabling ESLint integration #1284

Closed Kocal closed 1 month ago

Kocal commented 1 month ago

While working on ESLint deprecation (requiring me to have a valid setup, etc...), those messages are displayed when you try to enable ESLint integration:

➜  sf-webpack-encore-lab git:(main) ✗ pnpm dev

> @ dev /Users/kocal/workspace/sf-webpack-encore-lab
> encore dev

Running webpack ...

 DEPRECATION  The ESLint integration is now deprecated and will be removed in the next major release. Please use the standalone ESLint CLI instead, or use the ESLint Webpack plugin directly.
  Error: No ESLint configuration has been found.

   FIX  Run command ./node_modules/.bin/eslint --init or manually create a .eslintrc.js file at   the root of your project.

  If you prefer to create a .eslintrc.js file by yourself, here is an example to get you started:

  // .eslintrc.js
  module.exports = {
      parser: '@babel/eslint-parser',
      extends: ['eslint:recommended'],
  }

  Install @babel/eslint-parser to prevent potential parsing issues: yarn add @babel/eslint-parser --dev

  You will also need to specify your Babel config in a separate file. The current
  configuration Encore has been adding for your is:

  // babel.config.js
  module.exports = {
      "sourceType": "unambiguous",
      "presets": [
          [
              "/Users/kocal/workspace/sf-webpack-encore-lab/node_modules/.pnpm/@babel+preset-env@7.25.3_@babel+core@7.25.2/node_mo  dules/@babel/preset-env/lib/index.js",
              {
                  "modules": false,
                  "targets": {},
                  "useBuiltIns": false,
                  "corejs": null
              }
          ]
      ],
      "plugins": []
  }

  Additionally, remove the .configureBabel() in webpack.config.js: this will no longer be used.
  And remove the .configureBabelPresetEnv() in webpack.config.js: this will no longer be used.

There are many errors in those messages:

  1. The option root: true is missing for ESLint
  2. I expect to see require.resolve("@babel/preset-env") instead of "/Users/kocal/workspace/sf-webpack-encore-lab/node_modules/.pnpm/@babel+preset-env@7.25.3_@babel+core@7.25.2/node_mo dules/@babel/preset-env/lib/index.js" for Babel.
  3. I expect the corejs option to be set to the current version of core-js (if exists)

With this PR, the output is now:

> encore dev

Running webpack ...

 DEPRECATION  The ESLint integration is now deprecated and will be removed in the next major release. Please use the standalone ESLint CLI instead, or use the ESLint Webpack plugin directly.
  Error: No ESLint configuration has been found.

   FIX  Run command ./node_modules/.bin/eslint --init or manually create a .eslintrc.js file at   the root of your project.

  If you prefer to create a .eslintrc.js file by yourself, here is an example to get you started:

  // .eslintrc.js
  module.exports = {
      root: true,
      parser: '@babel/eslint-parser',
      extends: ['eslint:recommended'],
  }

  Install @babel/eslint-parser to prevent potential parsing issues: yarn add @babel/eslint-parser --dev

  You will also need to specify your Babel config in a separate file. The current
  configuration Encore has been adding for your is:

  // babel.config.js
  module.exports = {
      "sourceType": "unambiguous",
      "presets": [
          [
              require.resolve("@babel/preset-env"),
              {
                  "modules": false,
                  "useBuiltIns": false,
                  "corejs": "3.38.1"
              }
          ]
      ],
      "plugins": []
  }