SyntaxError: Cannot use import statement outside a module #503
Replies: 2 comments 7 replies
-
|
Please share minimal repro cause we don't know what tool you using
|
Beta Was this translation helpful? Give feedback.
-
|
I m using nextjs 13 and smooth scrollbar |
Beta Was this translation helpful? Give feedback.
-
|
can you share your repository? I think it's |
Beta Was this translation helpful? Give feedback.
-
|
https://beta.nextjs.org/docs/rendering/server-and-client-components#convention for 'use client';
import { FC, ReactNode, useEffect, useRef } from 'react'
.
.
. |
Beta Was this translation helpful? Give feedback.
-
|
Still getting the same issue |
Beta Was this translation helpful? Give feedback.
-
|
Sorry its client project I cant share it |
Beta Was this translation helpful? Give feedback.
-
|
Works fine for me
'use client';
import { useEffect, useRef } from "react"
import Scrollbar from 'smooth-scrollbar'
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll'
Scrollbar.use(OverscrollPlugin)
export default function SmoothScrollbar({children}: { children: React.ReactNode}) {
const smoothScrollbarDOM = useRef<HTMLDivElement | null>(null)
useEffect(() => {
Scrollbar.init(smoothScrollbarDOM.current!, {
damping: 0.1,
alwaysShowTracks: false,
plugins: {
overscroll: {
effect: navigator.userAgent.match(/Android/) ? 'glow' : 'bounce',
}
}
})
}, [])
return (
<div className="smooth-scrollbar" ref={smoothScrollbarDOM}>{children}</div>
)
}
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
overflow: hidden !important;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
body {
color: white;
background: black;
}
}
.smooth-scrollbar {
height: 100vh;
}
import './globals.css'
import SmoothScrollbar from './smoothScrollbar'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<SmoothScrollbar>
{children}
</SmoothScrollbar>
</body>
</html>
)
} |
Beta Was this translation helpful? Give feedback.
-
When i m importing overscroll plugin and use it it thows SyntaxError: Cannot use import statement outside a module
Can someone help me out this
Beta Was this translation helpful? Give feedback.
All reactions