milesj / interweave

🌀 React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
https://interweave.dev
MIT License
1.09k stars 38 forks source link

import error #246

Closed SebastianTilaguy closed 1 year ago

SebastianTilaguy commented 1 year ago

Hello I'm new using yarn and vite, but I've try to use your library in an example that I found in internet I find next error

react.development.js:1407 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/interweave.js?v=40ba26a7' does not provide an export named 'default' (at HtmlCode.jsx:1:8)

I'm using this packages

"react": "^18.2.0", "interweave": "^13.0.0", "slate": "^0.88.1", "slate-react": "^0.88.2",

and the code is this

import Interweave from 'interweave';
import { useEffect } from 'react';
import { Path, Transforms } from 'slate';
import { useFocused, useSelected, useSlateStatic } from 'slate-react';
import useFormat from '../../utils/customHooks/useFormat';

const HtmlCode = (props) => {
    const { attributes, element, children } = props;
    const selected = useSelected();
    const focused = useFocused();
    const editor = useSlateStatic();

    const isHtmlEmbed = useFormat(editor, 'htmlCode');

    const handleKeyUp = (e) => {
        if (!isHtmlEmbed) return;
        if (e.keyCode === 13) {
            const parentPath = Path.parent(editor.selection.focus.path);
            const nextPath = Path.next(parentPath);
            Transforms.insertNodes(
                editor,
                {
                    type: 'paragraph',
                    children: [{ text: '' }],
                },
                {
                    at: nextPath,
                    select: true, // Focus on this node once inserted
                }
            );
        } else if (e.keyCode === 8) {
            Transforms.removeNodes(editor);
        }
        // console.log(e);
    };
    useEffect(() => {
        document.addEventListener('keyup', handleKeyUp);
        return () => {
            document.removeEventListener('keyup', handleKeyUp);
        };
    }, [isHtmlEmbed]);
    return (
        <div
            {...attributes}
            {...element.attr}
            style={{ boxShadow: selected && focused && '0 0 3px 3px lightgray', marginRight: '20px' }}
        >
            <div contentEditable={false}>
                <Interweave content={element.html} />
            </div>
            {children}
        </div>
    );
};

export default HtmlCode;
milesj commented 1 year ago

@SebastianTilaguy It's a named export now, the docs are probably wrong.

import { Interweave } from 'interweave';