NextJS: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type boolean (true)

Viewed 637

I am building a webpage with NextJS. Today I updated NextJS to version 11.0.0, typescript to 4.3.2, and react to 17.0.0. Now I am getting this error:

error - ./pages/_app.tsx
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type boolean (true)

I searched Google up and down, but could not find an answer. I stripped my custom _app.tsx to the bare minimum:

import App from 'next/app'; 
import React from 'react';
    
    export default class MyApp extends App {
    
      public render() {
        const {Component, pageProps} = this.props;
        return (
            <Component {...pageProps} />
        );   
   } 
}

but that did not work.

I also checked my next.config.js but couldn't find anything wrong with it:

const withImages = require('next-images');

const path = require('path');

const usePolling = process.env.USE_POLLING === 'true';

module.exports = withImages({
  webpack: (config, options) => {

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      exclude: /\.\.\/node_modules/,
      use: [
        {
          loader: 'next-babel-loader',
          options: {
            ...options.defaultLoaders.babel.options,
            cacheDirectory: true,
            highlightCode: true,
            plugins: [
              ['styled-components', {ssr: true, displayName: true, preprocess: false}],
              ['inline-react-svg', {ignorePattern: 'noinline.svg$', caseSensitive: true, svgo: false}]
            ]
          }
        }
      ]
    });
      config.module.rules.push({
          test: /\.svg$/,
          use: ["@svgr/webpack"]
      });
    config.module.rules.push({
      test: /\.(frag|vert|glsl)$/,
      exclude: /\.\.\/node_modules/,
      use: ['raw-loader', 'glslify-loader']
    });

    config.module.rules.push({
      test: /\.css$/,
      use: 'raw-loader'
    });
    return config;
  },
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png|js|css)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, must-revalidate'
          }
        ]
      }
    ];
  },
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 400,
      aggregateTimeout: 100
    };
    return config;
  }
});

I am using Node v14.17.0

I'm slowly losing my mind, did anyone experience the same error?

0 Answers
Related