search

viclafouch / mui-color-input

📌 A color input designed for MUI (Material ui) V6 built with TinyColor
https://viclafouch.github.io/mui-color-input/
60 stars 20 forks source link

Build error on Next.js using v2.0.3 #34

Closed bacaxnot closed 3 months ago

bacaxnot commented 3 months ago

Describe the bug

I'm getting a weird build error on Next 14.0.4. My Package.json is as follows:

{
  "scripts": {
    "next": "next",
    "dev": "next dev",
    "format": "prettier '**/*.{js,ts,jsx,tsx}' --write --ignore-path .gitignore",
    "lint": "next lint",
    "build": "next build",
    "build:next": "next build && next export -o webDist/",
    "export": "next export",
    "start": "next start",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "dependencies": {
    "@auth0/nextjs-auth0": "^3.5.0",
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.11.5",
    "@hookform/devtools": "^4.3.1",
    "@hookform/resolvers": "^3.1.0",
    "@js-temporal/polyfill": "^0.4.4",
    "@magicbell/magicbell-react": "^10.10.2",
    "@marker.io/browser": "^0.19.0",
    "@mui/icons-material": "^5.14.19",
    "@mui/lab": "^5.0.0-alpha.102",
    "@mui/material": "^5.14.19",
    "@mui/material-nextjs": "^5.15.11",
    "@mui/system": "^5.15.15",
    "@mui/x-data-grid": "^5.17.26",
    "@mui/x-data-grid-pro": "^6.18.6",
    "@mui/x-date-pickers": "^5.0.20",
    "@mui/x-date-pickers-pro": "^6.2.0",
    "@mui/x-license-pro": "^6.10.2",
    "@quillsql/admin": "^1.5.2",
    "@quillsql/react": "^2.11.9",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@react-pdf/renderer": "^3.1.14",
    "@repo/ai": "workspace:*",
    "@repo/api": "workspace:*",
    "@repo/ui": "workspace:*",
    "@sentry/nextjs": "^7.88.0",
    "@sentry/react": "^7.112.2",
    "@suspensive/react": "^1.26.6",
    "@tanstack/react-query": "^5.29.2",
    "@tanstack/react-query-devtools": "^5.17.1",
    "@tanstack/react-table": "^8.16.0",
    "@tremor/react": "^3.16.2",
    "@types/lodash": "^4.17.0",
    "@types/node": "17.0.39",
    "@types/nprogress": "0.2.3",
    "@types/numeral": "2.0.5",
    "@types/prop-types": "^15.7.12",
    "@types/react": "18.2.45",
    "@types/react-dom": "17.0.13",
    "@types/react-signature-canvas": "^1.0.5",
    "@types/react-simple-oauth2-login": "^0.5.5",
    "apexcharts": "3.49.0",
    "axios": "^1.6.7",
    "camelcase-keys": "^9.1.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "context-api": "0.0.2",
    "country-state-city": "^3.1.2",
    "cypress": "^13.8.1",
    "date-fns": "^2.29.3",
    "dayjs": "^1.11.11",
    "i18next": "^22.0.6",
    "i18next-chained-backend": "^4.0.1",
    "i18next-http-backend": "^2.4.2",
    "i18next-localstorage-backend": "^4.2.0",
    "input-otp": "^1.2.4",
    "lodash": "^4.17.21",
    "lucide-react": "^0.352.0",
    "moment": "^2.30.1",
    "mui-color-input": "^2.0.0",
    "mui-tel-input": "^3.0.2",
    "next": "14.0.4",
    "next-images": "1.8.5",
    "notistack": "^3.0.1",
    "nprogress": "0.2.0",
    "numeral": "^2.0.6",
    "posthog-js": "^1.96.1",
    "prop-types": "^15.8.1",
    "react": "^18.3",
    "react-apexcharts": "1.4.0",
    "react-avatar": "^5.0.3",
    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "^18.3",
    "react-draggable": "^4.4.6",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.51.3",
    "react-i18next": "^12.3.1",
    "react-number-format": "^5.1.3",
    "react-plaid-link": "^3.5.1",
    "react-pro-sidebar": "^1.1.0",
    "react-rutter-link": "^1.2.0",
    "react-signature-canvas": "^1.0.6",
    "react-simple-oauth2-login": "^0.5.4",
    "recharts": "^2.10.3",
    "snakecase-keys": "^5.4.5",
    "tailwind-merge": "^2.2.0",
    "tailwindcss-animate": "^1.0.7",
    "type-fest": "^4.18.0",
    "use-debounce": "^9.0.3",
    "yup": "1.4.0",
    "zod": "^3.22.4",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/prettier-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "tailwindcss": "^3.0.0",
    "typescript": "^5"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ],
    "**/*{.ts,.tsx}": [
      "eslint --fix"
    ]
  }
}

To Reproduce Steps to reproduce the behavior:

  1. Run pnpm build
  2. See error 
    
xxxxxx/node_modules/.pnpm/mui-color-input@2.0.3_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+material@5.15.17_@t_favwl4ubv7gk4n3t5qjgbhvxpa/node_modules/mui-color-input/dist/mui-color-input.es.js:1

import { jsx as c, jsxs as ct, Fragment as At } from "react/jsx-runtime"; ^^^^^^

SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1290:20) at Module._compile (node:internal/modules/cjs/loader:1342:27) at Module._extensions..js (node:internal/modules/cjs/loader:1437:10) at Module.load (node:internal/modules/cjs/loader:1212:32) at Module._load (node:internal/modules/cjs/loader:1028:12) at Module.require (node:internal/modules/cjs/loader:1237:19) at mod.require (xxxxxx/node_modules/.pnpm/next@14.0.4_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/server/require-hook.js:65:28) at require (node:internal/modules/helpers:176:18) at 49981 (xxxxxx/.next/server/pages/settings.js:1:171049)

Build error occurred Error: Failed to collect page data for /settings at xxxxxx/node_modules/.pnpm/next@14.0.4_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/build/utils.js:1220:15 { type: 'Error' }


**Expected behavior**
Should build normally.

**Desktop (please complete the following information):**
 - OS: macOS 14.2.1
 - Node: v21.6.2
 - pnpm: v8.15.4

**Additional context**
It's very important in our company to fix this error, since it's blocking our deployments. I'd really love to get some inputs on this. Thanks in advance!
bacaxnot commented 3 months ago

@viclafouch could you please take a look...?

bacaxnot commented 3 months ago

@viclafouch hello...? 👀

viclafouch commented 3 months ago

Hello !

Try this :

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['mui-color-input'],
}

module.exports = nextConfig