Cannot use import statement outside a module in using react-bootstrap in nextjs

John Roice M. Aldeza 0
Viewed 25

I've been trying to work with next.js right now and when I imported a navbar component to my _app.tsx and run the project, it would give me an error of saying "Cannot use import statement outside a module." This doesn't occur on vanilla React though.

What I did is I made a Navbar component in components folder.

navbar.tsx

//some imports on react-bootstrap 
function NavigationBar(): JSX:Element {
<>
//Navbar code
</>

on my _app.tsx, I imported the Navbar so that it would be accessible to all pages of the app.

_app.tsx

import type { AppProps } from 'next/app'
import NavigationBar from "../components/navbar.tsx"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
    <NavigationBar/>
    <Component {...pageProps} />
    </>
  )
}

It didn't highlight any error until I tried to run the project.

The error seems to occur in the bootstrap folder in node_modules though.

Attached is the error log on the console. error log

Thanks in advance.

react-bootstrap next.js reactjs
2 Answers

Try adding

type: "module"

To your package.json

Adam Thomas0

SOLVED:

I dabbled with the import statement and this works depending on how you import the react-bootstrap component.

//this doesn't work
import Navbar from "react-bootstrap/esm/Navbar"

//this works
import {Navbar} from "react-bootstrap"

//this works
import Navbar from "react-bootstrap/Navbar"

It's my mistake importing it from the esm file directly.

John Roice M. Aldeza0
Related