Webpack loader 處理esm.js文件

Question

我將這個 npm package添加到我的 Vue.js 項目中，並按照說明將插件添加到我的main.js文件中。

當我使用npm run serve在本地運行項目時，出現此錯誤：

./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

這似乎是esm.js文件類型的問題。 我閱讀並嘗試了 web 上幾十個線程中給出的解決方案，但到目前為止還沒有成功。

這是我的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"
  ]
}

這是我的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: {
    }
    
};

這是我的babel.config.js ：

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

我試圖在嘗試調試時將"type": "module"添加到我的package.json中，但這會引發我的vue.config.js不是模塊的問題。

我也為webpack.config.js文件嘗試了幾個選項，但它們都不起作用，所以我現在沒有 webpack 配置文件。

歡迎任何解決此問題的建議！

Answer 1

嘗試將 type: "module" 添加到您的 pakage.json。 這告訴 webpack 它是一個 moduke 或 esn 文件。 Bu default I thing webpack 將把它當作一個沒有類型屬性的 commonjs 文件