#Error while migrating next v12 to v13

1 messages · Page 1 of 1 (latest)

pulsar falcon
#

ypeError: Cannot read properties of undefined (reading 'and')
at Object.webpack (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next-transpile-modules@9.0.0/node_modules/next-transpile-modules/src/next-transpile-modules.js:201:60)
at Object.webpack (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/@next+bundle-analyzer@12.1.5/node_modules/@next/bundle-analyzer/index.js:19:29)
at getBaseWebpackConfig (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack-config.js:2210:32)
at async Promise.all (index 0)
at async Span.traceAsyncFn (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:105:20)
at async Span.traceAsyncFn (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:105:20)
at async HotReloader.start (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/hot-reloader-webpack.js:596:37)
at async startWatcher (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-utils/setup-dev.js:953:5)
at async setupDev (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-utils/setup-dev.js:1522:20)
at async initialize (/Users/user/Desktop/Programming/codejam/node_modules/.pnpm/next@13.5.3_@babel+core@7.17.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:70:23)

green patioBOT
#

Hi @pulsar falcon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. The error you're encountering seems to be related to your specific project setup and might be caused by a variety of factors, such as a misconfiguration in your next.config.js or an issue with one of your dependencies.

The information extracts provided do not contain specific information about this error. I would recommend checking your next.config.js file and ensuring that your dependencies are correctly installed and configured.

For more information, you can refer to the Next.js documentation on configuring TypeScript (https://nextjs.org/docs/app/building-your-application/configuring/typescript) and configuring ESLint (https://nextjs.org/docs/app/building-your-application/configuring/eslint).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@pulsar falcon kapa.ai is still learning and improving, please let us know how it did by reacting below

pulsar falcon
#

this is my next.config.js
const withTM = require("next-transpile-modules")(["ui"]);
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(
withTM({
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
images: {
domains: ["media.istockphoto.com", "images.unsplash.com"],
},
trailingSlash: true,
async rewrites() {
return [
{
source: '/api/:path*/',
destination: http://localhost:8000/:path*/,
},
// {
// source: "/api/:path*/",
// destination: https://steep-thunder-production-0a14.up.railway.app/:path*/,
// },
];
},
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "X-XSS-Protection",
value: "0",
},
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Permissions-Policy",
value:
"accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), interest-cohort=()",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
],
},
];
},
})
);

pulsar falcon
# green patio ---------------------- Hmm, I don't know enough to give you a confident answer y...

this is my next.config.js
this is my next.config.js
const withTM = require("next-transpile-modules")(["ui"]);
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(
withTM({
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
images: {
domains: ["media.istockphoto.com", "images.unsplash.com"],
},
trailingSlash: true,
async rewrites() {
return [
{
source: '/api/:path*/',
destination: http://localhost:8000/:path*/,
},
// {
// source: "/api/:path*/",
// destination: https://steep-thunder-production-0a14.up.railway.app/:path*/,
// },
];
},
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "X-XSS-Protection",
value: "0",
},
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Permissions-Policy",
value:
"accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), interest-cohort=()",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
],
},
];
},
})
);

#

@green patio
this is my next.config.js
this is my next.config.js
const withTM = require("next-transpile-modules")(["ui"]);
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(
withTM({
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
images: {
domains: ["media.istockphoto.com", "images.unsplash.com"],
},
trailingSlash: true,
async rewrites() {
return [
{
source: '/api/:path*/',
destination: http://localhost:8000/:path*/,
},
// {
// source: "/api/:path*/",
// destination: https://steep-thunder-production-0a14.up.railway.app/:path*/,
// },
];
},
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "X-XSS-Protection",
value: "0",
},
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Permissions-Policy",
value:
"accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), interest-cohort=()",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
],
},
];
},
})
);

green patioBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Your next.config.js file seems to be correctly set up for a typical Next.js project. It includes configurations for transpiling modules, bundle analyzing, image domains, trailing slashes, rewrites, and headers.

Here's a brief overview of what each part does:

  • next-transpile-modules allows you to transpile certain modules in node_modules. In your case, it's set to transpile a module named "ui".

  • @next/bundle-analyzer is used to analyze your application's bundle size. It's enabled when the ANALYZE environment variable is set to "true".

  • reactStrictMode is enabled, which activates additional checks and warnings for your components.

  • typescript.ignoreBuildErrors is set to true, which means TypeScript errors won't fail the build.

  • images.domains is set to allow images from "media.istockphoto.com" and "images.unsplash.com".

  • trailingSlash is set to true, which means that all routes will have a trailing slash.

  • rewrites is an async function that returns an array of rewrite rules. Currently, it's set to rewrite all /api/:path*/ requests to <http://localhost:8000/:path*/.>

  • headers is an async function that returns an array of custom headers. You've set several security-related headers here.

If you're encountering issues, they might be related to these configurations or to other parts of your project. For more information on configuring your Next.js application, you can refer to the official Next.js documentation (https://nextjs.org/docs/app/building-your-application/configuring).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: