Struggling to use Kekule with next.js

[Benjaki2]

Next.js docs say Calling require directly is not allowed. Use ES Modules instead. It appears the middleware does not allow for this.

Error I see:

./node_modules/kekule/dist/kekule.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

For what it's worth, Kekule seems to work when not present on initial load.

I am considering trying to transpile the code to ES6 modules with something like the cjs-to-es6 npm module. @partridgejiang do you have any suggestions? Thank you for all your work/help!

[partridgejiang]

Perhaps directly importing kekule.min.js would work? e.g.:

import * as K from './node_modules/kekule/dist/kekule.min.js';
console.log(Kekule.VERSION);

[filoscoder]

@Benjaki2 did you find a solution?

[Benjaki2]

Thanks @partridgejiang.

@filoscoder My solution was a mix of what @partridgejiang stated above and dynamic imports. The solution does not do SSR (server-side-rendering) but it works. This seems necessary because Kekule depends on the window object.

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

[Benjaki2]

relates to #262 --- closing.