[feat]: work outside of 'use client' directive

[tremby]

Before you submit:

• Please read the contributing guidelines
• Please search through the existing issues (both open AND closed) to see if your issue has been discussed before. Github issue search can be used for this: https://github.com/imgix/vue/issues?utf8=%E2%9C%93&q=is%3Aissue
• Please ensure the problem has been isolated and reduced. This link explains more: http://css-tricks.com/6263-reduced-test-cases/

Describe the bug
The <Imgix> component cannot be used in a Next 13 app, using the new app router. The app crashes with an error.

To Reproduce

• Clone https://github.com/tremby/next-imgix-bug
• Install dependencies
• Run with npm run dev

Steps to reproduce the behaviour:

1. Go to http://localhost:3000 or whichever address the next dev server gave you
2. See error

The error I see is like this:

- error node_modules/react-imgix/lib/HOCs/imgixProvider.js (15:56) @ eval
- error Error [TypeError]: (0 , _react.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/HOCs/imgixProvider.js:85:59)
    at (rsc)/./node_modules/react-imgix/lib/HOCs/imgixProvider.js (/tmp/next-imgix/.next/server/app/page.js:2305:1)
    at __webpack_require__ (/tmp/next-imgix/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/HOCs/index.js:16:22)
    at (rsc)/./node_modules/react-imgix/lib/HOCs/index.js (/tmp/next-imgix/.next/server/app/page.js:2316:1)
    at __webpack_require__ (/tmp/next-imgix/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/react-imgix.js:21:13)
    at (rsc)/./node_modules/react-imgix/lib/react-imgix.js (/tmp/next-imgix/.next/server/app/page.js:2481:1)
    at __webpack_require__ (/tmp/next-imgix/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/index.js:50:43) {
  digest: undefined
}

Expected behaviour
Able to use the component.

Information:

• @imgix/vue version: I'm not using vue. I think this template has a copy and paste error. [email protected]
• browser version: n/a

I suspect this is happening during the server-side render, where I guess createContext does not exist.

I'm not using <ImgixProvider>; I have no use for it. I tried removing the call to createContext from the library, and that just reveals another error:

- error node_modules/react-imgix/lib/react-imgix.js (25:112) @ _inherits
- error Error [TypeError]: Super expression must either be null or a function
    at _inherits (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/react-imgix.js:103:15)
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/react-imgix.js:412:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/react-imgix.js:461:2)
    at (rsc)/./node_modules/react-imgix/lib/react-imgix.js (/tmp/next-imgix/.next/server/app/page.js:2481:1)
    at __webpack_require__ (/tmp/next-imgix/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-imgix/lib/index.js:50:43)
    at (rsc)/./node_modules/react-imgix/lib/index.js (/tmp/next-imgix/.next/server/app/page.js:2459:1)
    at __webpack_require__ (/tmp/next-imgix/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:9:69)
    at (rsc)/./src/app/page.tsx (/tmp/next-imgix/.next/server/app/page.js:2580:1) {
  digest: undefined
}

I didn't go deeper than that.

[luqven]

Hey @tremby, thanks for opening this issue.

You're right that the useContext usage is part of the problem here. We also need to export the Picture and Background components differently to unblock you, as they make use of refs, which won't work well without the client.

In the short term, I suggest you wrap <Imgix /> in a component with 'use client'*. Here's a very quick implementation of that for reference if it's helpful: https://codesandbox.io/p/sandbox/sharp-fire-lv43k4?file=%2Fapp%2Fpage.tsx%3A12%2C13. That will hopefully unblock you until we can cut a release with proper Next JS 13 support.

P.S.
Apols about the vue verbiage, we got a little carried away updating our contributing guidelines across all the repos and this one slipped through the cracks.

[tremby]

OK. Thanks. I'm not sure why I didn't think of that. I already wrap <Imgix> and <Source>. I think I simply didn't consider that this component would be trying to do any client-specific things. At least I can't think of any I need for my use cases.

You talk of cutting a release with Next 13 support. Would such a release be using "use client" internally, or would the aim be for components which can render totally on the server?

[luqven]

Ah, I was a little fat fingered there. I meant 'use client'. Seems you're already wrapping them 👍🏻.

Ideally yes, it'd be compatible on the server out of the box, IE no 'use client'.

edit: rescoped the issue to make it clear this is feature work we'll need to do.

[tremby]

OK, that's great, thanks.

Incidentally, wrapping <Imgix> means that if I use <Picture> I get a warning that I'm not using an <Imgix>; I guess it doesn't notice that I am in fact rendering that component, just not as a direct vdom child.

(I don't think <Picture> is actually adding value anyway, so I'm going to use regular <picture>. It seems to work just fine.)

[luqven]

@tremby checking in quickly here.

We discussed creating a server-only component and decided to tackle the work in stages.

• First, we're going to release the package with "use client" in the component exports. This will avoid throwing errors unexpectedly for folks using RSC.
• In future, we'll tackle creating a server-only version of the <Imgix> component. You can read more about our reasoning in NextJS 13 and React Server Components Support #914 .

I had hoped we could release a server-only component in the short term, but because it requires so many breaking changes, we need to take some time to think about the best path forward.

Thanks so much again for creating the issue. I'll close this for now to be replaced by #914. But if anything else comes up feel free to comment and I can, of course, re-open it.

[tremby]

Yeah very reasonable decision!

I only realized after our discussion above that nextjs's own <Image> component is a client component. So if you come up with a workable server-only version, even if it opts the developer out of particular features, that'd be an upgrade for many situations IMO.