語法錯誤：不能在 typescript 中的模塊外使用導入語句

Question

我想用 ts將此庫添加到我的 nextjs 中，但出現下一個錯誤：

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;

作為參考，我正在使用此儀表板，刷新頁面時出現錯誤

Answer 1

從您的導入中刪除{}大括號。

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

應該

import CalendarTemplate from 'availability-calendar-react';

此 package 使用默認導出。

請參閱https://blog.atomist.com/typescript-imports/導入的工作原理。

這可能無法解決您的所有問題，但由於缺少未提供的其他文件，因此很難判斷。 Cannot use import statement outside a module是在非模塊中使用 ES 模塊語法時發生的錯誤。 將您的腳本加載為模塊，它應該可以工作。 有關詳細說明，請參閱此： https://bobbyhadz.com/blog/javascript-syntaxerror-cannot-use-import-statement-outside-module