aleph.js: Doesn't work with Microsoft's FluentUI
Component:
import React from 'https://esm.sh/react'
import { PrimaryButton } from 'https://esm.sh/@fluentui/react';
export default function Button({ width = 75 }: { width?: number }) {
return (
<PrimaryButton/>
)
}
Console:
ERROR TypeError: head.insertBefore is not a function
at Stylesheet6._createStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:254:22)
at Stylesheet6._getStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:226:39)
at Stylesheet6.insertRule (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:181:67)
at applyRegistration (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:695:29)
at styleToClassName (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:708:9)
at mergeCss (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:725:22)
at mergeStyles (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:719:12)
at file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/react@7.155.3/es2018/react.development.js:1520:31
Browser:
TypeError: Cannot read property 'deno' of null
at Home (http://localhost:8080/_aleph/pages/index.4d9dac55d.js:48:21)
at renderWithHooks (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:11639:32)
at mountIndeterminateComponent (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:13826:29)
at beginWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:14651:32)
at HTMLUnknownElement.callCallback2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:4054:34)
at Object.invokeGuardedCallbackDev (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:4080:34)
at invokeGuardedCallback (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:4115:45)
at beginWork$1 (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:17853:25)
at performUnitOfWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:17055:28)
at workLoopSync (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/react-dom@17.0.1/es2018/react-dom.development.js:17007:21)
If you use "ssr": false, // SPA mode
you still end up with the same browser error message. But no console error message.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 19 (18 by maintainers)
does this work?
@FallingSnow I don’t believe
?external
has been implemented yet, I was just pointing out that once that is implemented it could be a possible solution.