NextJS Issues

[laryhills]

I get this error on nextJS

./node_modules/react-medium-image-zoom/dist/index.js 13:45
Module parse failed: Unexpected token (13:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|

const testElType = (type, el) => type === el?.tagName?.toUpperCase?.();
| const testDiv = (el) => testElType('DIV', el) || testElType('SPAN', el);
| const testImg = (el) => testElType('IMG', el);

[rpearce]

@laryhills Could you please share what version of nodejs are you using? This syntax has been around for some time (including in all major browsers).

[laryhills]

v16.15.0

[rpearce]

@laryhills This functionality was introduced in nodejs@14, so I'm going to have to ask about some more versions.

• What version of NextJS are you using? Do you know what version of Webpack it is using?
• What version of react-medium-image-zoom (look in your package-lock.json or yarn.lock, too)?

Do you have a small example project that demonstrates this issue that I can test with?

[maupeon]

It is happening the same to me

[rpearce]

Thank you for the information. I work on this project at night, so I'll help you both when I can.

After researching, it sounds like this might be an issue with [email protected] and some patch versions above that. I'm not going to ask you to upgrade your nextjs versions just yet.

Can y'all please try following the advice from vercel/next.js#20920 (comment) but instead add "@babel/plugin-proposal-optional-chaining" and @babel/plugin-proposal-nullish-coalescing-operator to your .babelrc -> plugins?

[laryhills]

Still didn’t work,
Error Message -
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|

const testElType = (type, el) => type === el?.tagName?.toUpperCase?.();
| const testDiv = (el) => testElType('DIV', el) || testElType('SPAN', el);
| const testImg = (el) => testElType('IMG', el);
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-medium-image-zoom/dist/index.js from [slug].js not supported.

[rpearce]

That's a different error, so I think that did work?

I'll research again tonight or tomorrow and see what else this old version of nextjs needs.

[rpearce]

It looks like nextjs v10 might not support packages of "type": "module", and this package is of that type. It looks like nextjs v12 supports esmodule packages.

[laryhills]

So I guess this only works well on nextjs 12>

…

On Wed, Oct 26, 2022, 13:57 Robert Pearce ***@***.***> wrote: It looks like nextjs v10 might not support packages of "type": "module", and this package is of that type. It looks like nextjs v12 supports esmodule packages. — Reply to this email directly, view it on GitHub <#377 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKOABI6NGDZZ3OBEDMDZXBTWFETEXANCNFSM6AAAAAARJROEMU> . You are receiving this because you were mentioned.Message ID: <rpearce/react-medium-image-zoom/repo-discussions/377/comments/3969751@ github.com>

[rpearce]

Specifically, I would set the NPM version for react-medium-image-zoom to ^4.4.3 and see if that works for you.

Here's the NPM page for that version: https://www.npmjs.com/package/react-medium-image-zoom/v/4.4.3

[maupeon]

Than you @rpearce , only one more question, is it possible to add classname to <Zoom> ?
Something like this: <Zoom className='w-full'>

[rpearce]

Which version are you asking about? 4 or 5?

If v5, you can pass classDialog to pass a class to the <dialog> element, and you can use the rmiz data selectors to select CSS further from there (look at source/styles.css for how to do this sort of thing).

If v4, you can only use the data selectors to style the modal further.

[maupeon]

Hi @rpearce, thank you for your answer and sorry for keep bothering you but I had another doubt, is there a way to zoom an image with a button? Like this:

`
const [isZoomed, setIsZoomed] = useState(false);

const handleZoomChange = useCallback((shouldZoom) => {
	setIsZoomed(shouldZoom);
}, []);
const myLoader = ({ src }) => {
	return src;
};

const handleImgLoad = useCallback(() => {
	setIsZoomed(true);
}, []);
return (
		<div className="relative w-full h-auto rounded-2xl ">
			<button onClick={handleImgLoad}>click</button>
			<ControlledZoom
				isZoomed={isZoomed}
				onZoomChange={handleZoomChange}
				wrapStyle={{
					width: '100%',
					height: '100%',
					position: 'relative',
				}}
			>
                       </div>

`

[rpearce]

@maupeon I somehow missed your question. Yes, you can do that behavior.

[laryhills]

Would give these a try and get back to you.

…

On Thu, Oct 27, 2022, 20:39 Robert Pearce ***@***.***> wrote: Which version are you asking about? 4 or 5? If v5, you can pass classDialog to pass a single class to the <dialog> element, and you can use the rmiz data selectors to select CSS further from there (look at source/styles.css for how to do this sort of thing). If v4, you can only use the data selectors to style the modal further. — Reply to this email directly, view it on GitHub <#377 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKOABI343GRZEL7TGEE56K3WFLK7ZANCNFSM6AAAAAARJROEMU> . You are receiving this because you were mentioned.Message ID: <rpearce/react-medium-image-zoom/repo-discussions/377/comments/3985472@ github.com>