0

I am setting up nextjs with antd using less based on the official example at next/examples github page. My nextjs page using antd component doesn't load when click on the link to the page. Those other pages without antd component loads up successfully.

Below are the codes which I used to setup with-ant-design-less. I doubt there is any syntax error in the codes cause I just copied from next's official examples site

my full code link in case you like to take a look

Anyone encountered such behavior and has managed to resolve it? Thanks

.babelrc

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

next.config.js

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
  require.extensions[".less"] = file => {};
}

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  }
});

antd-custom.less

@primary-color: #52c41a;

@layout-header-height: 40px;
@border-radius-base: 2px;

signin.jsx

import {
  Form,
  Select,
  InputNumber,
  DatePicker,
  Switch,
  Slider,
  Button
} from "antd";

const FormItem = Form.Item;
const Option = Select.Option;

export default () => (
  <div style={{ marginTop: 100 }}>
    <Form layout="horizontal">
      <FormItem
        label="Input Number"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 8 }}
      >
        <InputNumber
          size="large"
          min={1}
          max={10}
          style={{ width: 100 }}
          defaultValue={3}
          name="inputNumber"
        />
        <a href="#">Link</a>
      </FormItem>

      <FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
        <Switch defaultChecked name="switch" />
      </FormItem>

      <FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
        <Slider defaultValue={70} />
      </FormItem>

      <FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
        <Select
          size="large"
          defaultValue="lucy"
          style={{ width: 192 }}
          name="select"
        >
          <Option value="jack">jack</Option>
          <Option value="lucy">lucy</Option>
          <Option value="disabled" disabled>
            disabled
          </Option>
          <Option value="yiminghe">yiminghe</Option>
        </Select>
      </FormItem>

      <FormItem
        label="DatePicker"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 8 }}
      >
        <DatePicker name="startDate" />
      </FormItem>
      <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
        <Button size="large" type="primary" htmlType="submit">
          OK
        </Button>
        <Button size="large" style={{ marginLeft: 8 }}>
          Cancel
        </Button>
      </FormItem>
    </Form>
  </div>
);
Hendry Lim
  • 1,929
  • 2
  • 21
  • 45
  • the link doesn't work because you are using a private repo change it to public – evgeni fotia May 19 '19 at 19:00
  • sorry. i have changed the repo to public. thanks :) – Hendry Lim May 19 '19 at 23:43
  • Hi. Please note the next folder in my current repo is working. I cloned someone else's example which uses antd and is working ok. my previous codes next-x190519 which followed nextjs github examples still can't work – Hendry Lim May 20 '19 at 01:34
  • Hi, were you able to solve your issue? I have the similar problem and the only notable difference in the page that isn't loading is that it's using a component that imports CSS – MNSH Jun 02 '19 at 21:28
  • 1
    I've found this issue is open on their [Github Page](https://github.com/zeit/next-plugins/issues/282). The current workaround is importing an empty style sheet into your _app.js – MNSH Jun 02 '19 at 22:00
  • Thanks MNSH. I haven't been able to resolve the issue. I ll take a look at the open issue. Thanks for pointing out the open issue – Hendry Lim Jun 04 '19 at 02:06
  • 1
    This issue solved here: https://stackoverflow.com/questions/57542802/build-error-occurred-in-node-modules-antd-lib-style-index-css7/57543812#57543812 – Majid Savalanpour Aug 18 '19 at 11:07

1 Answers1

0

The simplest solution for next.js & antd to work together is to create _app.js on pages folder with the following code:

import 'antd/dist/antd.css';
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

no need for additional adjustments.

keikai
  • 14,085
  • 9
  • 49
  • 68
Efi Gordon
  • 406
  • 1
  • 6
  • 9