Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doesn't work with Microsoft's FluentUI

See original GitHub issue

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.

Issue Analytics

State:
Created 3 years ago
Comments:19 (18 by maintainers)

Top GitHub Comments

1reaction

ijecommented, Jan 4, 2021

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

does this work?

1reaction

shadowtime2000commented, Jan 4, 2021

@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.

Top Results From Across the Web

Issues · microsoft/fluentui - GitHub

Fluent UI web represents a collection of utilities, React components, and web components for building web applications. - Issues · microsoft/fluentui.

Fluent UI - Get started - Microsoft Developer

A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

microsoft fluent UI library doesn't work with react 18

microsoft fluent -UI/react library did not work on my project when I included it, what is the best way to make this work...

Improve Your Creative Process with Microsoft Fluent Design ...

The Fluent UI lets us borrow from shared experiences, tools, and communication and allows creators to become more efficient, saving creative energy for...

Tweets with replies by Fluent UI (@fluentui) / Twitter

Fluent UI is a collection of open-source, cross-platform UX frameworks that implement Microsoft's ... Jaw-dropping work by Microsoft's Fluent Design System.