Skip to content

Conversation

@iansan5653
Copy link
Contributor

The FormattingTools component (owned by MarkdownEditor) depends on the markdown-toolbar-element. This library performs DOM-based side-effects on render, so it cannot be imported at the top level of the file - it must be imported in an effect.

I originally tried to use import() inside a useEffect for this but ran into problems so I used require() instead. Now, we've started running into problems with the mix of require and import in a file and I'd like to revisit trying to use import.

It seems to be working fine so far - Storybook, Gatsby docs, and tests all build alright. I think that the issue I was running into before was likely not due to the use of import but rather that I had forgotten to await the import because I didn't realize that it was aynchronous. If that is the case, then it should be fine to switch the strategy and I think it will solve a lot of complications.

@iansan5653 iansan5653 requested review from a team and siddharthkp September 14, 2022 16:30
@changeset-bot

This comment was marked as outdated.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 14, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 76.3 KB (0%)
dist/browser.umd.js 76.94 KB (0%)

// To prevent double-registering while the promise is pending, set it before importing
hasRegisteredToolbarElement = true
// requiring this module will register the custom element; we don't want to do that until the component mounts in the DOM
await import('@github/markdown-toolbar-element')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered wrapping this import() call in a try and setting hasRegisteredToolbarElement = false on failure. But I don't think it's really beneficial to keep retrying if this fails -- this isn't an API request that might eventually succeed.

@iansan5653 iansan5653 temporarily deployed to github-pages September 14, 2022 16:39 Inactive
@iansan5653 iansan5653 temporarily deployed to github-pages September 14, 2022 18:27 Inactive
@iansan5653 iansan5653 force-pushed the formatting-tools-import branch 2 times, most recently from e6d99a4 to 48d31e7 Compare September 15, 2022 15:33
@iansan5653
Copy link
Contributor Author

The Jest unit tests are failing with a segmentation fault, most likely due to nodejs/node#35889. This is a known bug in the V8 engine with no workaround so this strategy is sadly a no-go.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants