如何集成到 remix.js 框架中？

[x-tropy]

Remix 是类似 Next.js 的基于 React 的全栈框架。

> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
(node:8750) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
3:32:08 PM [vite] Error when evaluating SSR module /app/routes/leafer.tsx: failed to import "leafer-ui"
|- /Users/haku/Developer/[6] Lab/leafer 101/node_modules/.pnpm/leafer-ui@1.0.0-rc.22/node_modules/leafer-ui/dist/web.esm.js:1
import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, Answer, MathHelper, MatrixHelper, AroundHelper, ImageEvent, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
^^^^^^

从报错来看，这里很明显连包都没引用成功，官网文档描述比较少，有没有小伙伴帮忙解答下，

[x-tropy]

补充：package.json 中已经设置 "type": "module"

[leaferjs]

应该是这个原因， 需要异步加载包：

https://leaferjs.com/ui/problem/#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93%E6%A1%86%E6%9E%B6%E6%89%93%E5%8C%85%E9%97%AE%E9%A2%98

[leaferjs]

如果是在服务端使用，需要安装node版本：

https://leaferjs.com/ui/guide/node/start.html

[x-tropy]

想尝试在浏览器中用 leafer-ui，尝试了好几种方法，无果。

[x-tropy]

有没有用 next.js 集成过的，如果有例子参照一下可能方便些

[leaferjs]

有人已经集成过了，他是看了这个例子后成功集成的，这种方法你也尝试过了？

[x-tropy]

试过的，确实不知道怎么做，等看看有这方面经验的来指点下吧，

import React, { useEffect } from 'react'

export default function LeaferComponent() {
  useEffect(() => {
    const createLeaferInstance = async () => {
      try {
        const module = await import('leafer-ui')
        const Leafer = module.default.Leafer
        new Leafer({
          view: 'leafer-canvas',
        })
      } catch (error) {
        console.error('Error importing module:', error)
      }
    }

    createLeaferInstance()
  }, []) // Empty dependency array ensures this runs only once when the component mounts

  return <canvas id="leafer-canvas"></canvas>
}

[x-tropy]

当输入 module.default. 的时候，vscode 还能联想出包的内容来。命令行报错如下：

leafer.jsx:13 Error importing module: TypeError: Cannot read properties of undefined (reading 'Leafer')
    at createLeaferInstance (leafer.jsx:8:39)

还是引用出了问题

[leaferjs]

当输入 module.default. 的时候，vscode 还能联想出包的内容来。命令行报错如下：

leafer.jsx:13 Error importing module: TypeError: Cannot read properties of undefined (reading 'Leafer')
    at createLeaferInstance (leafer.jsx:8:39)

还是引用出了问题

不加default呢？leafer-ui没有default导出～

[x-tropy]

对的，解决了，谢谢！