Vue2 は pinia を使用して非 EcmaScript モジュールから名前付きエクスポートをインポートできないことを報告します

vue2 で pinia をインポートして使用する

import {
    
     createPinia, PiniaVuePlugin } from "pinia";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();
new Vue({
    
    
  router,
  pinia,
  render: (h) => h(App),
}).$mount("#app");

エラーが発生する 非 EcmaScript モジュールから名前付きエクスポートをインポートできません

本日、古いプロジェクト(vue2)にpiniaを導入したところ、タイトルの通りエラーが報告され、対応する解決策がgithubに見つかりました。

// vue.config.js
module.exports = {
    
    
  configureWebpack: {
    
    
    module: {
    
    
      rules: [
        {
    
    
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ] 
    }
  }
}

Webpack のconfigureWebpack オプションは、Webpack の構成をカスタマイズするために使用されます。この構成では、モジュールを処理するルールは module 属性を通じて指定されます。

一致するファイルの種類は、test 属性によって指定されます。つまり、.mjs で終わるファイルです。include 属性により、node_modules ディレクトリにあるモジュール ファイルのみが処理されるように制限されます。処理タイプは type 属性を介して「javascript/auto」として指定され、これにより Webpack はこれらのモジュールを他のタイプのモジュールに変換するのではなく、通常の JavaScript ファイルとして扱うように指示されます。

一般に、このコードの役割は、node_modules ディレクトリにある .mjs ファイルを正しく処理し、それらを JavaScript モジュールとして処理できるように Webpack を構成することです。