Can't resolve 'bufferutil', 'utf-8-validate'

[remib18]

Describe the bug Hey 👋🏻, it seems that you have a problem in your dependencies. Whenever I try to include a react component with blocks, as described in the exemples, the application throws a bunch of error that a file is missing in a dependency... It also seems that NextJS / React try to interpret the custom html tags (the error might comes from here)

To Reproduce Steps to reproduce the behavior:

1. Follow the React exemple
2. Run the dev server
3. Go on the page with the element
4. See error

Expected behavior No error and everything to work.

Errors

Module not found: Can't resolve 'bufferutil' in '.../my-project/node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib'

Import trace for requested module:
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/buffer-util.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/sender.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@uploadcare+upload-client@4.3.1/node_modules/@uploadcare/upload-client/dist/index.node.js
./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/abstract/uploadEntrySchema.js
./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/abstract/UploaderBlock.js
./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/index.js
./app/panel/manage/news/(components)/ImportImageBlock.tsx
./app/panel/manage/news/create/page.tsx

./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/validation.js

Module not found: Can't resolve 'utf-8-validate' in '.../my-project/node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib'

Import trace for requested module:
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/validation.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/lib/sender.js
./node_modules/.pnpm/ws@8.12.0/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@uploadcare+upload-client@4.3.1/node_modules/@uploadcare/upload-client/dist/index.node.js
./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/abstract/uploadEntrySchema.js
./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/abstract/UploaderBlock.js
./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/index.js
./app/panel/manage/news/(components)/ImportImageBlock.tsx
./app/panel/manage/news/create/page.tsx

ReferenceError: HTMLElement is not defined
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/@symbiotejs+symbiote@1.11.3/node_modules/@symbiotejs/symbiote/build/symbiote.js:453:22)
    at (sc_client)/./node_modules/.pnpm/@symbiotejs+symbiote@1.11.3/node_modules/@symbiotejs/symbiote/build/symbiote.js (.../my-project/.next/server/app/panel/manage/news/create/page.js:7088:1)
    at __webpack_require__ (.../my-project/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/index.js:56:78)
    at (sc_client)/./node_modules/.pnpm/@uploadcare+blocks@0.14.3/node_modules/@uploadcare/blocks/index.js (.../my-project/.next/server/app/panel/manage/news/create/page.js:8012:1)
    at __webpack_require__ (.../my-project/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./app/panel/manage/news/(components)/ImportImageBlock.tsx:10:76)
    at (sc_client)/./app/panel/manage/news/(components)/ImportImageBlock.tsx (.../my-project/.next/server/app/panel/manage/news/create/page.js:3017:1)
    at __webpack_require__ (.../my-project/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./app/panel/manage/news/create/page.tsx:19:86)
    at (sc_client)/./app/panel/manage/news/create/page.tsx (.../my-project/.next/server/app/panel/manage/news/create/page.js:3028:1)
    at __webpack_require__ (.../my-project/.next/server/webpack-runtime.js:33:43)
    at .../my-project/node_modules/.pnpm/next@13.1.2_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:106:27

Desktop (please complete the following information):

• OS: MacOS
• Browser Safari
• Version 16.2 (18614.3.7.1.5)

Additional context The application is running NextJS (with appDir). The error occurred in a client component.

[nd0ut]

Hey @remib18, Blocks don't support SSR. Please use dynamic import or connectFromBlocks method instead of static import.

[nd0ut]

Hey @remib18,

We have added a separate bundle for SSR that will work with static import and won't raise an error on Next.js. Please try updating to v0.21.1.