Unexpected token 'export'

[DillonB07]

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Importing a Button should work like so:

import Button from '@material-tailwind/react/Button'

Current Behavior

When opening the page, this error occurs. No, I'm not using TS

Error log

event - compiled client and server successfully in 47 ms (263 modules)
/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/node_modules/@material-tailwind/react/index.js:3
export { default as Alert } from './Alert.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-tailwind/react (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/pages/_app.js:43:18)
    at __webpack_require__ (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/webpack-runtime.js:33:42)
error - SyntaxError: Unexpected token 'export'
/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/node_modules/@material-tailwind/react/index.js:3
export { default as Alert } from './Alert.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-tailwind/react (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/pages/_app.js:43:18)
    at __webpack_require__ (/Users/dillonbarnes/Documents/Coding/React/google-docs-clone/.next/server/webpack-runtime.js:33:42)

Possible Solution

... Sorry, I don't know.

Steps to Reproduce (for bugs)

Here's a link: https://docs.dillonb07.studio - It crashed on Vercel so the link won't work.

1. Create a next.js project with these dependencies:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@material-tailwind/react": "0.3.4",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.1",
    "tailwindcss": "^3.0.7"
  }
}

2. Import @material-tailwind/react/Button on a page. I'm inside of a component, but I don't think that matters.
3. Run the server and visit the page.

Context

Trying to use a button as decoration in a website

Your Environment

• Version used: Latest - 0.3.4
• Browser Name and version: Irrelevant - Chrome 99.0.4844.51 (Official Build) (x86_64)
• Operating System and version (desktop or mobile): macOS Catalina 10.15.7
• Link to your project: https://github.com/DillonB06/google-docs-clone

[DillonB07]

Err, I feel stupid. I accidentally put this in my _app.js

import '@material-tailwind/react'

instead of

import '@material-tailwind/react/tailwind.css'