module not found: Error: Can't resolve 'pnpapi' in '/app/node_modules/next/dist/lib'

[Raphael2k6]

module not found: Error: Can't resolve 'pnpapi' in '/app/node_modules/next/dist/lib'

Encountered this bug error when when I tried to build my next app.

Build error occurred Error: > Build failed because of webpack errors at build (/app/node_modules/next/dist/build/index.js:15:918) at process._tickCallback (internal/process/next_tick.js:68:7

• OS: macOS
• Browser chrome
• Version of Next.js: ^9.5.5
• Version of Node.js: 12.18.3

[jamesmosier]

Hi @Raphael2k6. Could you please provide a complete reproduction of this issue?

[Raphael2k6]

hello @jamesmosier, thank you for your response. I am sharing below my package.json and next.config files perhaps a trace can be done to the issue. The app built normally before now, but on running next build, to start my production build, I encountered the error message I shared. Thanks.

{
  "name": "kongapay-ssr-app",
  "version": "1.0.0",
  "author": "",
  "license": "ISC",
  "main": "server.js",
  "scripts": {
    "dev": "next dev -p ${PORT}",
    "build": "next build",
    "start": "next start -p ${PORT}",
    "reactstart": "react-scripts start",
    "storybook": "start-storybook -p 9009",
    "styleguide": "styleguidist server"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "dependencies": {
    "@svgr/webpack": "^5.4.0",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.20.0",
    "bootstrap": "^5.0.0-alpha1",
    "chart.js": "^2.8.0",
    "express": "^4.17.1",
    "file-loader": "^4.2.0",
    "helmet": "^4.0.0",
    "logger": "0.0.1",
    "next": "^9.5.5",
    "next-offline": "^5.0.2",
    "next-svgr": "0.0.2",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "pm2": "^4.4.0",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-bootstrap": "^1.3.0",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.10.2",
    "react-number-format": "^4.3.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "react-transition-group": "^4.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@storybook/react": "^5.1.11",
    "react-styleguidist": "^9.1.14"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

const nextConfig = {
    target: 'serverless',
    transformManifest: manifest => ['/'].concat(manifest),

    workboxOpts: {
        swDest: 'public/service-worker.js',
        runtimeCaching: [
            {
                urlPattern: /^https?.*/,
                handler: 'NetworkFirst',
                options: {
                    cacheName: 'https-calls',
                    networkTimeoutSeconds: 15,
                    expiration: {
                        maxEntries: 150,
                        maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
                    },
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
        ],
    },

    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'file-loader',
                options: {
                    limit: 100000
                }
            }
        });
        if (process.env.NODE_ENV === 'production') {
            config.module.rules.push({
                test: /\.(svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100000
                    }
                }
            });
        } else {
            config.module.rules.push({
                test: /\.svg$/,
                issuer: {
                    test: /\.(js|ts)x?$/,
                },
                use: ['@svgr/webpack'],
            });
        }

        return config;
    },
};

if (process.env.NODE_ENV === 'production') {
    module.exports = withSASS(withOffline(nextConfig));
} else {
    module.exports = (withOffline(nextConfig));
}

[jamesmosier]

I still wasn't able to reproduce. Could you create a Github repository showing the issue?

Also have you tried removing your node_modules folder and then reinstalling your dependencies?

[Raphael2k6]

Thank you @jamesmosier, I was able to sort out the issue, next was wrongly imported into one of the files in the app and as soon as I took it out the error cleared and the the app built.

[HiDana]

I meet the same problem when building the Nexjs. After I remove the no use import item (import { NextPage } from "next";). And everything is working normally.😂

[kapilbhosale]

I was also facing the same issue

ModuleNotFoundError: Module not found: Error: Can't resolve 'pnpapi' in '/Users/kapilbhosale/WORK/app/node_modules/next/dist/lib'

I checked imports from 'next' and found one unused import. import next from 'next';

Removed it, and it worked. Hope this helps. Thank you.

[Rashmi-278]

I meet the same problem when building the Nexjs. After I remove the no use import item (import { NextPage } from "next";). And everything is working normally.

I tried this , it seems to be an issue but it didn't solve the problem

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.