Next-plugins: [next-less] doesn't play nice with NextJS 9.2 default css loader

[watch-janick]

Bug report

Describe the bug

NextJS 9.2 CSS loading doesn't work when using next-less

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

https://github.com/watch-janick/nextjs-css-with-less

1. Install packages
2. $ npm run dev
3. Unable to load the CSS file in _app.js

Expected behavior

The CSS should load natively without any configuration as of NextJS 9.2

System information

• Version of Next.js: 9.2.0
• Version of next-less: 1.0.1

[timneutkens]

When you add any of the css related plugins, including less/sass, it disables built-in support for CSS loading. This was done to ensure the new CSS support does not conflict with existing apps.

[watch-janick]

Alright thank you for the answer.

Maybe you can tell me why I can't use next-css with the next-with-ant-design-less example?

Whenever I try to import a .css file, I get this kind of error:

.container {
^
SyntaxError: Unexpected token .

I'm using next-css without CSS modules.

[timneutkens]

Not sure, would have to investigate, however we're going to deprecate next-css soon. Could potentially investigate it under enterprise support. Feel free to email [email protected].

[snapwich]

@timneutkens what do you mean, "deprecate next-css"? you mean to say next-css and all of the preprocessor plugins, e.g. next-sass, next-less, next-stylus will no longer work in future versions of Next.js?

[timneutkens]

you mean to say next-css and all of the preprocessor plugins, e.g. next-sass, next-less, next-stylus will no longer work in future versions of Next.js?

Deprecation doesn't mean "will not work", it means those plugins won't be maintained as better solutions exist (built-in to Next.js).

Built-in CSS support is already disabled for backwards compat when you add any of the plugins you mentioned.

[mansdahlstrom1]

When you add any of the css related plugins, including less/sass, it disables built-in support for CSS loading. This was done to ensure the new CSS support does not conflict with existing apps.

@timneutkens
Is there a way to modify this behaviour via settings in next.config.js? Also how does the roadmap look for importing both css and less files for a next js >9.2 project? Are you dropping support for less/sass?

[fangwohung]

i want to use nextjs and antd in my product, but i have trouble in the same problem. Any help?

[VityokKlymets]

i want to use nextjs and antd in my product, but i have trouble in the same problem. Any help?

I think we still need to use this config, and hope for better future (next js 9.2)

const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withLess({
    webpack(config, options) {
      return config;
    }
  })
);

[shrmaky]

Issue in inbuilt css support

I am also facing the issue when i removed the next-css from next.config.js

FYI:

Any suggestions.

cc @timneutkens

[ckken]

save question

[ckken]

i want to use nextjs and antd in my product, but i have trouble in the same problem. Any help?

I think we still need to use this config, and hope for better future (next js 9.2)

const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withLess({
    webpack(config, options) {
      return config;
    }
  })
);

no work

[judewang]

Composing next-css and next-less still cannot work. This is my configs:

const withCSS = require('@zeit/next-css');
const withLess = require('@zeit/next-less');
const withPlugins = require('next-compose-plugins');
const fs = require('fs');
const path = require('path');

const nextConfig = {
  env: {},
};

const plugins = [
  withCSS,
  withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
    },
    webpack: (config, { isServer }) => {
      // Fixes npm packages that depend on `fs` module
      config.node = {
        fs: 'empty',
      };

      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        });
      }

      return config;
    },
  }),
];

module.exports = withPlugins(plugins, nextConfig);

[judewang]

@ckken I found a work around, just change the order of withCSS and withLess, then it worked.

[ckken]

@ckken I found a work around, just change the order of withCSS and withLess, then it worked.

yes,it work now for me ,thanks

[lvkins]

This is so annoying. I'm generally using CSS in my project, including CSS modules. Built-in CSS support is making it working seamlessly. I decided to use LESS loader for the sake of external library (antd), that required me to change the next.config.js configuration. Right now, next no longer knows how to handle vanilla CSS files across my project. I basically need to reinvent the wheel, and configure CSS loader from the scratch to support normal CSS, CSS modules and PostCSS. This is so stupid. Is there any reason not to reuse existing, built-in CSS support, if we are not overriding it in our next.config.js anyways? It really makes no sense to me.

---

When you add any of the css related plugins, including less/sass, it disables built-in support for CSS loading. This was done to ensure the new CSS support does not conflict with existing apps.

Still, CSS loader shouldn't conflict with LESS loader and vice versa. Furthermore, why not give programmer a possibility to enable (or include) built-in loader that will work along other loaders if needed?

[DeanMW]

Having the same issue with @zeist/next-sass

▶ yarn dev
yarn run v1.21.1
$ next dev
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

[ error ] ./assets/css/styles.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

This is with the following versions:

    "next": "9.3.2",
    "next-images": "^1.4.0",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",

and the following next.config.js

const withImages = require('next-images');
const path = require('path');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');


module.exports = withSass(
  withCSS(
    withImages({
      cssModules: true,
      webpack(config, options) {
        config.resolve.alias['assets'] = path.join(__dirname, 'assets');
        config.resolve.alias['components'] = path.join(__dirname, 'components');
        return config
      }
    })
  )
);

[webdeveloperpr]

Same issue how can I load sass and css files in my project? this is very confusing.

[webdeveloperpr]

Would it be better/easier to ditch next/css and next/sass for a custom webpack solution that just works?

[webdeveloperpr]

Looks like I will have to dive into webpack land once more, see you guys next year.

[gaozhitw]

I used the following configuration to integrate the built-in loader, less-loader and Ant Design Less.

const withLess = require('@zeit/next-less');
// const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// const themeVariables = lessToJS(
//   fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
// );

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    // modifyVars: themeVariables,
  },
  webpack: (config, { isServer, dev }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }

    const builtInLoader = config.module.rules.find((rule) => {
      if (rule.oneOf) {
        return (
          rule.oneOf.find((deepRule) => {
            if (deepRule.test && deepRule.test.toString().includes('/a^/')) {
              return true;
            }
            return false;
          }) !== undefined
        );
      }
      return false;
    });

    if (typeof builtInLoader !== 'undefined') {
      config.module.rules.push({
        oneOf: [
          ...builtInLoader.oneOf.filter((rule) => {
            return (rule.test && rule.test.toString().includes('/a^/')) !== true;
          }),
        ],
      });
    }

    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
});

Version of Next.js: 9.3.5

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

[pkail]

I have the same problem. I need less to use antd, but it seems that functionality for less is broken (none of the suggestions above works).
Is there an older version of next.js in which this worked?

[ebs-PriyankaKanwar]

I have the same problem. I have using next-CSS but they are giving me a warning and when I removed the next-CSS from next.config.my style CSS is not loaded chunks in the production.
Can you plz help me.

[pkail]

Next.js seems to work fine so long as you don't use a next.config file and delete any such files that appear in your folder. The documentation on this is extremely sparse, and wrong in some cases.

I solved the Less problem by using Easy Less, which works well (if you have VSCode).

[ipaddr]

I used the following configuration to integrate the built-in loader, less-loader and Ant Design Less.

const withLess = require('@zeit/next-less');
// const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// const themeVariables = lessToJS(
//   fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
// );

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    // modifyVars: themeVariables,
  },
  webpack: (config, { isServer, dev }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }

    const builtInLoader = config.module.rules.find((rule) => {
      if (rule.oneOf) {
        return (
          rule.oneOf.find((deepRule) => {
            if (deepRule.test && deepRule.test.toString().includes('/a^/')) {
              return true;
            }
            return false;
          }) !== undefined
        );
      }
      return false;
    });

    if (typeof builtInLoader !== 'undefined') {
      config.module.rules.push({
        oneOf: [
          ...builtInLoader.oneOf.filter((rule) => {
            return (rule.test && rule.test.toString().includes('/a^/')) !== true;
          }),
        ],
      });
    }

    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
});

Version of Next.js: 9.3.5

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

@gaozhitw how you override the primary color of ant-design? this works on build version but not on dev version.

[clement-faure]

Same problem here, i would like to use withLess only to use a custom theme in ant design and use built-in css modules in my project. Code can be found here https://github.com/clement-faure/next-antd-graphql-starter

[THPubs]

Can we update the official example with @gaozhitw answer?

[StKostyantin]

@timneutkens Are there any plans to add a default less configuration as now done with css and scss?

[rajatkumar]

I used the following configuration to integrate the built-in loader, less-loader and Ant Design Less.

const withLess = require('@zeit/next-less');
// const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// const themeVariables = lessToJS(
//   fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
// );

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    // modifyVars: themeVariables,
  },
  webpack: (config, { isServer, dev }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }

    const builtInLoader = config.module.rules.find((rule) => {
      if (rule.oneOf) {
        return (
          rule.oneOf.find((deepRule) => {
            if (deepRule.test && deepRule.test.toString().includes('/a^/')) {
              return true;
            }
            return false;
          }) !== undefined
        );
      }
      return false;
    });

    if (typeof builtInLoader !== 'undefined') {
      config.module.rules.push({
        oneOf: [
          ...builtInLoader.oneOf.filter((rule) => {
            return (rule.test && rule.test.toString().includes('/a^/')) !== true;
          }),
        ],
      });
    }

    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
});

Version of Next.js: 9.3.5

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

This works in dev mode, but running next build blows up and errors out with

Failed to compile.
Error: No module factory available for dependency type: CssDependency

[qipoy]

still getting error on me.

Failed to compile.
Error: No module factory available for dependency type: CssDependency

[swaitw]

I used the following configuration to integrate the built-in loader, less-loader and Ant Design Less.

const withLess = require('@zeit/next-less');
// const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// const themeVariables = lessToJS(
//   fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
// );

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    // modifyVars: themeVariables,
  },
  webpack: (config, { isServer, dev }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }

    const builtInLoader = config.module.rules.find((rule) => {
      if (rule.oneOf) {
        return (
          rule.oneOf.find((deepRule) => {
            if (deepRule.test && deepRule.test.toString().includes('/a^/')) {
              return true;
            }
            return false;
          }) !== undefined
        );
      }
      return false;
    });

    if (typeof builtInLoader !== 'undefined') {
      config.module.rules.push({
        oneOf: [
          ...builtInLoader.oneOf.filter((rule) => {
            return (rule.test && rule.test.toString().includes('/a^/')) !== true;
          }),
        ],
      });
    }

    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
});

Version of Next.js: 9.3.5
.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

@gaozhitw how you override the primary color of ant-design? this works on build version but not on dev version.

I used the following configuration to integrate the built-in loader, less-loader and Ant Design Less.

const withLess = require('@zeit/next-less');
// const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// const themeVariables = lessToJS(
//   fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
// );

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    // modifyVars: themeVariables,
  },
  webpack: (config, { isServer, dev }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }

    const builtInLoader = config.module.rules.find((rule) => {
      if (rule.oneOf) {
        return (
          rule.oneOf.find((deepRule) => {
            if (deepRule.test && deepRule.test.toString().includes('/a^/')) {
              return true;
            }
            return false;
          }) !== undefined
        );
      }
      return false;
    });

    if (typeof builtInLoader !== 'undefined') {
      config.module.rules.push({
        oneOf: [
          ...builtInLoader.oneOf.filter((rule) => {
            return (rule.test && rule.test.toString().includes('/a^/')) !== true;
          }),
        ],
      });
    }

    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
});

Version of Next.js: 9.3.5

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

i tried this setting, i do remove all errors, but all settings in postcss.config.js does not work anymore after use this setting, i try to use tailwindcss and antd together. currently i have to use both withCSS and withLess. only use withLess it will keep show "Module parse failed: Unexpected character '@' (1:0)" error

[rajatkumar]

So in the end, I decided to separate out the LESS and SCSS build processes. Now I have an explicit watch step that watches any edits to *.less and *.scss files, builds the final output (css files), and the NextJS app just consumes these css files. Anytime the css files change, next auto-refreshes the screen. No custom next config needed.

[ercgrat]

So in the end, I decided to separate out the LESS and SCSS build processes. Now I have an explicit watch step that watches any edits to *.less and *.scss files, builds the final output (css files), and the NextJS app just consumes these css files. Anytime the css files change, next auto-refreshes the screen. No custom next config needed.

Where are you configuring a watch step? This solution seems elegant.

[rajatkumar]

node-sass supports --watch flag, and for less files, I used less-watch-compiler npm package.
Also, I used the npm-run-all package (works with yarn too) to run the watchers in parallel

As an example package.json > scripts

...
    "build:less": "lessc --js ./styles/less/custom-antd.less ./styles/build/custom-antd.css",
    "build:scss": "node-sass --omit-source-map-url ./styles/custom-bulma.scss ./styles/build/custom-bulma.css",
    "watch:less": "less-watch-compiler --config ./less-watch.config.json",
    "watch:scss": "yarn run build:scss --watch",
    "watch:dev": "next",
    "watch": "npm-run-all --parallel watch:*"
...

For less files I am using these config settings in the less-watch.config.json file

{
    "watchFolder": "./styles/less",
    "outputFolder": "./styles/build/",
    "mainFile": "custom-antd.less",
    "sourceMap": false,
    "enableJs": true
}

Make sure you are importing your css files in the _app.js file, something like this:

import 'styles/build/custom-antd.css';
import 'styles/build/custom-bulma.css';

With these changes, I was able to remove next.config.js! My existing *.module.css files also work (basically all nextjs' CSS support works)

Finally, just run yarn watch! Hope that helps.

[dannysofftie]

This is what works for me, simple config but works like a charm. Had these issues for hours. Am using antd but it work just fine with other libraries.

I don't have .babelrc

This is my next.config.js

const withImages = require("next-images");
const { withPlugins } = require("next-compose-plugins");
const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");
const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, "assets/antd-custom.less"), "utf-8"));

const config = {
  distDir: "_next", // changes from .next to _next to enable serving static assets with nginx's minimal configuration
  trailingSlash: false,
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 100000,
          name: "[name].[ext]",
        },
      },
    });
    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
      }),
    );

    return config;
  },
};

module.exports = withPlugins([withImages, withCss, withLess], config);

[swaitw]

This is what works for me, simple config but works like a charm. Had these issues for hours. Am using antd but it work just fine with other libraries.

I don't have .babelrc

This is my next.config.js

const withImages = require("next-images");
const { withPlugins } = require("next-compose-plugins");
const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");
const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, "assets/antd-custom.less"), "utf-8"));

const config = {
  distDir: "_next", // changes from .next to _next to enable serving static assets with nginx's minimal configuration
  trailingSlash: false,
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 100000,
          name: "[name].[ext]",
        },
      },
    });
    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
      }),
    );

    return config;
  },
};

module.exports = withPlugins([withImages, withCss, withLess], config);

this way works fine, but just one concern which is the withCss plugin use old version of postcss and long time no update, also may be other features not supported when you disable the build-in css loader.

[Hucy]

This next.config.js works for me, I can use cssModules and Antd less in both dev and build environments.

const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')
const withCss = require('@zeit/next-css')

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './antd.less'), 'utf8')
)

module.exports = withCss({
  cssModules: true,
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables
    },
    webpack: (config, { isServer, dev }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/
        const origExternals = [...config.externals]
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback()
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback)
            } else {
              callback()
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals)
        ]

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader'
        })
      }
      config.resolve.alias['@'] = path.resolve(__dirname)
      return config
    }
  })
})

[cgonzalezsan]

I'm also getting the below error when running npm run build. Has anyone managed to fix this?

Failed to compile.
Error: No module factory available for dependency type: CssDependency

[Rykuno]

I'm also getting the below error when running npm run build. Has anyone managed to fix this?

Failed to compile.
Error: No module factory available for dependency type: CssDependency

I'm using antdesign with sass loader, I'm also having the same issue upon building.

[brunograna]

I'm also getting the below error when running npm run build. Has anyone managed to fix this?

Failed to compile.
Error: No module factory available for dependency type: CssDependency

I'm using antdesign with less loader, I'm also having the same issue upon building.

[GVanderLugt]

I have been wrestling with this issue for nearly 3 days now trying to find an elegant solution that would also work with Storybook.js. Right now it seems like everyone is just scrambling. Can we not get an official response from someone on what the best way to proceed here is?

[oceandrama]

@timneutkens Any updates about native less support?