diff --git a/app/components/ActivityForm.tsx b/app/components/ActivityForm.tsx index b796af2..d34a319 100644 --- a/app/components/ActivityForm.tsx +++ b/app/components/ActivityForm.tsx @@ -1,6 +1,6 @@ import { Form } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Button, Typography, Textarea } = material; import { BoltIcon } from "@heroicons/react/24/solid"; diff --git a/app/components/AssignMissedActivitiesButton/AssignMissedActivitiesButton.tsx b/app/components/AssignMissedActivitiesButton/AssignMissedActivitiesButton.tsx index 9d96281..6b5cf16 100644 --- a/app/components/AssignMissedActivitiesButton/AssignMissedActivitiesButton.tsx +++ b/app/components/AssignMissedActivitiesButton/AssignMissedActivitiesButton.tsx @@ -1,7 +1,7 @@ import { useAssignActivitiesMutation } from "@app-types/graphql"; import { BoltIcon } from "@heroicons/react/24/solid"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Tooltip, IconButton, Spinner, Button } = material; import { useState } from "react"; diff --git a/app/components/CycleForm.tsx b/app/components/CycleForm.tsx index 2325213..e038227 100644 --- a/app/components/CycleForm.tsx +++ b/app/components/CycleForm.tsx @@ -1,6 +1,6 @@ import { Form, Link } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Input, Button, Typography, Card, CardBody, CardFooter, Textarea } = material; diff --git a/app/components/DatePickerInput.tsx b/app/components/DatePickerInput.tsx index d4d8aaf..6fc3406 100644 --- a/app/components/DatePickerInput.tsx +++ b/app/components/DatePickerInput.tsx @@ -1,7 +1,7 @@ // https://www.material-tailwind.com/docs/react/plugins/date-picker import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Popover, PopoverHandler, Input, PopoverContent } = material; import { DayPicker } from "react-day-picker"; diff --git a/app/components/IndividualForm.tsx b/app/components/IndividualForm.tsx index 3d4c3bf..c7dd8e6 100644 --- a/app/components/IndividualForm.tsx +++ b/app/components/IndividualForm.tsx @@ -1,6 +1,6 @@ import { Form, Link } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Input, Button, diff --git a/app/components/OrganizationForm.tsx b/app/components/OrganizationForm.tsx index 7445126..222d26b 100644 --- a/app/components/OrganizationForm.tsx +++ b/app/components/OrganizationForm.tsx @@ -1,6 +1,6 @@ import { Form } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Radio } = material; import { OrganizationUpdate } from "@app-types/graphql"; diff --git a/app/components/VisionForm.tsx b/app/components/VisionForm.tsx index 6d6a130..753d108 100644 --- a/app/components/VisionForm.tsx +++ b/app/components/VisionForm.tsx @@ -1,5 +1,5 @@ import { Form } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Input, Button, Typography, Textarea, Select, Option, Switch } = material; diff --git a/app/routes/_auth.signin.($id).tsx b/app/routes/_auth.signin.($id).tsx index bccc6c9..27ca781 100644 --- a/app/routes/_auth.signin.($id).tsx +++ b/app/routes/_auth.signin.($id).tsx @@ -1,6 +1,6 @@ import { Form, useLoaderData } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Alert, Button, Typography } = material; import { Link } from "react-router-dom"; diff --git a/app/routes/_auth.signup.($id).tsx b/app/routes/_auth.signup.($id).tsx index 632264f..e8a76fa 100644 --- a/app/routes/_auth.signup.($id).tsx +++ b/app/routes/_auth.signup.($id).tsx @@ -1,6 +1,6 @@ import { Form, useLoaderData } from "@remix-run/react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Alert, Button, Typography } = material; import { Link } from "react-router-dom"; diff --git a/app/routes/_dashboard.activities.$id.edit/route.tsx b/app/routes/_dashboard.activities.$id.edit/route.tsx index 38b2756..f267108 100644 --- a/app/routes/_dashboard.activities.$id.edit/route.tsx +++ b/app/routes/_dashboard.activities.$id.edit/route.tsx @@ -1,7 +1,7 @@ import { useParams } from "@remix-run/react"; import { useEffect, useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { diff --git a/app/routes/_dashboard.cycles.$id.edit/route.tsx b/app/routes/_dashboard.cycles.$id.edit/route.tsx index 9768eb4..e3b4f1c 100644 --- a/app/routes/_dashboard.cycles.$id.edit/route.tsx +++ b/app/routes/_dashboard.cycles.$id.edit/route.tsx @@ -1,7 +1,7 @@ import { useParams } from "@remix-run/react"; import { useEffect, useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { diff --git a/app/routes/_dashboard.cycles._index/route.tsx b/app/routes/_dashboard.cycles._index/route.tsx index 457fae6..bc5d639 100644 --- a/app/routes/_dashboard.cycles._index/route.tsx +++ b/app/routes/_dashboard.cycles._index/route.tsx @@ -2,7 +2,7 @@ import { useCyclesQuery } from "@app-types/graphql"; import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { UserPlusIcon } from "@heroicons/react/24/solid"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, CardHeader, diff --git a/app/routes/_dashboard.cycles.new/route.tsx b/app/routes/_dashboard.cycles.new/route.tsx index 19b6410..fb7a012 100644 --- a/app/routes/_dashboard.cycles.new/route.tsx +++ b/app/routes/_dashboard.cycles.new/route.tsx @@ -1,6 +1,6 @@ import { useNavigate } from "@remix-run/react"; import { useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { useCreateCycleMutation } from "@app-types/graphql"; diff --git a/app/routes/_dashboard.individuals.$id.edit/route.tsx b/app/routes/_dashboard.individuals.$id.edit/route.tsx index 34c1c77..5569d0f 100644 --- a/app/routes/_dashboard.individuals.$id.edit/route.tsx +++ b/app/routes/_dashboard.individuals.$id.edit/route.tsx @@ -1,7 +1,7 @@ import { useParams } from "@remix-run/react"; import { useEffect, useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { diff --git a/app/routes/_dashboard.individuals.($id).new/route.tsx b/app/routes/_dashboard.individuals.($id).new/route.tsx index 92d207b..ee0967a 100644 --- a/app/routes/_dashboard.individuals.($id).new/route.tsx +++ b/app/routes/_dashboard.individuals.($id).new/route.tsx @@ -1,7 +1,7 @@ import { useNavigate, useParams } from "@remix-run/react"; import { useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { diff --git a/app/routes/_dashboard.individuals._index.($id)/route.tsx b/app/routes/_dashboard.individuals._index.($id)/route.tsx index 10d450a..941cca3 100644 --- a/app/routes/_dashboard.individuals._index.($id)/route.tsx +++ b/app/routes/_dashboard.individuals._index.($id)/route.tsx @@ -6,7 +6,7 @@ import { HomeIcon, SignalIcon, } from "@heroicons/react/24/solid"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, CardHeader, diff --git a/app/routes/_dashboard.organizations.$id.edit/route.tsx b/app/routes/_dashboard.organizations.$id.edit/route.tsx index fb754f7..765fa2f 100644 --- a/app/routes/_dashboard.organizations.$id.edit/route.tsx +++ b/app/routes/_dashboard.organizations.$id.edit/route.tsx @@ -1,7 +1,7 @@ import { useParams } from "@remix-run/react"; import { useEffect, useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { diff --git a/app/routes/_dashboard.visions.$id.edit/route.tsx b/app/routes/_dashboard.visions.$id.edit/route.tsx index 143d04d..74b44e9 100644 --- a/app/routes/_dashboard.visions.$id.edit/route.tsx +++ b/app/routes/_dashboard.visions.$id.edit/route.tsx @@ -1,7 +1,7 @@ import { useParams } from "@remix-run/react"; import { useEffect, useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Typography } = material; import { diff --git a/app/routes/_dashboard.visions._index/components/FetchContentButton/FetchContentButton.tsx b/app/routes/_dashboard.visions._index/components/FetchContentButton/FetchContentButton.tsx index 650bcce..078c759 100644 --- a/app/routes/_dashboard.visions._index/components/FetchContentButton/FetchContentButton.tsx +++ b/app/routes/_dashboard.visions._index/components/FetchContentButton/FetchContentButton.tsx @@ -1,7 +1,7 @@ import { useAnalyzeActivityWithMinimumResultMutation } from "@app-types/graphql"; import { BoltIcon } from "@heroicons/react/24/solid"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Tooltip, IconButton, Spinner } = material; import { useState } from "react"; diff --git a/app/routes/_dashboard.visions._index/route.tsx b/app/routes/_dashboard.visions._index/route.tsx index 4411826..7d68561 100644 --- a/app/routes/_dashboard.visions._index/route.tsx +++ b/app/routes/_dashboard.visions._index/route.tsx @@ -3,7 +3,7 @@ import { ArrowTopRightOnSquareIcon, DocumentChartBarIcon, } from "@heroicons/react/24/solid"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, diff --git a/app/routes/_dashboard.visions.new/route.tsx b/app/routes/_dashboard.visions.new/route.tsx index e572d53..45050ee 100644 --- a/app/routes/_dashboard.visions.new/route.tsx +++ b/app/routes/_dashboard.visions.new/route.tsx @@ -1,6 +1,6 @@ import { useNavigate, useParams } from "@remix-run/react"; import { useState } from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; import { useCreateVisionMutation, useGetVisionTypesAndCyclesQuery, diff --git a/app/routes/_site._index.tsx b/app/routes/_site._index.tsx index 1a2bf9d..1d2aaf7 100644 --- a/app/routes/_site._index.tsx +++ b/app/routes/_site._index.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, CardBody, diff --git a/app/widgets/cards/feature-card.tsx b/app/widgets/cards/feature-card.tsx index 066df5a..807d2c4 100644 --- a/app/widgets/cards/feature-card.tsx +++ b/app/widgets/cards/feature-card.tsx @@ -1,9 +1,11 @@ import PropTypes from "prop-types"; -import material from "@material-tailwind/react"; -const { Card, CardBody, Typography, IconButton } = material; - -console.log("!!!", Card); +import { + Card, + CardBody, + Typography, + IconButton, +} from "@material-tailwind/react"; export function FeatureCard({ color, diff --git a/app/widgets/cards/team-card.tsx b/app/widgets/cards/team-card.tsx index 75483f9..69faa4e 100644 --- a/app/widgets/cards/team-card.tsx +++ b/app/widgets/cards/team-card.tsx @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; -import { default as material } from "@material-tailwind/react"; +import * as material from "@material-tailwind/react"; const { Card, Avatar, Typography } = material; export function TeamCard({ diff --git a/package.json b/package.json index b3f0a8a..c54a176 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "react-day-picker": "^8.10.0", "react-dom": "^18.2.0", "remix-auth": "^3.6.0", - "remix-auth-google": "^2.0.0" + "remix-auth-google": "^2.0.0", + "vite-plugin-cjs-interop": "^2.1.0" }, "devDependencies": { "@graphql-codegen/cli": "5.0.2", diff --git a/vite.config.ts b/vite.config.ts index 3994cbe..253d60a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,11 +2,19 @@ import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import { installGlobals } from "@remix-run/node"; +import { cjsInterop } from "vite-plugin-cjs-interop"; installGlobals(); const viteConfig = defineConfig({ - plugins: [remix(), tsconfigPaths()], + plugins: [ + cjsInterop({ + // List of CJS dependencies that require interop + dependencies: ["@material-tailwind/react"], + }), + remix(), + tsconfigPaths(), + ], server: { port: 4000, }, diff --git a/yarn.lock b/yarn.lock index 2d0d2a7..b2ca669 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3247,6 +3247,11 @@ accepts@~1.3.5, accepts@~1.3.8: mime-types "~2.1.34" negotiator "0.6.3" +acorn-import-assertions@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac" + integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA== + acorn-jsx@^5.0.0, acorn-jsx@^5.3.2: version "5.3.2" resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz" @@ -6760,6 +6765,13 @@ magic-string@^0.30.5: dependencies: "@jridgewell/sourcemap-codec" "^1.4.15" +magic-string@^0.30.8: + version "0.30.10" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e" + integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ== + dependencies: + "@jridgewell/sourcemap-codec" "^1.4.15" + map-cache@^0.2.0: version "0.2.2" resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz" @@ -7296,6 +7308,13 @@ minimatch@^9.0.0, minimatch@^9.0.1: dependencies: brace-expansion "^2.0.1" +minimatch@^9.0.3: + version "9.0.4" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51" + integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw== + dependencies: + brace-expansion "^2.0.1" + minimist@^1.2.0, minimist@^1.2.6, minimist@~1.2.5: version "1.2.8" resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz" @@ -9894,6 +9913,17 @@ vite-node@^0.28.5: source-map-support "^0.5.21" vite "^3.0.0 || ^4.0.0" +vite-plugin-cjs-interop@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/vite-plugin-cjs-interop/-/vite-plugin-cjs-interop-2.1.0.tgz#4b34c588ebb034483ebf623639598011f4799190" + integrity sha512-qp+54VPRKiiuqKZ4tToiEZz5d5uiZf33PrXOfyH5SInlVsYz4b6YoZMNxCrx+vKdAQVsZu03vDJK71Ri5oKMqg== + dependencies: + acorn "^8.11.3" + acorn-import-assertions "^1.9.0" + estree-walker "^3.0.3" + magic-string "^0.30.8" + minimatch "^9.0.3" + vite-tsconfig-paths@^4.3.2: version "4.3.2" resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"