如何集成到 remix.js 框架中?
Closed this issue · 10 comments
x-tropy commented
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 commented
补充:package.json
中已经设置 "type": "module"
leaferjs commented
leaferjs commented
如果是在服务端使用,需要安装node版本:
x-tropy commented
想尝试在浏览器中用 leafer-ui,尝试了好几种方法,无果。
x-tropy commented
有没有用 next.js 集成过的,如果有例子参照一下可能方便些
leaferjs commented
x-tropy commented
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 commented
当输入 module.default.
的时候,vscode 还能联想出包的内容来。命令行报错如下:
leafer.jsx:13 Error importing module: TypeError: Cannot read properties of undefined (reading 'Leafer')
at createLeaferInstance (leafer.jsx:8:39)
还是引用出了问题
leaferjs commented
当输入
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 commented
对的,解决了,谢谢!