Unexpected identifier React

[stefl]

Hi there,

This looks super handy for me to create a form in my Next.js landing page.

However, following the instructions and importing ConvertkitForm I get the following:

/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/bin/convertkit-form.js:1
import React from 'react';
       ^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at eval (webpack-internal:///convertkit-react:1:18)
    at Object.convertkit-react (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:337:1)
    at __webpack_require__ (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:23:31)
    at eval (webpack-internal:///./pages/index.js:11:74)
    at Module../pages/index.js (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:314:1)
    at __webpack_require__ (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:23:31)
    at Object.4 (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:325:18)
    at __webpack_require__ (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:23:31)
    at /Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:91:18
/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/bin/convertkit-form.js:1

And in VS Code I see the following notice on the line where the import statement is:

Could not find a declaration file for module 'convertkit-react'. '/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/bin/convertkit-form.js' implicitly has an 'any' type.
  Try `npm install @types/convertkit-react` if it exists or add a new declaration (.d.ts) file containing `declare module 'convertkit-react';`ts(7016)

However, I can't see you're actually using Typescript, sot that's a little baffling! I'm using a standard Next.js app with a single page and I have other import statements from other libraries working fine, and the rest of the page compiles and renders as normal.

I have this line at the top of my Next.js page component:

import ConvertKitForm from 'convertkit-react'

And then I'm using the component like this in the page:

<ConvertKitForm formId={1537XYZ} template={'clare'} submitText="Join the waiting list" />

(XYZ are numbers in the actual code).

Hope you can help because this looks perfect for my needs.

Cheers!

[stefl]

Just testing this a little more, I've copied the src folder into my Next JS app and renamed it ConvertKitForm.

Then, if I import from that folder instead:

import ConvertKitForm from "../components/ConvertKitForm"

Then this compiles fine and I'm able to view the component on the page.

I've also tried compiling your code using

yarn install
yarn run build

And I get a build error:

$ rollup -c

src/index.js → bin/convertkit-form.js...
[!] TypeError: Cannot read property 'preserveSymlinks' of undefined
TypeError: Cannot read property 'preserveSymlinks' of undefined
    at Object.buildStart (/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/node_modules/@rollup/plugin-node-resolve/dist/cjs/index.js:492:34)
    at /usr/local/lib/node_modules/rollup/dist/rollup.js:21537:108
    at Array.map (<anonymous>)
    at applyBuildStartHook (/usr/local/lib/node_modules/rollup/dist/rollup.js:21537:38)
    at Object.rollup (/usr/local/lib/node_modules/rollup/dist/rollup.js:21617:16)
    at build (/usr/local/lib/node_modules/rollup/bin/rollup:3397:19)
    at /usr/local/lib/node_modules/rollup/bin/rollup:4160:20
    at next (/usr/local/lib/node_modules/rollup/bin/rollup:2562:16)
    at /usr/local/lib/node_modules/rollup/bin/rollup:2565:53
    at process._tickCallback (internal/process/next_tick.js:68:7)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hope that's helpful. For now I'll work using the directly imported components. Thanks for this!

[josephrexme]

@stefl thanks for posting all the detailed errors. May I ask which version of convertkit-react you are getting these errors with? Do you use typescript in your project or have another library that might be relying on it. I've not gotten to test it in TS environments and I hope to add type definitions for TS some day.

[abachuk]

Same issue. Using Next.js (latest), "convertkit-react": "^1.4.1", I don't use typescript.

[stefl]

@josephrexme Apologies, I'm only just seeing your reply. I'm not using Typescript, just a standard 'import' statement in my Next.js app. Version 1.4.1, with the package.json specifying "^1.4.1".

[josephrexme]

No problem @stefl . I will test it on next.js over this weekend and try to address the problem

[josephrexme]

This is now fixed in version 1.4.2