[next-less] doesn't play nice with NextJS 9.2 default css loader #598

watch-janick · 2020-01-21T06:41:09Z

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

Install packages
$ npm run dev
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

The text was updated successfully, but these errors were encountered:

timneutkens · 2020-01-21T09:33:04Z

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 · 2020-01-21T09:45:59Z

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 · 2020-01-21T09:47:56Z

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 · 2020-01-28T21:40:20Z

@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 · 2020-01-29T08:17:28Z

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 · 2020-02-25T15:11:44Z

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 · 2020-02-26T07:40:32Z

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

VityokKlymets · 2020-02-26T15:35:36Z

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 · 2020-03-04T09:15:35Z

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 · 2020-03-09T04:42:49Z

save question

ckken · 2020-03-09T05:06:30Z

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 · 2020-03-09T07:38:35Z

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 · 2020-03-09T08:10:23Z

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

ckken · 2020-03-16T05:40:06Z

@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 · 2020-03-30T13:51:20Z

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 · 2020-04-14T21:07:34Z

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
      }
    })
  )
);

betancourtl · 2020-04-18T01:40:11Z

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

betancourtl · 2020-04-18T01:41:04Z

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

betancourtl · 2020-04-18T01:56:39Z

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

gaozhitw · 2020-04-23T15:24:03Z

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 · 2020-05-02T20:59:46Z

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 · 2020-05-04T10:11:58Z

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 · 2020-05-04T14:10:27Z

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 · 2020-05-29T12:54:29Z

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 · 2020-08-07T15:36:53Z

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 · 2020-08-08T09:46:34Z

Can we update the official example with @gaozhitw answer?

StKostyantin · 2020-08-21T08:40:59Z

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

rajatkumar · 2020-09-20T20:56:35Z

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

isggwp · 2020-09-25T08:43:55Z

still getting error on me.

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

swaitw · 2020-09-27T10:38:15Z

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 · 2020-09-29T19:46:26Z

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 · 2020-10-02T15:38:55Z

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 · 2020-10-02T19:04:23Z

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 · 2020-10-04T10:40:02Z

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 · 2020-10-04T19:37:32Z

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 · 2020-10-15T10:21:46Z

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 · 2020-10-23T09:52:20Z

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 · 2020-10-23T19:30:02Z

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 · 2020-11-01T15:17:23Z

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 · 2020-11-09T01:00:29Z

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 · 2020-11-14T18:52:56Z

@timneutkens Any updates about native less support?

timneutkens mentioned this issue Jan 21, 2020

CSS loading doesn't work with next-less vercel/next.js#10179

Closed

oleast mentioned this issue Apr 5, 2020

Refactor project to NextJS dotkom/onlineweb-frontend#336

Closed

gaozhitw mentioned this issue Apr 24, 2020

Unable to configure modular imports for antd with babel-import-plugin vercel/next.js#11403

Open

timneutkens closed this as completed Jul 6, 2021

[next-less] doesn't play nice with NextJS 9.2 default css loader #598

[next-less] doesn't play nice with NextJS 9.2 default css loader #598

Comments

watch-janick commented Jan 21, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

timneutkens commented Jan 21, 2020

watch-janick commented Jan 21, 2020

timneutkens commented Jan 21, 2020 • edited Loading

snapwich commented Jan 28, 2020

timneutkens commented Jan 29, 2020

mansdahlstrom1 commented Feb 25, 2020

fangwohung commented Feb 26, 2020

VityokKlymets commented Feb 26, 2020

shrmaky commented Mar 4, 2020

ckken commented Mar 9, 2020

ckken commented Mar 9, 2020

judewang commented Mar 9, 2020 • edited Loading

judewang commented Mar 9, 2020

ckken commented Mar 16, 2020

lvkins commented Mar 30, 2020 • edited Loading

DeanMW commented Apr 14, 2020

betancourtl commented Apr 18, 2020

betancourtl commented Apr 18, 2020

betancourtl commented Apr 18, 2020

gaozhitw commented Apr 23, 2020 • edited Loading

pkail commented May 2, 2020

ebs-PriyankaKanwar commented May 4, 2020

pkail commented May 4, 2020

ipaddr commented May 29, 2020 • edited Loading

clement-faure commented Aug 7, 2020

THPubs commented Aug 8, 2020

StKostyantin commented Aug 21, 2020 • edited Loading

rajatkumar commented Sep 20, 2020

isggwp commented Sep 25, 2020

swaitw commented Sep 27, 2020

rajatkumar commented Sep 29, 2020

ercgrat commented Oct 2, 2020

rajatkumar commented Oct 2, 2020

dannysofftie commented Oct 4, 2020 • edited Loading

swaitw commented Oct 4, 2020

Hucy commented Oct 15, 2020

cgonzalezsan commented Oct 23, 2020 • edited Loading

Rykuno commented Oct 23, 2020

brunograna commented Nov 1, 2020

GVanderLugt commented Nov 9, 2020

oceandrama commented Nov 14, 2020

timneutkens commented Jan 21, 2020 •

edited

Loading

judewang commented Mar 9, 2020 •

edited

Loading

lvkins commented Mar 30, 2020 •

edited

Loading

gaozhitw commented Apr 23, 2020 •

edited

Loading

ipaddr commented May 29, 2020 •

edited

Loading

StKostyantin commented Aug 21, 2020 •

edited

Loading

dannysofftie commented Oct 4, 2020 •

edited

Loading

cgonzalezsan commented Oct 23, 2020 •

edited

Loading