SyntaxError: Cannot use import statement outside a module in typescript

Question

I want to add this library to my nextjs with ts but I get the next error :

Server Error

SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>

import React, { useState } from 'react';
import CalendarTemplate from 'availability-calendar-react';
import dynamic from 'next/dynamic'

const Page: React.FC = () => {
  const [availability, setAvailability] = useState([])
  const Calendar = CalendarTemplate({
    availability,
    setAvailability
  })
  return (
    <div>
      <Calendar />
    </div>
  );
};

export default Page;

For reference I am using this dashboard I am getting the error when i refresh the page

@OMiShah same thing

like who
– like who

2022-08-25 18:44:12 +00:00
Commented Aug 25, 2022 at 18:44 — like who
– like who, Commented Aug 25, 2022 at 18:44

Enak · Accepted Answer · 2022-08-25 22:10:00Z

2

Remove the {} braces from your import.

import {CalendarTemplate} from 'availability-calendar-react';

should be

import CalendarTemplate from 'availability-calendar-react';

This package uses a default export.

See https://blog.atomist.com/typescript-imports/ how imports work.

This probably does not fix all your issues but due to the lack of other files not provided it is hard to tell. Cannot use import statement outside a module is an error occuring when using ES module syntax in non modules. Load your script as module and it should work. See this for further instructions: https://bobbyhadz.com/blog/javascript-syntaxerror-cannot-use-import-statement-outside-module

answered Aug 25, 2022 at 22:10

Enak

6064 silver badges16 bronze badges

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

4 Comments

like who Over a year ago

Same thing after I remove

like who Over a year ago

And I use the exactly same dashboard as I linked in the description, just edit one template files (like integrations.tsx) with my code and you have the exact code i have

like who Over a year ago

So in the end I switched to a full js framework, but ty

Enak Over a year ago

To the first comment: That's what I said with does not fix all your issues ;). The error is still there because of server code is using commonjs but tries to use import statement like in es modules. Even this is in nextjs, it's still the same problem in your react app: github.com/vercel/next.js/issues/9890

Collectives™ on Stack Overflow

SyntaxError: Cannot use import statement outside a module in typescript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related