Module parse failed: Unexpected character '@' when using React on Rails with Antd.

Question

I'm using React on Rails and have been trying to use Antd UI framework.

I have successully imported components from 'antd' like buttons and Datepickers

import { Button } from 'antd';

but they are not styled at all. Looking at my server I have the following error...

ERROR in ./node_modules/antd/lib/button/style/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "../../style/themes/default";
| @import "../../style/mixins/index";
| @import "./mixin";
 @ ./node_modules/antd/lib/button/style/index.js 5:0-23
 @ ./app/javascript/packs/application.js

ERROR in ./node_modules/antd/lib/style/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "./themes/default";
| @import "./core/index";
|

I have tried a few different ways to access the styles like directly references the specific stylesheet in my jsx file

//app/javascript/bundles/Page/components/Page.jsx
import React, { Component } from "react";

// import { Button, DatePicker } from 'antd'
import { Button } from 'antd';
// import Button from 'antd/lib/button';
// import 'antd/lib/button/style/css';

export default class Page extends Component {

  render() {
    return (
      <div >
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
      </div>
    );
  }
}

---

Looking at the Antd docs, I have followed the Importing on demand technique and added

"import", {
  "libraryName": "antd",
  "style": "css",  
  }
]

to my .babelrc file

https://ant.design/docs/react/getting-started#Import-on-Demand

I have also tried to install the less and less-loader as I'm pretty sure it has something to do with a css file containing an '@' which indicates to me that it is a less or sass file.

---

The only successful way I've been able to load the styles is by putting

@import 'antd/dist/antd.css';

in my app/assets/stylesheets/page.scss.

While this option works, it does not allow for the ability to import on demand and feels like the incorrect way to import the css as it uses the rails asset pipeline instead of webpack ( via webpacker)

Answer 1

For me the issue was that I needed to have differently configured .less loaders in webpack for both the .less files found in antd's modules & the .less files I had written locally in my project.

For Antd I have this (Note that it's excluding /src/):

            {
            test: /\.(less)$/,
            exclude: [
                /\.(css)$/,
                /src/
            ],
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader"
                },
                {
                    loader: "less-loader",
                    options: {
                        javascriptEnabled: true,
                        modifyVars: get_theme()
                    }
                }
            ]
        },

And for my own .less files I have this:

            {
            test: /\.(less)$/,
            exclude: [
                /\.(css)$/,
                /node_modules/
            ],
            use: [{
                loader: 'style-loader' // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: "less-loader",
                options: {
                    javascriptEnabled: true
                }
            }]
        },

Versions of dependencies for this that I was using:

"css-loader": "^3.3.2",
"less": "3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"style-loader": "^1.2.1",
"antd": "4.4.2",
"webpack": "^4.43.0",