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?