wallabyjs / quokka

Repository for Quokka.js questions and issues
https://quokkajs.com
1.18k stars 31 forks source link

can this be used in ant design pro? #874

Closed hanyanxx1 closed 1 year ago

hanyanxx1 commented 1 year ago

Issue description or question

hello,I am a front-end developer in China. Recently bought the Pro version of your product.

Recently, the company's project used a set of Ali's front-end framework called Ant Design Pro.

https://pro.ant.design/zh-CN/docs/getting-started

This is actually a set of frameworks that are packaged again on the basis of umi4

https://umijs.org/

umi4 is a react framework that integrates many functions

Recently I tried to use quokka on this framework project of the company.

Execute "Start On Current file" under this code file, he executed it for a long time, and then reported this error

Sample code

import { useModel } from '@umijs/max';
import { PageContainer, ProColumns } from '@ant-design/pro-components';
import { deleteLink, getLinkersList } from './service';
import { useState } from 'react';
import { Avatar, Popconfirm, Space, Typography } from 'antd';
import { DigTable } from '@/components';
import AddLinkPopupWindow from './AddLinkPopupWindow';

const { Link } = Typography;

const columns: ProColumns[] = [
  {
    title: '名称',
    dataIndex: 'name',
    width: '20%',
    render: (dom, record) => {
      return (
        <Space>
          <Avatar src={record.icon || '/uc/images/link/connect.png'} shape="circle" />
          {record.name}
        </Space>
      );
    },
  },
  {
    title: '类型',
    align: 'center',
    width: '20%',
    dataIndex: 'type',
    render: (value: any) => {
      const list: any = {
        HTTP: 'HTTP',
        DATABASE: 'Database',
      };
      return (value && list[value]) || '-';
    },
  },
  {
    title: '描述',
    dataIndex: 'description',
    hideInSearch: true,
  },
  {
    title: '操作',
    width: '10%',
    align: 'center',
    dataIndex: 'option',
    valueType: 'option',
    render: (_, record, index, action) => {
      return (
        <Space>
          <Link
            onClick={() => {
              // todo: history.push(`/link/manage/edit?id=${record.id}`);
            }}
          >
            编辑
          </Link>
          <Popconfirm
            key="del"
            title="确定要删除吗?"
            onConfirm={async () => {
              await deleteLink(record.id);
              action?.reload();
            }}
            okText="确定"
            cancelText="取消"
          >
            <Link>删除</Link>
          </Popconfirm>
        </Space>
      );
    },
  },
];

const LinkersList = () => {
  const [visible, setVisible] = useState(false);
  const { linkTableRef } = useModel('Link.Manage.model');

  return (
    <PageContainer title={false}>
      <AddLinkPopupWindow visible={visible} onClose={setVisible.bind(null, false)} />
      <DigTable
        headerTitle="连接器列表"
        actionRef={linkTableRef}
        request={getLinkersList}
        columns={columns}
        addAction={{ text: '创建连接器', action: setVisible.bind(null, true) }}
      />
    </PageContainer>
  );
};

export default LinkersList;

/**********
 * Add necessary imports and tell react to render your component into the DOM
 *********/
import * as ReactDOM from 'react-dom/client';
import { act } from 'react-dom/test-utils';

// Tell react that we are in a test environment
global.IS_REACT_ACT_ENVIRONMENT = true;

// Get a handle to the DOM element that we want to render into
const container = document.getElementById('root');

// Render your component into the DOM
// The act function is required to ensure that the component is rendered synchronously
act(() => {
  const root = ReactDOM.createRoot(container);
  root.render(<LinkersList />);
});

// Log the DOM to the console
console.log(container.innerHTML);

Sample repository link

If the issue can not be reproduced just using the quokka file above (for example because it requires/imports some files from your project), please create a small repository where the issue can be reproduced.

Quokka.js Console Output

​​​undefined (/Users/hanyanxx1/Documents/digitalsee/IAM-Console-Antd-New/node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js)​​​

Code editor version

Visual Studio Code v1.78.1

OS name and version

Linux

ArtemGovorov commented 1 year ago

Hello,

Quokka runs your file in node/ts-node with JSDOM when required, so it's possible that some of the framework code that you are using has some issues when executing in node. The best way to troubleshoot is to try and make your file run in ts-node/JSDOM without Quokka first. If it's working, Quokka should be able to run it too.