search

strapi / blocks-react-renderer

A React renderer for the Strapi's Blocks rich text editor
Other
141 stars 23 forks source link

[bug]: Can't import to SSG page #29

Closed MicroMichaelIE closed 6 months ago

MicroMichaelIE commented 6 months ago

What version of @strapi/blocks-react-renderer are you using?

Npm Version: 10.2.4 Node Version: 20.11.1 Vers: 1.0.1 Browser: Edge Framework: Nextjs 14 with app dir Typescript included

What's Wrong?

Can't import to SSG generated pages due to ECMA script error

./node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer.mjs/proxy.js` Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules) The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code. The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file. In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.

To Reproduce

Nextjs 14, with App dir usage.

'/blogs' page that loads resources, Blog Posts in this case, uses the Blocks Renderer fine, no errors as it's a client side component.

SSG page based on the returned items from the API '/articles' endpoint from strapi, using Id as the uid.

Generates the pages when not using BlocksRenderer, just simply applying JSON.stringify has no errors. But when importing the BlockRenderer we run into the above error.

Expected Behaviour

BlocksRenderer doesn't have an import error here, and works similar to how it does on CSR.

joshuaellis commented 6 months ago

Can you supply a small reproduction? Perhaps on stackblitz.

MicroMichaelIE commented 6 months ago

Seems as though I jumped the gun and was a config error of some sorts on my side, When I couldn't reproduce on Stackblitz, I deleted .next/ and node_modules , went back to basics with config options, and restarted and it worked.

Although there was something strange going on at one point, (maybe the old .next/ and some config clashes). I made the error of fixing a couple of things at once so can't pinpoint exactly what fixed it. Thanks for fast reply.