search

ConvertKit / convertkit-react

React-based library to easily plug ConvertKit forms to your React applications
46 stars 4 forks source link

Issue on Next 12 - CommonJS script issue #11

Open zsiegel opened 2 years ago

zsiegel commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

nibtime commented 2 years ago

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 commented 2 years ago

Have the same issue

bkwebster commented 2 years ago

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 commented 1 year ago

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

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