NextJS with React 17 With Dynamic React SDK >=0.14.0

Upgrading Dynamic SDK to \>=0.14.0

If you are still running NextJS with React \<=17, installing our latest SDK will fail to load the ESM module.

This is because from 0.14.0+ Dynamic bundles fully compliant hybrid ESM and CJS packages.

After installing Dynamic's package, you might see this error:

Text
Error: Cannot find module 'nextjs-blog/node_modules/react/jsx-runtime' imported from nextjs-blog/node_modules/@dynamic-labs/sdk-react/index.js
Did you mean to import react/jsx-runtime.js?

This is because React 18 added an exports field to the package.json to handle mapping react/jsx-runtime to `react/jsx-runtime.js

NextJS \>=13.1 Solution

NextJS introduced a configuration option to automatically transpile ESM packages.

TypeScript
const nextConfig = {
 experimental: {
   transpilePackages: ['@dynamic-labs/sdk-react-core'],
 },
};

NextJS \<13.1

Before 13.1, run npm i next-transpile-modules and update your next.config.js:

TypeScript
const withTM = require('next-transpile-modules')(['@dynamic-labs/sdk-react-core']);
const nextConfig = withTM({
 reactStrictMode: true,
});
module.exports = nextConfig;