How to use this with devlink? #48
Comments
|
I did manage to get a plain React to work this way... 
// src/utils/greetReact.tsx
/* eslint-disable no-console */
import { getPublishDate } from '@finsweet/ts-utils';
import { createRoot } from 'react-dom/client';
/**
* Test React component.
*/
export function GreetReact(props: { name: string }) {
const { name } = props;
return <h1>Hello {name}!</h1>;
}
/**
* Greets the user by printing a message in the console.
* @param name The user's name.
*/
export const greetUser = (name: string) => {
const publishDate = getPublishDate();
console.log(
`This site was last published on ${publishDate?.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: '2-digit',
})}.`
);
const reactElement = document.querySelector('[data-element="greet-react"]');
if (!reactElement) return;
const reactRoot = createRoot(reactElement);
reactRoot.render(<GreetReact name={name}/>);
};// src/index.ts
import { greetUser } from '$utils/greetReact';
window.Webflow ||= [];
window.Webflow.push(() => {
greetUser('John Doe');
}); |
|
Hey @chrisle! |
|
So i did manage to modify it more to get Devlink in but I did run into something I haven't been able to solve. // src/utils/greetReact.tsx
/* eslint-disable no-console */
import { getPublishDate } from '@finsweet/ts-utils';
import { createRoot } from 'react-dom/client';
import { useState } from 'react';
/**
* Test React component.
*/
export function GreetReact(props: { name: string }) {
const [ name, setName ] = useState(props.name);
return <h1>Hello {name}!</h1>;
}
/**
* Greets the user by printing a message in the console.
* @param name The user's name.
*/
export const greetUser = (name: string) => {
const publishDate = getPublishDate();
console.log(
`This site was last published on ${publishDate?.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: '2-digit',
})}.`
);
const reactElement = document.querySelector('[data-element="greet-react"]');
if (!reactElement) return;
const reactRoot = createRoot(reactElement);
reactRoot.render(<GreetReact name={name}/>);
};I end up getting: I understand what that means, I just couldn't figure out why. I'm not sure where JQuery.Deferred was coming into play there and if somehow it was calling the hook in a way I'm not expecting. |
I've seen this error happen in the past when the site was being loaded under Editor mode, is that the case? Have you tried opening the site in Incognito? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm wondering if there's a way to use this with DevLink.
My use case is I would like to try using Webflow to develop the frontend but bring in React components into Webflow using this repository.
The text was updated successfully, but these errors were encountered: