Issue on Next 12 - CommonJS script issue

[zsiegel]

Hello

I recently updated a project of mine to Next 12 and then also updated the converkit-react library to 1.5.5.

When I startup the project and load my page with the form on it I now get the following error.

error - unhandledRejection: ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/workspaces/project/node_modules/convertkit-react/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

I do not think I am going anything special. This is a vanilla next project and I import the form with the following.

import ConvertKitForm from 'convertkit-react';

I am not sure what might be going wrong here but I see in the project history there was a release specifically for Next around commonjs a few releases back.

Maybe something has changed with Next 12?

[zsiegel]

Quick follow up. If I go into node modules and rename the files in package.json and in bin to not have .js on the end things seem to import ok.

However the color overrides for buttons do not seem to work.

[josephrexme]

Thanks for all the details @zsiegel . Will look into this

[nibtime]

Hi,

I just had the same problem, I am using Next 12 too. it's likely because of this: https://nextjs.org/blog/next-12#es-modules-support-and-url-imports

with import ConvertKitForm from 'convertkit-react/bin/convertkit-react.esm' everything works fine for me so far.

[freeman14]

Have the same issue

[bkwebster]

Hi,

I just had the same problem, I am using Next 12 too. it's likely because of this: https://nextjs.org/blog/next-12#es-modules-support-and-url-imports

with import ConvertKitForm from 'convertkit-react/bin/convertkit-react.esm' everything works fine for me so far.

Using Next as well and this worked great! Thank you man!

[nelakay]

import ConvertKitForm from 'convertkit-react/bin/convertkit-react.esm'

This works well for Next.js 13 as well.
Thanks!