Webpack 5 Adoption · vercel/next.js · Discussion #23498 (original) (raw)

Hi. I updated my project to Next.js 12 and activated the Webpack to version 5. And now next dev and next build doesn't work. Show the following error:

Build error occurred ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

The fifth index of rules follows below:

{ test: /.+(js|jsx|mjs|ts|tsx)$/, loader: { loader: 'next-swc-loader', options: { isServer: true, pagesDir: '/Users/brunodulcetti/repositories/mosaico/cupom/site/src/pages', hasReactRefresh: false, fileReading: true, nextConfig: [Object], jsConfig: [Object] } }, include: [Function (anonymous)] }

next.config.js

const path = require('path');

const nextEnv = require('next-env'); const withPlugins = require('next-compose-plugins'); const withTM = require('next-transpile-modules')([ '@asteroid/analytics', '@asteroid/components', '@asteroid/icons', '@asteroid/shared', ]);

const withNextEnv = nextEnv({ staticPrefix: 'BRAND', });

const {BRAND} = process.env;

const securityHeaders = [ { key: 'X-Frame-Options', value: 'SAMEORIGIN', }, ];

const nextConfig = { images: { domains: ['s.zst.com.br'], }, webpack: config => { config.resolve.alias = { ...config.resolve.alias, '@asteroid/theme': path.resolve( __dirname, node_modules/@asteroid/components/src/theme/${BRAND}/, ), '@theme': path.resolve(__dirname, 'src/theme/'), };

config.module.rules.push({
  test: /\.svg$/i,
  issuer: /\.(js|ts|md)x?$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {plugins: [{removeViewBox: false}]},
        titleProp: true,
      },
    },
  ],
});

return config;

}, basePath: '/cupom-de-desconto', eslint: { ignoreDuringBuilds: true, }, staticPageGenerationTimeout: 120, compress: true,

async headers() { return [ { source: '/:all*(svg|jpg|png)', locale: false, headers: [ { key: 'Cache-Control', value: 'public, max-age=300, must-revalidate', }, ], }, { source: '/:path*', headers: securityHeaders, }, ]; }, };

module.exports = withPlugins([[[withNextEnv]], [withTM]], nextConfig);

package.json

{ "name": "cupom-front", "version": "0.0.20", "scripts": { "dev": "NODE_OPTIONS='--inspect' next dev", "dev:zoom": "NEXT_PUBLIC_BRAND=zoom BRAND=zoom yarn dev", "prod:zoom": "NEXT_PUBLIC_BRAND=zoom BRAND=zoom next build", "dev:buscape": "NEXT_PUBLIC_BRAND=buscape BRAND=buscape yarn dev", "prod:buscape": "NEXT_PUBLIC_BRAND=buscape BRAND=buscape next build", "build": "next build", "start": "next start", "postbuild": "next-sitemap" }, "dependencies": { "@asteroid/analytics": "^3.51.0", "@asteroid/components": "^3.51.0", "@asteroid/icons": "^3.51.0", "@asteroid/shared": "3.51.0", "@chakra-ui/icons": "^1.0.13", "@chakra-ui/react": "^1.4.2", "@chakra-ui/theme-tools": "1.1.2", "@emotion/react": "11.1.5", "@emotion/styled": "11.1.5", "@fontsource/montserrat": "^4.3.0", "bootstrap": "4.4.1", "classnames": "^2.3.1", "cross-fetch": "^3.1.4", "currency.js": "^1.2.2", "framer-motion": "^4.0.3", "js-cookie": "^3.0.1", "jwt-simple": "^0.5.6", "lodash": "^4.17.21", "moment": "^2.29.1", "newrelic": "^7.5.2", "next": "12.0.7", "next-compose-plugins": "^2.2.1", "next-env": "^1.1.1", "next-seo": "^4.24.0", "next-transpile-modules": "^6.4.0", "node-cache": "^5.1.2", "node-sass": "4.14.1", "nookies": "^2.5.2", "react": "^17.0.2", "react-bootstrap": "^1.6.3", "react-clamp-lines": "^3.0.2", "react-dom": "^17.0.2", "react-instantsearch-core": "^6.12.1", "react-lite-youtube-embed": "^2.2.2", "react-modal": "^3.14.3", "react-multi-carousel": "^2.8.2", "react-rating": "^2.0.5", "react-responsive-carousel": "^3.2.21", "react-share": "^4.4.0", "react-swipeable": "^7.0.0", "react-tabs": "^3.2.2", "snarkdown": "^2.0.0", "styled-components": "^5.3.5" }, "devDependencies": { "@asteroid/eslint-config": "^3.51.0", "@asteroid/prettier-config": "^3.51.0", "@asteroid/stylelint-config": "^3.51.0", "@svgr/webpack": "^5.5.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.4.3", "@types/node": "^14.6.0", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^4.28.2", "@typescript-eslint/parser": "^4.28.2", "babel-eslint": "^10.1.0", "eslint": "^7.30.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-next": "^11.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.23.4", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "file-loader": "^6.2.0", "next-sitemap": "^1.6.124", "prettier": "^2.3.2", "typescript": "4.3.2" }, "license": "MIT", "resolutions": { "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", "styled-components": "^5" } }