.mjs package "currently no loaders are configured to process this file" error on webpack

[marcos-parivedasolutions]

I am having an issue using the floating vue npm package in my vue 3 project. I am using webpack to bundle modules, and I get this error:

Failed to compile with 1 error in ./node_modules/floating-vue/dist/floating-vue.mjs
Module parse failed: Unexpected token (486:201) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

My interpretation of this is that floating-vue uses .mjs files, which I have not configured.

I found a reported issue on the floating-vue github that discusses this problem. So I added the suggestion to my webpack config (I already use babel, so just added an additional rule):

{
    test: /@?(floating-vue).*\.mjs$/,
    loader: 'babel-loader'
}

Is there a specific plugin for babel that I need?

I tried a suggestion of using the plugin https://www.npmjs.com/package/babel-plugin-module-extension and the following options:

  plugins: [
      ['module-extension', {
        mjs: 'js',
      }],
  ],

Here are some details from my package.json, for reference or reproducibility.

    "dependencies": {
        "floating-vue": "^5.2.2",
        "vue": "^3.2.20",
        "vue-plugin-load-script": "^2.1.1",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.2",
    },
    "devDependencies": {
        "@babel/core": "^7.16.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
        "@babel/plugin-proposal-optional-chaining": "^7.14.5",
        "@vue/cli-plugin-babel": "^4.5.15",
        "babel-loader": "^8.2.3",
        "typescript": "^4.9.0",
        "vue-loader": "^16.8.3",
        "webpack": "^4.46.0",
        "webpack-cli": "^4.9.2",
        "webpack-merge": "^4.2.2",
    },
    "engines": {
        "node": "16.x.x",
        "npm": "8.x.x"
    },