React with Emotion NPM package gives TypeError-CodePudding

The goal is to successfully import and use the published npm package from this repository into this Next.js application.

While the Next.js application does compile, the application produces a runtime error which states:

Server Error
TypeError: Cannot read property 'registered' of null

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected]_hbkw2sf35pylg2cvgnw53hddsi/node_modules/blinq-image-editor/dist/index.js (2:238027)
Styled(div)
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected]_hbkw2sf35pylg2cvgnw53hddsi/node_modules/blinq-image-editor/dist/index.js (2:147434)
renderWithHooks
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderForwardRef
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)
renderElement
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11)
renderNodeDestructiveImpl
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/shertu/shertu/apple/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)

I code and maintain both repositories so I am able to make configuration changes if necessary. Any help in resolving this issue would be greatly appreciated.

CodePudding user response：

The solution was to avoid SSR.

import dynamic from "next/dynamic";

const ImageEditor = dynamic(
  async () => (await import("blinq-image-editor")).ImageEditor,
  {
    ssr: false,
  }
);

CodePudding user response：

One possible solution to your problem can be found in this thread. The OP had the same error as you, even though the repository is not the same as the library in question. The highlights are posted below.

Based on the error, it seems we need to make sure a CacheProvider is available:

import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/core";

const cache = createCache();

function withCacheProvider(
        children: React.ReactNode,
) {
        return (
            <CacheProvider value={cache}>
                {children}
            </CacheProvider>
        );
}

const component = mount(withCacheProvider(
     (
         <ComponentUnderTestThatUsesReactSelect />
     ),
));

I did need to add emotion as a dependency, yarn add emotion.