Why am I getting SyntaxError: Cannot use import statement outside a module

Question

我正在尝试使用 gapi 脚本 (https://www.npmjs.com/package/gapi-script) 将 google 日历 API 集成到我的 NextJs 应用程序中，但是我在导入 gapi 脚本时发现了这个错误:

SyntaxError: Cannot use import statement outside a module

我尝试了下一个动态导入和反应 useEffect，但它不起作用。

  import {
  Box, Container, Text, Stack, Spacer, Button,
} from '@chakra-ui/react';
import { StarIcon } from '@chakra-ui/icons';
import { useState, useEffect } from 'react';
// import { gapi } from 'gapi-script';
import DatePicker from 'react-datepicker';
import dynamic from 'next/dynamic';
import GoBack from '../../../components/GoBack';
import Template from '../../../templates/empresa';
import 'react-datepicker/dist/react-datepicker.css';

const sobreVaga = () => {
  const [startDate, setStartDate] = useState(new Date());

  const CLIENT_ID = '545217530327-icjp9agk335v7qr6v7hhatmhui5h5qme.apps.googleusercontent.com';
  const API_KEY = 'AIzaSyC1nbNHQQB1LIPZwI9JB13AHweFGBD_dnM';
  const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'];
  const SCOPES = 'https://www.googleapis.com/auth/calendar';
  const handleClick = () => {
    const gapi = document.createElement('script');
    gapi.src = 'https://apis.google.com/js/client.js';
    gapi.load('client:auth2', () => {
      gapi.client.init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        discoveryDocs: DISCOVERY_DOCS,
        scope: SCOPES,
      });

      gapi.client.load('calendar', 'v3', () => console.log('bam!'));

      gapi.auth2.getAuthInstance().signIn()
        .then(() => {
          const event = {
            summary: 'Awesome Event!',
            location: '800 Howard St., San Francisco, CA 94103',
            description: 'Really great refreshments',
            start: {
              dateTime: startDate,
              timeZone: 'America/Los_Angeles',
            },
            end: {
              dateTime: startDate,
              timeZone: 'America/Los_Angeles',
            },
            recurrence: [
              'RRULE:FREQ=DAILY;COUNT=2',
            ],
            attendees: [
              { email: 'lpage@example.com' },
              { email: 'sbrin@example.com' },
            ],
            reminders: {
              useDefault: false,
              overrides: [
                { method: 'email', minutes: 24 * 60 },
                { method: 'popup', minutes: 10 },
              ],
            },
          };

          const request = window.gapi.client.calendar.events.insert({
            calendarId: 'primary',
            resource: event,
          });

          request.execute((event) => {
            console.log(event);
            window.open(event.htmlLink);
          });
        });
    });
  };

  return (
    <Template>
      <Box background="#A8A8A8" color="white" paddingY={10}>
        <Container maxW="container.xl" mb="6">
          <GoBack />
          <Stack spacing="0.5">
            <Text>Área de atuação</Text>
            <Text fontSize="2xl">Nome da vaga - Senioridade </Text>
            <Text fontSize="md">Cidade - estado</Text>
          </Stack>
        </Container>
        <Container maxW="container.xl">
          <Box>
            <Stack spacing="2">
              <Text>Prazo de entrega: x dias </Text>
              <Text>Fase do projeto: entrevista </Text>
            </Stack>
          </Box>
        </Container>
      </Box>
      <Container mt="10">
        <Box
          height="500"
          overflowY="auto"
          css={{
            '&::-webkit-scrollbar': {
              width: '4px',
            },
            '&::-webkit-scrollbar-track': {
              width: '6px',
            },
            '&::-webkit-scrollbar-thumb': {
              background: 'Gray',
              borderRadius: '24px',
            },
          }}
        >
          <Stack>
            <Box
              width="100%"
              height="140"
              bg="#A8A8A8"
              borderWidth="1px"
              borderRadius="lg"
              color="white"
              display="flex"
            >
              <Stack ml="5" mt="3">
                <Text
                  as="u"
                  fontsize="xl"
                  align="left"
                >
                  Nome do candidato
                </Text>
                <Text
                  fontsize="xl"
                  align="left"
                >
                  Entrevista: não agendada
                </Text>
              </Stack>
              <Box>
                <StarIcon as="button" mt="3" ml="40" />
                <Spacer />
                <Box display="flex" align="right" mt="5" />
              </Box>
              <DatePicker
                selected={startDate}
                onChange={(date) => setStartDate(date)}
                locale="pt-BR"
                showTimeSelect
                timeFormat="p"
                timeIntervals={15}
                dateFormat="Pp"
              />
              <Button onClick={handleClick}> Hora da vdd *--*</Button>
              <Box />
            </Box>
          </Stack>
        </Box>
      </Container>
    </Template>
  );
};

export default sobreVaga;
 here

Answer 1

在handleClick函数中，请替换

const handleClick = () => {
   const gapi = document.createElement('script');
   gapi.src = 'https://apis.google.com/js/client.js';

与

const handleClick = async () => {
   const gapi = await import('gapi-script').then((pack) => pack.gapi);

它会起作用。

Why am I getting SyntaxError: Cannot use import statement outside a module

Why am I getting SyntaxError: Cannot use import statement outside a module

next.js

google-calendar-api