search

geist-org / geist-ui

A design system for building modern websites and applications.
https://geist-ui.dev
MIT License
4.33k stars 334 forks source link

SyntaxError: Unexpected token 'export' when using babel plugin import #434

Closed ghost closed 3 years ago

ghost commented 3 years ago

Bug report 🐞

Version & Environment

Expection

The behavior I expect is ...

no errors like the tree shaking with nextjs example

code I use:

.babelrc:

{
    "presets": ["next/babel"],
    "plugins": [
        ["styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
        [
            "import",
            {
                "libraryName": "@geist-ui/react",
                "libraryDirectory": "esm"
            }
        ]
    ]
}

_document.tsx:

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import { CssBaseline } from '@geist-ui/react'

export default class CustomDocument extends Document<any> {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx)
        const styles = CssBaseline.flush()

        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    {styles}
                </>
            ),
        }
    }

    render() {
        return (
            <Html>
                <Head>
                    <meta name="theme-color" content="#000000" />
                    <meta name="Description" content="" />
                </Head>
                <body dir="ltr">
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

_app.tsx:

import React from 'react'
import { AppProps } from 'next/app'
import { ApolloProvider } from '@apollo/client'
import useApollo from '@/lib/useApollo'
//import dynamic from 'next/dynamic'
import { DrawerProvider } from '@/contexts/drawer/useDrawer'
import { CartProvider } from '@/contexts/cart/useCart'
import { AuthProvider } from '@/contexts/auth/auth.provider'
import { GeistProvider, CssBaseline } from '@geist-ui/react'
import { StateMachineProvider, createStore } from 'little-state-machine'
import { LayoutTree } from '@moxy/next-layout'

//import Layout from '@/components/Layout'
import '@/styles/globals.css'

createStore({
    orderDetails: {
        items: [{ name: '' }],
        subtotal: 0,
        shipping: 0,
        total: 0,
        address: {
            name: '',
            email: '',
            phone: '',
            country: '',
            state: '',
            city: '',
            district: '',
            zip: '',
            street: '',
        },
        paymentMethod: '',
    },
})

const App = ({ Component, pageProps }: AppProps) => {
    const apolloClient = useApollo(pageProps.initialApolloState)

    return (
        <ApolloProvider client={apolloClient}>
            <DrawerProvider>
                <CartProvider>
                    <AuthProvider>
                        <StateMachineProvider>
                            <GeistProvider>
                                <CssBaseline />
                                <LayoutTree Component={Component} pageProps={pageProps} />
                            </GeistProvider>
                        </StateMachineProvider>
                    </AuthProvider>
                </CartProvider>
            </DrawerProvider>
        </ApolloProvider>
    )
}

export default App

Actual results (or Errors)

I got an error:

error - /xxx/node_modules/@geist-ui/react/esm/css-baseline/index.js:1
export { default } from './css-baseline';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1116:16)
    at Module._compile (internal/modules/cjs/loader.js:1164:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at eval (webpack-internal:///@geist-ui/react/esm/css-baseline:1:18)
    at Object.@geist-ui/react/esm/css-baseline (/xxx/xxx/.next/server/pages/_document.js:217:1)
    at __webpack_require__ (/xxx/xxx/.next/server/pages/_document.js:23:31)
    at eval (webpack-internal:///./src/pages/_document.tsx:3:90)
    at Module../src/pages/_document.tsx (/xxx/xxx/.next/server/pages/_document.js:194:1)
    at __webpack_require__ (/xxx/xxx/.next/server/pages/_document.js:23:31)
    at Object.1 (/xxx/xxx/.next/server/pages/_document.js:205:18)
    at __webpack_require__ (/xxx/xxx/.next/server/pages/_document.js:23:31)
    at /xxx/xxx/.next/server/pages/_document.js:91:18
unix commented 3 years ago

Fixed in v2.1.1.