Bug: Uncaught Error: Expected options to be injected

[zhongmeizhi]

Describe the bug
Uncaught Error: Expected options to be injected

实际定位到的异常代码是在 fetch-preload.ts 中的 loadJs 方法加载文件 "http://localhost:4000/mometa/mometa-client-render.627066b810abe6de77c5.bundler.js" 导致的。

因为我使用了公司内部的物料库，物料库的 iconfont.css 中包含相对路径，如：

@font-face {
  font-family: "xxx-iconfont";
  src: url('./iconfont/iconfont.woff2') format('woff2'),
       url('./iconfont/iconfont.woff') format('woff'),
       url('./iconfont/iconfont.ttf') format('truetype');
}

该代码会报错 Uncaught TypeError: Failed to construct 'URL': Invalid URL 之后会被error传递为 Uncaught Error: Expected options to be injected

To Reproduce
Steps to reproduce the behavior:

1. 使用内部含有相对路径的 css 文件的物料库
2. run start:app:cr

Expected behavior
无

Screenshots

Environment (please complete the following information):

• mometa version:
• macOS v11.6
• node.js v16.13.1

Additional context
无

[imcuttle]

物料库是如何书写的，应该不会引入样式文件才对

[zhongmeizhi]

组件库和样式引入的原因：

1. mometa-material.config.js引入内部组件库：

module.exports = [
  {
    name: '@内部库/xxx', 
    key: '@内部库/xxx',
    assetGroups: [
      {
        name: '通用',
        key: 'general',
        assets: [
          {
            name: '按钮',
            key: 'AbcButton',
            cover: 'https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg',
            data: {
              code: '<AbcButton type="default">按钮</AbcButton>',
              dependencies: {
                ByButton: {
                  source: '@内部库/xxx',
                  mode: 'named'
                }
              }
            }
          },
        ]
      }
    ]
  },
]

2. 导入时babel生成引入代码： import {AbcButton} from '@内部库/xxx'
3. 在该 node_modules/@内部库/xxx/es/index.js内部引入了 import './components/AbcButton/style/index.css';

PS：

1. 因为内部组件库在一个整个公司内部使用，剥离改动概率非常小，只能考虑兼容。
2. #26 该 issue 也类似，由于内部组件库名称导致的BUG

[imcuttle]

应该是在编译完成后，在 node 端执行代码抛出的异常，可以展示传入 experimentalMaterialsClientRender=false 关闭该特性

[zhongmeizhi]

关闭确实可以解决这个问题

[zhongmeizhi]

那node端以后会支持css中引入字体吗？

[imcuttle]

那node端以后会支持css中引入字体吗？

在你的应用项目中，webpack配置，对于第三方组件库内的 import 'xx.css' 有支持吗？如果有支持的话，应该可行，可以拉一下最新代码，editor/example 目录中有新加一个内置 import 'xx.css' 的例子

[zhongmeizhi]

嗯。我跑的是这个项目的 packages/app，对于 import 'xx.css' 是没问题的，只是对于 css 内部的 url('./iconfont/iconfont.woff2') format('woff2') 不支持

[imcuttle]

@zhongmeizhi 能否提供一个能复现该问题的最小单元 repo，我这边使用都是正常的，猜测是 css 样式 loader 差异导致的