V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Jtyczc
V2EX  ›  程序员

新手问下,请问 nextjs + antd 脚手架有没有手把手教学啊?

  •  1
     
  •   Jtyczc · 2023-03-20 10:18:03 +08:00 · 1997 次点击
    这是一个创建于 600 天前的主题,其中的信息可能已经有所发展或是发生改变。

    纯新手,有个报错大佬们帮忙看下:

    error - /Users/victor/IdeaProjects/next-elite-admin-web/node_modules/antd/es/form/Form.js:9
    import classNames from 'classnames';
    ^^^^^^
    
    SyntaxError: Cannot use import statement outside a module
    

    应该是这行代码报错了: import { FilterValue, SorterResult, TablePaginationConfig, } from 'antd/es/table/interface'

    我上网查了下,貌似从零建立一个项目好像很多搭配,没有脚手架直接让我业务代码开发吗

    5 条回复    2023-03-20 13:09:49 +08:00
    dawnven
        1
    dawnven  
       2023-03-20 10:34:52 +08:00
    不知 antdesign pro 能不能满足你
    cheerxl
        2
    cheerxl  
       2023-03-20 11:24:51 +08:00
    @dawnven antd pro 都和 umi 绑定了,肯定不合适
    hlwjia
        3
    hlwjia  
       2023-03-20 11:39:36 +08:00   ❤️ 1
    duan602728596
        4
    duan602728596  
       2023-03-20 13:00:44 +08:00
    nextjs 会将 node_modules 中的模块使用 require 加载,import 出现在 commonjs 中,需要将 antd 编译打包
    修改 next.config.js 文件如下:

    module.exports = {
    webpack(config, options) {
    /* 将 antd 打包到服务端生成的文件中 */
    if (options.isServer) {
    const endIndex = config.externals.length - 1;
    const externalsFunc = config.externals[endIndex];

    config.externals[endIndex] = function(ctx, callback) {
    if (/(antd|rc-|@ant-design)/i.test(ctx.request)) {
    return callback();
    }

    return externalsFunc(ctx, callback);
    };
    }
    };
    kongkx
        5
    kongkx  
       2023-03-20 13:09:49 +08:00 via iPhone
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1380 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:39 · PVG 01:39 · LAX 09:39 · JFK 12:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.