SyntaxError: Cannot use import statement outside a module in nextjs

Question

I'm using "react-d3-speedometer" library but getting the above error while importing. can anyone help with this?

Does this answer your question? NextJS + react-hook-mousetrap : "Cannot use import statement outside a module" - Dynamic imports of hooks? — juliomalves
– juliomalves, Commented Aug 13, 2021 at 17:48

Paramesh Krishna · Accepted Answer · 2021-08-12 11:39:30Z

4

This is because NextJS tries to do the server-side rendering and they are components that depend on the browser.

you can fix this by using dynamic import disabling server-side rendering:

import dynamic from 'next/dynamic'
const ReactSpeedometer = dynamic(import ("react-d3-speedometer"), { ssr: false })

answered Aug 12, 2021 at 11:39

Paramesh Krishna

988 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for this answer! I had to make a slight adjustment to get it working for me: ... dynamic(() => import ("react-d3-speedometer" ...