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)

Most upvoted comments

import React, { useState } from 'https://esm.sh/react'
import { PrimaryButton } from 'https://esm.sh/@fluentui/react?external=react@17.0.1'

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.