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

Answer 1

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