use plugins: ['import'] in my Eslintrc.js but Still reporting errors about dynamic import

[JealousyProgress]

// .eslintrc.js
module.exports = {
  extends: ["eslint:recommended"],
  env: {
    node: true, 
    browser: true, 
  },
  plugins: ["import"], 
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, 
  },
};

/* webpack.config.js */
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin') 

const path = require('path')
const os = require('os')
const threads = os.cpus.length

const getPresetLoader = (...pre) => {
  return [
    MiniCssExtractPlugin.loader, 
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: ['postcss-preset-env'] 
        }
      }
    },
    ...pre
  ].filter(Boolean)
}

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/bundle.js',
    clean: true,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, '../'),
      "@src": path.resolve(__dirname, '../src')
    },
  },
  mode: 'production',
  devtool: 'source-map', 
  module: {
    rules: [
      {
        // 文件只能被其中一个laoder命中
        oneOf: [
          {
            test: /\.txt$/,
            use: 'raw-loader'
          },
          {
            test: /\.css$/,
            use: getPresetLoader()
          },
          {
            test: /\.s[ac]ss$/,
            use: getPresetLoader('sass-loader')
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 
              }
            },
            generator: {
              filename: 'static/images/[hash:10][ext][query]' 
            }
          },
          {
            test: /\.(ttf|woff2?)$/,
            type: 'asset/resource', 
            generator: {
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            test: /\.js$/,
            include: path.resolve(__dirname, '../src'),
            use: [
              {
                loader: 'thread-loader',
                options: {
                  works: threads 
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true, 
                  cacheCompression: false, 
                  plugins: ["@babel/plugin-transform-runtime"],
                },
              }
            ]
          },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../static/index.html'),
    }),
    new ESLintPlugin({
      context: path.resolve(__dirname, '../src'),
      extensions: 'js', 
      exclude: 'node_modules', 
      emitError: true,
      emitWarning: true,
      failOnError: true,
      failOnWarning: false, 
      quiet: false, 
      cache: true, 
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads,
    }),
    new MiniCssExtractPlugin({
      filename: 'static/css/main.css'
    }),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerWebpackPlugin(),
      new TerserWebpackPlugin({ 
        parallel: threads,
      }),
    splitChunks: { 
      chunks: 'all',
    }
  }
}

when i use dynamic import and build project terminal console error

[ljharb]

The import plugin has nothing to do with dynamic import, and that particular parsing error indicates that index.js is using a static import in the wrong place. What's in src/index.js?

[JealousyProgress]

document.getElementById('btn').onclick = function () { import('./utils/sum.js').then(({sum}) => { console.log(sum(1, 2, 3)) }) } only this case , close this case , build success, open this case , terminal console that error

[ljharb]

Your ecmaVersion is set to 6, which is ES2015, which doesn't have dynamic import. This has nothing to do with the import plugin - you'll need to use a later ecmaVersion.