How to import client side only npm packages to qwikify$ component?

Question

I have a qwikify-ed React component which imports react-quill.

/** @jsxImportSource react */
import { qwikify$ } from '@builder.io/qwik-react';
import { useState } from 'react';

import ReactQuill from 'react-quill';

export const MyReactQuillComponent = () => {
    const [value, setValue] = useState('');

    return <ReactQuill theme="snow" value={value} onChange={setValue} />;
};

export default qwikify$(() => <MyReactQuillComponent />, { clientOnly: true });

I get the following error:

[vite] Error when evaluating SSR module /Users/dev/web/src/routes/layout.tsx: failed to import "/src/integrations/react/index.tsx"
|- ReferenceError: document is not defined
    at Object.<anonymous> (/Users/dev/node_modules/quill/dist/quill.js:7661:12)
    at webpack_require (/Users/dev/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/Users/dev/node_modules/quill/dist/quill.js:1030:1)
    at webpack_require (/Users/dev/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/Users/dev/node_modules/quill/dist/quill.js:5655:14)
    at webpack_require (/Users/dev/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/Users/dev/node_modules/quill/dist/quill.js:10045:13)
    at webpack_require (/Users/dev/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/Users/dev/node_modules/quill/dist/quill.js:11557:18)
    at webpack_require (/Users/dev/node_modules/quill/dist/quill.js:36:30)

[vite] Internal server error: document is not defined

There is no document object server side, but I could not make this work with the client:only attribute added to qwik component.

score 0 · Answer 1 · answered Jun 15 '23 at 16:57

Same problem with Next.js
This library execute "var elem = document.createElement('div');" as soon as it's imported.
With this code you will solve the problem.
This is a custom dynamic import when document is available.

/** @jsxImportSource react */
import { qwikify$ } from '@builder.io/qwik-react';
import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
let ReactQuill: any;

const importReactQuill = (setShow: Dispatch<SetStateAction<boolean>>) => {
    import('react-quill').then((module) => {
        ReactQuill = module.default;
        setShow(true)
    });
};

export const MyReactQuillComponent = () => {
    const [value, setValue] = useState('');
    const [show, setShow] = useState(false);

    useEffect(() => {
        importReactQuill(setShow);
    }, []);

    return show ? (
        <ReactQuill theme='snow' value={value} onChange={setValue} />
    ) : (
        <div>Loading...</div>
    );
};

export default qwikify$(() => <MyReactQuillComponent />, { clientOnly: true });

How to import client side only npm packages to qwikify$ component?

1 Answers1