js Block 引入外部资源困难。就是Block 没有有效的报错信息提示，js Block相关文档太少

中文讨论区
1

尝试渲染了一个react组件，报错提示，求改正
[error] SyntaxError: Possible import expression rejected at :18. (SES_IMPORT_REJECTED) (at 5:358)

const {React} =ctx;
const { Button, Steps } =ctx.antd;
// import { CheckCircleFilled, UserOutlined } from ‘@ant-design/icons’;

const SubmitSuccess = () => {
const handleBackToList = () => {
console.log(‘返回列表’);
// 这里可以添加路由跳转逻辑
};
const [iconsModule, setIconsModule] = React.useState(null);

React.useEffect(() => {
// 2. 在 useEffect 中执行异步加载
const loadIcons = async () => {
try {
// 等待 import() Promise 解析
const loadedIcons = await ctx.importAsync(‘https://unpkg.com/@ant-design/icons@5.3.7/dist/index.umd.min.js’);

    // 3. 加载成功后，将模块对象存入 state
    setIconsModule(loadedIcons);
    console.log('Icons module loaded successfully!', loadedIcons);

  } catch (error) {
    console.error('Failed to load icons module', error);
  }
};

loadIcons();

}, ); // 空依赖数组，确保只在组件挂载时执行一次

// 4. 在模块加载完成前，显示一个加载指示器
if (!iconsModule) {
return (


正在加载图标…

);
}
const {CheckCircleFilled, UserOutlined } = iconsModule;

const handleViewProject = () => {
console.log(‘查看项目’);
// 这里可以添加查看项目详情的逻辑
};

const handlePrint = () => {
console.log(‘打印’);
window.print();
};

return (
<div style={{
// minHeight: ‘100vh’,
width:“100%”,
backgroundColor: ‘#f5f5f5’,
padding: ‘40px 20px’,
display: ‘flex’,
justifyContent: ‘center’,
alignItems: ‘center’
}}>
<div style={{
backgroundColor: ‘#ffffff’,
borderRadius: ‘8px’,
padding: ‘60px 40px’,
boxShadow: ‘0 4px 12px rgba(0,0,0,0.1)’,
maxWidth: ‘800px’,
width: ‘100%’,
textAlign: ‘center’
}}>
<div style={{ marginBottom: ‘24px’ }}>
{/* <CheckCircleFilled style={{
fontSize: ‘64px’,
color: ‘#52c41a’,
backgroundColor: ‘#f6ffed’,
borderRadius: ‘50%’,
padding: ‘16px’
}} /> */}

    {/* 标题 */}
    <h1 style={{
      fontSize: '28px',
      fontWeight: '600',
      color: '#262626',
      marginBottom: '16px',
      margin: '0 0 16px 0'
    }}>
      提交成功
    </h1>

    {/* 描述文字 */}
    <p style={{
      fontSize: '14px',
      color: '#8c8c8c',
      lineHeight: '1.6',
      marginBottom: '40px',
      maxWidth: '600px',
      margin: '0 auto 40px auto'
    }}>
      提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。
      本文字区域可以展示简单的补充说明，如果有类似展示"单据"的需求，下面这个灰色区域可以呈现比较复杂的内容。
    </p>

    {/* 操作按钮 */}
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      gap: '12px',
      marginBottom: '48px'
    }}>
      <Button 
        type="primary" 
        size="large"
        onClick={handleBackToList}
        style={{
          borderRadius: '6px',
          padding: '8px 24px',
          height: 'auto'
        }}
      >
        返回列表
      </Button>
      <Button 
        size="large"
        onClick={handleViewProject}
        style={{
          borderRadius: '6px',
          padding: '8px 24px',
          height: 'auto'
        }}
      >
        查看项目
      </Button>
      <Button 
        size="large"
        onClick={handlePrint}
        style={{
          borderRadius: '6px',
          padding: '8px 24px',
          height: 'auto'
        }}
      >
        打印
      </Button>
    </div>

    {/* 项目详情卡片 */}
    <div style={{
      backgroundColor: '#fafafa',
      borderRadius: '8px',
      padding: '24px',
      textAlign: 'left',
      marginBottom: '32px'
    }}>
      <h3 style={{
        fontSize: '16px',
        fontWeight: '500',
        color: '#262626',
        marginBottom: '20px',
        margin: '0 0 20px 0'
      }}>
        项目名称
      </h3>

      {/* 项目基本信息 */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '24px',
        flexWrap: 'wrap',
        gap: '16px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
          <span style={{ fontSize: '14px', color: '#8c8c8c' }}>
            项目 ID：<span style={{ color: '#262626' }}>23421</span>
          </span>
          <span style={{ fontSize: '14px', color: '#8c8c8c' }}>
            负责人：<span style={{ color: '#262626' }}>曲丽丽</span>
          </span>
        </div>
        <span style={{ fontSize: '14px', color: '#8c8c8c' }}>
          生效时间：<span style={{ color: '#262626' }}>2016-12-12 ~ 2017-12-12</span>
        </span>
      </div>

      {/* 进度条 */}
      <Steps
        current={1}
        size="small"
        items={[
          {
            title: '创建项目',
            description: (
              <div style={{ fontSize: '12px', color: '#8c8c8c', marginTop: '4px' }}>
                <div>曲丽丽 
                  {/* <UserOutlined style={{ marginLeft: '4px' }} /> */}
                  </div>
                <div style={{ marginTop: '2px' }}>2016-12-12 12:32</div>
              </div>
            ),
            status: 'finish'
          },
          {
            title: '部门初审',
            description: (
              <div style={{ fontSize: '12px', color: '#8c8c8c', marginTop: '4px' }}>
                <div>周毛毛 <span style={{ color: '#1890ff', cursor: 'pointer' }}>催一下</span></div>
              </div>
            ),
            status: 'process'
          },
          {
            title: '财务复核',
            status: 'wait'
          },
          {
            title: '完成',
            status: 'wait'
          }
        ]}
        style={{
          marginTop: '8px'
        }}
      />
    </div>
  </div>
</div>

);
};
ctx.render()

2

感谢反馈，我们正在完善文档。