Could not resolve "pnpapi" with Webpack 5.74.0

Hi all,

I'm trying to deploy my NextJS 12.3.1 app to Firebase using Firebase CLI 11.16.0 with Yarn 1.22.19.

But I'm getting the following error when deploying with regards to pnpapi.

My next.config.js file is as follows...

/** @type {import('next').NextConfig} */

const path = require("path");

const withTM = require("next-transpile-modules")([
  "@virgilsecurity/e3kit-browser",
  "virgil-crypto",
  "@virgilsecurity/pythia-crypto",
]);

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  compiler: {
    removeConsole: {
      exclude: ["error", "debug"],
    },
  },
  async rewrites() {
    return [
      {
        source: "/@:username",
        destination: "/:username",
      },
    ];
  },
  webpack: (config) => {
    config.experiments = {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      backCompat: true,
    };
    config.module.rules[
      config.module.rules.findIndex((rule) => rule.oneOf)
    ].oneOf.unshift({
      test: /\.wasm$/,
      type: "javascript/auto",
      loader: "file-loader",
      options: {
        outputPath: "static/wasm/",
      },
    });

    return config;
  },
};

module.exports = withTM(nextConfig);

Note I've had to customise my webpack config for WASM due to Virgil security e3kit.

I've seen some previous issues about pnpapi but there's no other error in my project, and the TS compiler isn't complaining about my project code.

This is my package.json for reference...

{
  "name": "thecannabisapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "serve": "firebase serve",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export",
    "emulator": "firebase emulators:start"
  },
  "dependencies": {
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.5",
    "@googlemaps/js-api-loader": "^1.14.3",
    "@mui/icons-material": "^5.10.9",
    "@mui/material": "^5.10.12",
    "@stream-io/stream-chat-css": "^3.7.0",
    "@tanstack/react-query": "^4.14.1",
    "@tanstack/react-query-devtools": "^4.14.1",
    "@virgilsecurity/e3kit-browser": "^2.4.5",
    "autosuggest-highlight": "^3.3.4",
    "date-fns": "^2.29.3",
    "firebase": "^9.13.0",
    "formik": "^2.2.9",
    "framer-motion": "^7.6.3",
    "libphonenumber-js": "^1.10.14",
    "mui-markdown": "^0.5.5",
    "mui-tel-input": "^2.0.4",
    "next": "12.3.1",
    "next-pwa": "^5.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.0.3",
    "react-hot-toast": "^2.4.0",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1",
    "stream-chat": "^8.1.0",
    "stream-chat-react": "^10.3.1",
    "yup": "^0.32.11",
    "yup-phone": "^1.3.2"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/emoji-mart": "^3.0.9",
    "@types/google.maps": "^3.50.4",
    "@types/grecaptcha": "^3.0.4",
    "@types/node": "18.11.9",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "eslint": "8.26.0",
    "eslint-config-next": "12.3.1",
    "file-loader": "^6.2.0",
    "next-transpile-modules": "^9.1.0",
    "sass": "^1.55.0",
    "typescript": "4.8.4"
  },
  "author": "chinesehemp"
}

Any help to resolve this issue is greatly appreciated!

webpack / enhanced-resolve

Could not resolve "pnpapi" with Webpack 5.74.0 #360