Configuration with Next.js

[tuler]

I'm trying to use Chessboard with a Next.js application, but pieces are not being rendered correctly. Pieces URL are being rendered as:

<image x="240" y="240" width="40" height="40" href="[object Object]"></image>

I'm not sure if some Webpack configuration is missing here. I tried to customize Next.js Webpack configuration like below:

/** @type {import('next').NextConfig} */
const nextConfig = {
    swcMinify: true,
    webpack: (config) => {
        config.module.rules.push({
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        });
        config.module.rules.push({
            test: /\.(png|woff|woff2)$/i,
            type: "asset/resource",
        });
        return config;
    },
};

export default nextConfig;

But I get the warnings below, and it still doesn't work.

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

Is there any example out there that uses Next.js?

[yo35]

Given that piece image URLs are rendered as href="[object Object]", I guess the problem comes from how Next.js loads images brought by 3rd-party dependencies (.i.e. images located in the node_modules folder). I suggest you contact the Next.js team on this issue.

And if the chessboards look OK (except being empty), then it means there is no problem with CSS loading. It would be a good idea to avoid adding any custom CSS-related configuration rules to the default Next.js config in that case.

[tuler]

Found a similar problem here, tried its solution, but it did not work.