Doesn't work with Microsoft's FluentUI #75

FallingSnow · 2020-12-31T21:20:21Z

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/[email protected]/es2018/react.development.js:254:22)
    at Stylesheet6._getStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:226:39)
    at Stylesheet6.insertRule (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:181:67)
    at applyRegistration (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:695:29)
    at styleToClassName (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:708:9)
    at mergeCss (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:725:22)
    at mergeStyles (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:719:12)
    at file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v13/@fluentui/[email protected]/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.

The text was updated successfully, but these errors were encountered:

shadowtime2000 · 2020-12-31T22:14:05Z

@FallingSnow Is the component a page or just a component which is used in a page? If it is a component which is used in a page could you share the page it is used in?

FallingSnow · 2020-12-31T22:40:56Z

It was used in a page. I've created a minimal repo where there is only 2 additions, the import and usage.

https://github.com/FallingSnow/aleph.js-issue-75/blob/6d9e20809ce3c2d7031a541dd945225b765b60d2/app.tsx#L3

shadowtime2000 · 2020-12-31T23:55:18Z

It seems to be that the reason that the SPA mode is failing is because useDeno is being used, but I don't think that is supported in SPA mode because it is meant for build time in SSR/SSG. I am going to look more into why useDeno is failing in SSR/SSG and I think the insertBefore problem is with insertBefore not being implemented in the Deno DOM Virtual Element class but I am not sure. I will look into implementing insertBefore and related methods in the virtual SSR DOM.

ije · 2021-01-01T12:40:23Z

maybe we can add ssr support in app.tsx, please ref https://github.com/microsoft/fluentui/blob/2858fcaf942682621467b87aaef5d1be47f8ce47/packages/utilities/src/dom/setSSR.ts

FallingSnow · 2021-01-04T00:09:29Z

Oh you're right, if you remove useDeno there is a new error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react.development.js:790:31)
    at useEffect2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react.development.js:816:66)
    at useFocusRects (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:2687:5)
    at FocusRects (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/@fluentui/[email protected]/es2018/react.development.js:2713:37)
    at renderWithHooks (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:9106:32)
    at mountIndeterminateComponent (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:10439:29)
    at beginWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:11215:32)
    at HTMLUnknownElement.callCallback2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:2701:97)
    at Object.invokeGuardedCallbackDev (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:2724:34)
    at invokeGuardedCallback (http://localhost:8080/_aleph/-/cdn.esm.sh/v13/[email protected]/es2018/react-dom.development.js:2751:151)

Could this be caused because there are two different reacts imported when doing

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

shadowtime2000 · 2021-01-04T00:20:30Z

@FallingSnow Yeah, it is probably because of 2 different React's being pulled in. @ije and I discussed this in #59, and we decided that a ?external=some-library@some-other-library-link would best fit. I can't remember off the top of my head if having the library use the same version of React would fix this problem though.

FallingSnow · 2021-01-04T00:28:13Z

I don't think it does. I'm using the following and the error remains.

import React, { useState } from 'https://esm.sh/[email protected]?dev'
import { PrimaryButton } from 'https://esm.sh/@fluentui/[email protected]'

shadowtime2000 · 2021-01-04T00:29:20Z

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

FallingSnow · 2021-01-04T00:42:43Z

Oh, I see. Thanks for pointing that out.

For what it's worth, I tried loading with jspm and got the same error.

Skypack gave me this error, which seems completely off (BaseExtendedPeoplePicker in dateMath.js...)

Uncaught (in promise) SyntaxError: The requested module '../../@fluentui/[email protected]/dist=es2020,mode=raw/lib/dateMath/dateMath.js' does not provide an export named 'BaseExtendedPeoplePicker'

ije · 2021-01-04T03:14:38Z

import React, { useState } from 'https://esm.sh/react'
import { PrimaryButton } from 'https://esm.sh/@fluentui/[email protected]'

does this work?

ije · 2021-01-04T03:15:36Z

since aleph uses react 17.0.1 as default.

ije · 2021-01-04T03:20:00Z

and please try to delete the _aleph folder to avoid esm.sh CDN conflict because i updated the esm.sh server yesterday.

FallingSnow · 2021-01-04T16:48:38Z

Easy peasy lemon squeezy, works! Wow that was rather painless and simple. Thanks!

ije · 2021-01-04T17:01:05Z

cool!

FallingSnow · 2021-01-04T17:20:43Z

Should point out that while in SSR mode, you still get the following in the console. It also flashes in the browser when first loading the page, then disappears and displays normal.

ERROR TypeError: head.insertBefore is not a function
    at Stylesheet6._createStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:177:22)
    at Stylesheet6._getStyleElement (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:151:39)
    at Stylesheet6.insertRule (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:120:67)
    at applyRegistration (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:532:29)
    at styleToClassName (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:545:9)
    at mergeCss (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:561:22)
    at mergeStyles (file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:555:12)
    at file:///home/ayrton/Coding/node/mmes/server/.aleph/development.es2018/-/cdn.esm.sh/v14/@fluentui/[email protected]/[email protected]/es2018/react.development.js:1247:31

Nether is experienced when using "ssr": false, // SPA mode.

ije · 2021-01-04T17:37:17Z

maybe you need the Asynchronous Import .

FallingSnow · 2021-01-04T19:45:01Z

Does this mean I'd have to use <Import> on everything component uses a @fluentui/react component?

c0per · 2021-09-05T10:55:13Z

```js
import React, { useState } from 'https://esm.sh/react'
import { PrimaryButton } from 'https://esm.sh/@fluentui/[email protected]'

does this work?

I'm facing the same issue with Material-UI. I replaced "external" to "deps", and it worked. Maybe the "external" hasn't been implemented yet.

ije · 2021-09-05T11:00:45Z

@c0per ?external has been moved to ?deps

shadowtime2000 added the ✘ bug Something isn't working label Dec 31, 2020

shadowtime2000 mentioned this issue Jan 1, 2021

feat: insert before method element deno dom #76

Closed

ije added 🅝 npm package NPM package support and removed ✘ bug Something isn't working labels Jan 1, 2021

FallingSnow closed this as completed Jan 4, 2021

c0per mentioned this issue Sep 5, 2021

Hooks can only be called inside of the body of a function component. #232

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work with Microsoft's FluentUI #75

Doesn't work with Microsoft's FluentUI #75

FallingSnow commented Dec 31, 2020

shadowtime2000 commented Dec 31, 2020

FallingSnow commented Dec 31, 2020

shadowtime2000 commented Dec 31, 2020

ije commented Jan 1, 2021

FallingSnow commented Jan 4, 2021

shadowtime2000 commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

shadowtime2000 commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

ije commented Jan 4, 2021

ije commented Jan 4, 2021

ije commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

ije commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

ije commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

c0per commented Sep 5, 2021

ije commented Sep 5, 2021

Doesn't work with Microsoft's FluentUI #75

Doesn't work with Microsoft's FluentUI #75

Comments

FallingSnow commented Dec 31, 2020

shadowtime2000 commented Dec 31, 2020

FallingSnow commented Dec 31, 2020

shadowtime2000 commented Dec 31, 2020

ije commented Jan 1, 2021

FallingSnow commented Jan 4, 2021

shadowtime2000 commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

shadowtime2000 commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

ije commented Jan 4, 2021

ije commented Jan 4, 2021

ije commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

ije commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

ije commented Jan 4, 2021

FallingSnow commented Jan 4, 2021

c0per commented Sep 5, 2021

ije commented Sep 5, 2021