webpack fails to resolve modules dependencies when compiling

I got 94 erros like this:

ERROR in ./node_modules/vue3-openlayers/dist/vue3-openlayers.es.js 63:0-41
Module not found: Error: Can't resolve 'ol-ext/control/Swipe' in '/Users/ed/Documents/Projects/moreriding/moreriding/app/node_modules/vue3-openlayers/dist'
Did you mean 'Swipe.js'?
BREAKING CHANGE: The request 'ol-ext/control/Swipe' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/vue/app.js 3:0-44 52:23-36

Here is my webpack config

const path = require("path");
const WebpackNotifierPlugin = require("webpack-notifier");
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ProvidePlugin = require("webpack").ProvidePlugin;
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const webpack = require("webpack");

var config = {
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            // lazy: true,
            cacheCompression: true,
          },
        },
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /.svg/,
        use: ["raw-loader"],
      },
      {
        test: /.(png|jpg|gif)$/,
        use: ["file-loader"],
      },
      {
        test: /.css$/,
        use: [
          {
            loader: "style-loader",
            options: {
              esModule: true,
            },
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.vue$/,
        use: "vue-loader",
      },
    ],
  },
  resolve: {
    symlinks: false,
    alias: {
      vue: path.resolve(`./node_modules/vue`),
    },
  },
  optimization: {
    minimizer: [
      (compiler) => {
        return () => {
          return {
            terserOptions: {
              ecma: 2016,
              parse: {},
              compress: {},
              mangle: true, // Note `mangle.properties` is `false` by default.
              module: false,
              // Deprecated
              output: null,
              format: null,
              toplevel: false,
              nameCache: null,
              ie8: true,
              keep_classnames: undefined,
              keep_fnames: false,
              safari10: true,
            },
          };
        };
      },
    ],
    splitChunks: {
      chunks: "async",
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  watchOptions: {
    ignored: ["node_modules"],
  },
  devtool: "inline-source-map",
  mode: "development",
};

var public = Object.assign({}, config, {
  name: "public",
  entry: {
    // vue
    vue: "./src/vue/app",

    // css
    css: "./src/js/css.js",

    // APP
    app: "./src/vue/component/App.vue",

  },
  output: {
    path: path.resolve(__dirname, "./public/build"),
    filename: "[name]-[fullhash].js",
    publicPath: "/build/",
    library: ["library", "[name]"],
    libraryTarget: "umd",
    clean: true,
  },
  plugins: [
    new WebpackNotifierPlugin({
      excludeWarnings: true,
    }),

    new WebpackManifestPlugin({
      basePath: "build/",
      writeToFileEmit: true,
    }),

    new CleanWebpackPlugin({
      verbose: false,
      dry: false,
      watch: true,
    }),

    new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
    }),

    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),

    new VueLoaderPlugin(),

    new DefinePlugin({
      PRODUCTION: JSON.stringify(false),
      VERSION: JSON.stringify("5fa3b9"),
      BROWSER_SUPPORTS_HTML5: true,
      "typeof window": JSON.stringify("object"),
      NODE_ENV: JSON.stringify("development"),
      __VUE_OPTIONS_API__: JSON.stringify(true),
      __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
    }),
  ],
});

module.exports = [public];