material-tailwind: SyntaxError: Unexpected token 'export'

Hello, I have used old version and it run well until new version come out. I follow instruction to install new version, however I get error:

...\node_modules\@material-tailwind\react\index.js:1
export * from "./components/Accordion";
^^^^^^
SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@material-tailwind/react (...\.next\server\pages\_app.js:216:18)

Here is my _app.js code:

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import '@material-tailwind/react'
import React from 'react';
import App from 'next/app';
import MainLayout from '../components/mainlayout';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const Layout = Component.Layout || Component.DefaultLayout;

    return (
      <MainLayout>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </MainLayout>
    );
  }
}

export default MyApp;

this is tailwind.config.js

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/layouts/**/*.{html,js}',
    './src/index.html',
    { raw: '<div class="font-bold">', extension: 'html' },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 19

Most upvoted comments

@ichuoi I found the issue it’s because of the ES Modules in next.js you can simply solve this using by the following method:

Download next-transpile-modules: npm i next-transpile-modules or yarn add next-transpile-modules
Make your next.config.js like the following:

const withTM = require('next-transpile-modules')(["@material-tailwind/react"]); 

module.exports = withTM({...})

All the best, Sajad

sajadevo on May 16, 2022

All I needed was to update to 16.17.0, sorry for this……Rich

On Aug 26, 2022, at 2:28 AM, Sajad Ahmad Nawabi @.***> wrote:

To you directly or on the forum? … x-msg://119/# On Aug 23, 2022, at 3:42 AM, Sajad Ahmad Nawabi @.***> wrote: npm i next-transpile-modules Debugger attached. /usr/local/lib/node_modules/npm/node_modules/isexe/index.js:8 export { isexe } ^^^^^^ SyntaxError: Unexpected token ‘export’ at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1033:15) at Module._compile (node:internal/modules/cjs/loader:1069:27) at Object.Module._extensions…js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/usr/local/lib/node_modules/npm/node_modules/which/which.js:7:15) at Module._compile (node:internal/modules/cjs/loader:1105:14) It is not letting me get past this no matter what I do, please help Sajad @richierockskool https://github.com/richierockskool https://github.com/richierockskool https://github.com/richierockskool could you please share your code? — Reply to this email directly, view it on GitHub <#84 (comment) https://github.com/creativetimofficial/material-tailwind/issues/84#issuecomment-1223679047>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE7PVUP6EQMMCTJQMXLDATV2R6FBANCNFSM5V5NZLKA https://github.com/notifications/unsubscribe-auth/AJE7PVUP6EQMMCTJQMXLDATV2R6FBANCNFSM5V5NZLKA. You are receiving this because you were mentioned.

If it’s a public github repository share it’s link if it’s private invite me, my username is: sajadevo

Cheers, Sajad

— Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/material-tailwind/issues/84#issuecomment-1228106538, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE7PVSVF5W42MWJYWA7HVTV3BPYLANCNFSM5V5NZLKA. You are receiving this because you were mentioned.

richierockskool on Aug 26, 2022

Same fix worked for me as well. I am following this thread waiting for a more elegant solution.

PippoApps on May 30, 2022

Hi @ichuoi, @PippoApps, @Yonatani,

I’ve updated the @material-tailwind/react and now you can use it without and third-party library with next.js, remix.js and vite.js.

All the best, Sajad

sajadevo on Jun 14, 2022

@sajadevo I have added you to my repo, because it still private, you can check the local-test branch in folder name nextjs_frontend please careful, I’m deploying the master branch on vercel, thanks

ichuoi on May 16, 2022

Hi @ichuoi

I don’t know why you put the following import import '@material-tailwind/react' this is not valid.

All the best, Sajad

sajadevo on May 15, 2022