Webpack loader to process esm.js file

Question

I added this npm package to my Vue.js project and followed the instructions to add the plugin in my main.js file.

When I run the project locally with npm run serve I'm getting this error:

./node_modules/@laruiss/vue-dsfr/dist/vue-dsfr.esm.js 954:31
Module parse failed: Unexpected token (954:31)
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

It seems this is an issue with the esm.js file type. I read and tried solutions given in dozens of thread on the web, but no luck so far.

This is my package.json :

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --public 127.0.0.1",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@laruiss/vue-dsfr": "^1.0.0-beta.39",
    "@vue/compat": "^3.1.0",
    "axios": "^0.21.4",
    "bootstrap": "^5.1.0",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.2",
    "vue": "^3.1.0",
    "vue-router": "^4.0.5",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "^4.5.15",
    "@vue/cli-plugin-router": "^4.5.15",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

This is my vue.config.js :

module.exports = {
    chainWebpack: (config) => {
        config.resolve.alias.set('vue', '@vue/compat')

        config.module
          .rule('vue')
          .use('vue-loader')
          .tap((options) => {
            return {
              ...options,
              compilerOptions: {
                compatConfig: {
                  MODE: 2
                }
              }
            }
          })
    },

    devServer: {
        watchOptions: {
            ignored: ['node_modules', /public/],
        },
    },

    pwa: {
    }
    
};

This is my babel.config.js :

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

I have tried to add "type": "module" to my package.json while attempting to debug this, but it would raise the issue that my vue.config.js was not a module.

I have also tried several options for a webpack.config.js file but none of them worked either, so I don't have a webpack config file for now.

Any advice to solve this issue is welcome !

Answer 1

Try adding type: "module" to your pakage.json. This tells webpack its a moduke or esn file. Bu default I thing webpack will comsoder it a commonjs file without the type propertym