Vue v2.7 & Pinia v2.0.22 throwing devtools-api error during build

[NotoriousGOR]

Reproduction

N/A

Steps to reproduce the bug

Here is my dependency tree:

"dependencies": {
    "@s-r0/eggy-js": "^1.3.4",
    "@shopify/theme-predictive-search": "^4.0.0",
    "@splidejs/vue-splide": "^0.5.18",
    "axios": "^0.21.1",
    "carousel-carousel": "^0.1.24",
    "embla-carousel": "^2.9.1",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-prettier": "^3.1.4",
    "lazysizes": "^5.2.2",
    "module-name": "^0.0.1-security",
    "pinia": "^2.0.22",
    "v-tooltip": "^2.0.3",
    "vendor": "^1.7.0",
    "vue": "^2.7",
    "vue-click-outside-element": "^1.0.15",
    "vue-scrollto": "^2.20.0",
    "vue2-transitions": "^0.3.0",
    "vuejs-datepicker": "^1.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.10.1",
    "@babel/plugin-transform-destructuring": "^7.10.1",
    "@babel/plugin-transform-object-assign": "^7.10.1",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.1",
    "@shopify/eslint-plugin": "^39.0.1",
    "@shopify/stylelint-plugin": "^10.0.1",
    "@shopify/themekit": "~1.1.4",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/test-utils": "^1.0.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "browser-sync": "^2.26.7",
    "concurrently": "^5.2.0",
    "copyfiles": "^2.3.0",
    "css-loader": "^4.2.0",
    "cssnano": "^4.1.10",
    "eslint": "^7.11.0",
    "eslint-plugin-vue": "^9.0.0",
    "file-loader": "^6.0.0",
    "jest-vue-preprocessor": "^1.7.1",
    "node-watch": "^0.6.4",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "rimraf": "^3.0.2",
    "sass": "^1.26.7",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.7.2",
    "stylelint-order": "^4.1.0",
    "vue-loader": "^15.10.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  } 

I can install my dependencies with either NPM or yarn just fine. However, when I run my script for webpack to bundle everything, I keep getting the error:

ERROR in ./node_modules/pinia/dist/pinia.mjs
Module not found: Error: Can't resolve '@vue/devtools-api' in '/Users/gabe/Documents/GitHub/hive-brands/node_modules/pinia/dist'
@ ./node_modules/pinia/dist/pinia.mjs 7:0-56 505:4-23 709:4-23
@ ./src/vue/theme.js
@ ./src/scripts/theme.js
@ multi ./src/scripts/theme.js ./src/styles/theme.scss

Here is my webpack config just in case:

const path = require("path");

const VueLoaderPlugin = require("vue-loader/lib/plugin");

const webpackConfig = {
  mode: "production",
  resolve: {
    alias: {
      "@scripts": path.resolve(__dirname, "src/vue"),
      "@vue": path.resolve(__dirname, "src/vue")
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /theme.scss/,
        exclude: /node_modules/,
        use: [
          {
            loader: "file-loader",
            options: { name: "theme.min.css" }
          },
          "sass-loader"
        ]
      },
      {
        test: /checkout.scss/,
        exclude: /node_modules/,
        use: [
          {
            loader: "file-loader",
            options: { name: "checkout.min.css" }
          },
          "sass-loader"
        ]
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

const themeConfig = {
  ...webpackConfig,
  name: "theme",
  entry: [
    `${__dirname}/src/scripts/theme.js`,
    `${__dirname}/src/styles/theme.scss`
  ],
  output: {
    path: path.join(__dirname, "src/assets"),
    filename: "theme.min.js"
  }
};

const checkoutConfig = {
  ...webpackConfig,
  name: "checkout",
  entry: [
    `${__dirname}/src/scripts/checkout.js`,
    `${__dirname}/src/styles/checkout.scss`
  ],
  output: {
    path: path.join(__dirname, "src/assets"),
    filename: "checkout.min.js"
  }
};

module.exports = [themeConfig, checkoutConfig];

Expected behavior

Build step to work

Actual behavior

Error: Module not found: Error: Can't resolve '@vue/devtools-api' in '/Users/gabe/Documents/GitHub/hive-brands/node_modules/pinia/dist' is thrown

Additional information

No response

[simonRNF]

I am facing exactly the same issue. Did you ever resolve it @NotoriousGOR ?
Using vue 2.7.16 & pinia 2.2.4

Installing @vue/devtools-api will only lead to more Module not found errors.