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

3 messages · Page 1 of 1 (latest)

slow monolith
#
/** @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/m83/dev/web/src/routes/layout.tsx: failed to import "/src/integrations/react/index.tsx"
|- ReferenceError: document is not defined
at Object.<anonymous> (/Users/m83/dev/node_modules/quill/dist/quill.js:7661:12)
at webpack_require (/Users/m83/dev/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/Users/m83/dev/node_modules/quill/dist/quill.js:1030:1)
at webpack_require (/Users/m83/dev/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/Users/m83/dev/node_modules/quill/dist/quill.js:5655:14)
at webpack_require (/Users/m83/dev/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/Users/m83/dev/node_modules/quill/dist/quill.js:10045:13)
at webpack_require (/Users/m83/dev/node_modules/quill/dist/quill.js:36:30)
at Object.<anonymous> (/Users/m83/dev/node_modules/quill/dist/quill.js:11557:18)
at webpack_require (/Users/m83/dev/node_modules/quill/dist/quill.js:36:30)

[vite] Internal server error: document is not defined

#

Versions:

"@builder.io/qwik": "^1.1.0",
"@builder.io/qwik-city": "^1.1.0",
"@builder.io/qwik-react": "0.5.0",
"react-quill": "^2.0.0",