Prerender Error

[kvedantmahajan]

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

10.19.0

What browser are you using?

NA

What operating system are you using?

macOS

How are you deploying your application?

other

Describe the Bug

next build fails the app. After adding custom sass support ( required to an external plugin - media-query-plugin) this started happening. Out of many repeated problems that are occurring due to version mismatches or other, this is the unsearchable one on internet as well. The official error on terminal points to this page, but this is too general. Importantly, my project was running fine before this change of webpack for sass-loader.

Expected Behavior

The project should build successfully.

To Reproduce

Webpack config in next.config.js file.

   webpack: function webpackConfig(config, options) {
            config.node = {
                fs: 'empty',
            };
            if (!options.isServer) {
                config.resolve.alias['@sentry/node'] = '@sentry/browser';
            }
            const { dev, isServer } = options;
            if (dev) return config;
            config.module.rules.push(
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: ['file-loader'],
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    loader: 'file-loader',
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        MediaQueryPlugin.loader,
                        'postcss-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require('sass'),
                                sassOptions: {
                                    includePaths: ['public/sass'],
                                },
                                additionalData: `$staticPath: "${staticPath}"; @import "./public/sass/settings/index.scss"; @import "./public/sass/tools/index.scss";`,
                            },
                        },
                    ],
                }
            );
            config.plugins.push(
                new MiniCssExtractPlugin({
                    filename: '[name].css',
                    chunkFilename: '[id].css',
                    ignoreOrder: true,
                }),
                new MediaQueryPlugin({
                    include: ['example'],
                    queries: {
                        'print, screen and (min-width: 75em)': 'desktop',
                    },
                })
            );

            config.resolve.alias['react'] = path.resolve(__dirname, 'node_modules', 'react');

            return config;
        },

Add some scss files to project and below are my dependencies

 "dependencies": {

        "autoprefixer": "^9.8.6",

        "next": "10.0.5",
        "next-redux-wrapper": "6.0.2",
        "next-routes": "1.4.2",
        "next-seo": "1.6.0",
        "node-html-parser": "1.2.20",
        "node-sass": "5.0.0",

        "postcss": "8.3.11",
        "postcss-flexbugs-fixes": "5.0.2",
        "postcss-preset-env": "6.7.0",
        "preact": "^10.4.1",
        "preact-render-to-string": "^5.1.4",
        "puppeteer": "2.1.0",
        "query-string": "^6.13.7",
        "react": "github:preact-compat/react#1.0.0",
        "react-dom": "github:preact-compat/react-dom#1.0.0",
        "react-redux": "6.0.0",
        "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1",

        "redux": "4.0.5",
        "redux-saga": "1.1.3",
        "sass": "1.26.10",
        "sass-loader": "10.1.1",

        "styled-jsx-plugin-sass": "^1.0.0",
        "url-join": "^4.0.1"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/eslint-parser": "^7.12.13",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/plugin-transform-react-jsx": "^7.12.17",
        "@fullhuman/postcss-purgecss": "^2.3.0",
        "add": "^2.0.6",
        "babel-plugin-module-resolver": "^4.1.0",
        "browserslist": "^4.16.3",
        "css-loader": "^5.2.7",
        "eslint": "^7.14.0",
        "eslint-config-prettier": "^6.15.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-eslint-comments": "^3.2.0",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-react": "^7.21.5",
        "eslint-plugin-react-hooks": "^4.2.0",
        "file-loader": "6.2.0",
        "glob-all": "3.2.1",
        "http-proxy-middleware": "^1.0.6",
        "husky": "^6.0.0",
        "lint-staged": "=10",
        "media-query-plugin": "1.5.0",
        "mini-css-extract-plugin": "1.6.2",
        "nodemon": "^2.0.4",
        "postcss-loader": "^4.2.0",
        "prettier": "2.2.1",
        "prop-types": "^15.7.2",
        "redux-devtools-extension": "^2.13.8",
        "webpack-bundle-analyzer": "^4.4.0",
        "yarn": "^1.22.10"
    },

build the project, error should be there. Since it is a known error, hoping a better resolution to tackle this. Basically webpack modification or customisation has been a pain. Had a base config be given like CRA, it would have been much easier on end developers.

[github-actions[bot]]

This issue has been automatically closed after 30 days of inactivity with no reproduction. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.