[Bug] use client error in dist

[hades200082]

Bug Report

Describe the bug

I get the following error when building a NextJS app with this package included and used since updating the package to the latest version.

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

     ,-[D:\my\project\path\node_modules\next-cloudinary\dist\index.js:199:1]
 199 |
 200 | // src/components/CldImage/CldImage.tsx
 201 | var import_jsx_runtime = require("react/jsx-runtime");
 202 | "use client";
     : ^^^^^^^^^^^^^
 203 | var CldImage = (props) => {
 204 |   const CLD_OPTIONS = [
 205 |     "deliveryType",
     `----

Is this a regression?

Yes, after the release that included the 'use client'; flag in the component this worked.

Steps To Reproduce the error

Use the latest version in a NextJS 13 application with the app-directory

Expected behaviour

It works

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS: Windows 11
• Node version: 18.2.1
• Npm version: 9.2.0
• Browser name and version: Any

[colbyfayock]

Will take a look but feel free to PR if you find the issue. Iy wasn't removed but perhaps moving from microbundle to tsup for compilation created an issue? I need to create a test for basic compatibility to catch something like this

[colbyfayock]

Found this googling around. Will look into it

https://github.com/shuding/react-wrap-balancer/blob/main/tsup.config.ts

[hades200082]

I'm really not sure what the issue is or I'd happily do a PR :(

[hades200082]

@colbyfayock I've confirmed that the issue starts in version 2.3.0

[colbyfayock]

started a PR but stuck and its not working when compiling to a 13 app dir project. reahced out to Suding (from REact Wrap Balancer) to see if any advice, otherwise will try to see what else i can find out

currently stuck at this error:

➜  test-next-13 git:(main) ✗ yarn build
yarn run v1.22.19
warning ../../package.json: No license field
$ next build
info  - Loaded env from /Users/colbyfayock/Code/test-next-13/.env.local
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build
info  - Compiled successfully
info  - Linting and checking validity of types
info  - Collecting page data
[    ] info  - Generating static pages (0/3)SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Q (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:927:53)
    at S (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:928:317)
    at c (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:930:310)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Q (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:927:53)
    at S (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:928:317)
    at c (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:930:310)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
    /page: /
    at /Users/colbyfayock/Code/test-next-13/node_modules/next/dist/export/index.js:415:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/colbyfayock/Code/test-next-13/node_modules/next/dist/build/index.js:1400:21
    at async Span.traceAsyncFn (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/colbyfayock/Code/test-next-13/node_modules/next/dist/build/index.js:1259:17
    at async Span.traceAsyncFn (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/Users/colbyfayock/Code/test-next-13/node_modules/next/dist/build/index.js:66:29)
error Command failed with exit code 1.

[colbyfayock]

hey @hades200082 - the release includes removing use client from the bundle as a temporary workaround as I spent... quite a bit of time... trying to figure out the bundling / compilation bits with no success

i've been asking around to see if i can get any advice as to how to properly set this up

i created a new ticket to track: https://github.com/colbyfayock/next-cloudinary/issues/137

you can see in the PR i set up a new test which is literally just a next 13 app app in the tests directory that i run build on, which is sufficient to test compat

also added a page in the docs to help people who are looking to do this: https://next-cloudinary.spacejelly.dev/guides/nextjs-13