SyntaxError: Cannot use import statement outside a module

[etherealsunshine]

Bug report 🐞

Version & Environment

• Version of browser-Version 1.37.116 Chromium: 100.0.4896.127 (Official Build) (arm64)
• Version of geist-ui/core-2.3.8

Expected Behaviour

The behaviour I expect is ... the page should load as expected

Actual results (or Errors)

receive 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 /Users/utkarshsingh/Desktop/ReactLearn/geist-ui/node_modules/ (geist-ui/core/esm/grid/grid-container.js (1) Object.compileFunction node:vm (352:18) wrapSafe node:internal/modules/cjs/loader (1027:15) Module._compile node:internal/modules/cjs/loader (1063:27) Object.Module._extensions..js node:internal/modules/cjs/loader (1153:10) Module.load node:internal/modules/cjs/loader (975:32) Function.Module._load node:internal/modules/cjs/loader (822:12) Module.require node:internal/modules/cjs/loader (999:19) require node:internal/modules/cjs/helpers (102:18) Object.@geist-ui/core/esm/grid/grid-container file:///Users/utkarshsingh/Desktop/ReactLearn/geist-ui/.next/server/pages/index.js (98:18) webpack_require file:///Users/utkarshsingh/Desktop/ReactLearn/geist-ui/.next/server/webpack-runtime.js (33:42)`

import Head from 'next/head'
import Image from 'next/image'

import styles from '../styles/Home.module.css'
import { Card, Button, Page, Text, Grid, Spacer, Link } from '@geist-ui/core'
import GridContainer from '@geist-ui/core/esm/grid/grid-container'
function CardComponent() {
  const types = ['secondary', 'success', 'warning', 'error', 'dark', 'alert', 'purple', 'violet', 'cyan']
  return (
    <Grid.Container gap={1.5}>
      {types.map(type => (
        <Grid xs={8} key={type}>
          <Card shadow={true} type={type} width="100%">
            <Text h4 my={0} style={{ textTransform: 'uppercase' }}>{type}</Text>
            <Text>{type}</Text>
          </Card>
        </Grid>
      ))}
    </Grid.Container>
  )
}
export default function Home() {
  return (
    <Page dotBackdrop={true}>
      <GridContainer gap={1}>
        <Grid.Container gap={1} height="100px">
          <Grid xs={15} sm={20} justify="left"><Text h1>Lorem Ipsum</Text></Grid>
          <Grid sm={2} justify="right" alignItems='center' xs={5}><Text h5><Link href="#">About</Link></Text></Grid>
          <Grid sm={2} justify="right" alignItems='center' xs={4}><Text h5><Link href="#">Trivia</Link></Text></Grid>
          <Grid justify="left" alignItems='flex-start' xs={15}><Text style={{ color: "#999" }} h6>Lorem ipsum dolor si amet</Text></Grid>

        </Grid.Container>
        <Spacer h={5} />
        <CardComponent />
      </GridContainer>
    </Page>
  )
}

[etherealsunshine]

Has there been any progress regarding this issue?

[hekatx]

Looks like the error only occurs when importing from @geist-ui/core/esm/grid/grid-container. Try to import everything through @geist/core, it should fix it