[Bug]: lot of "Error when using sourcemap for reporting an error: Can't resolve original location of error." when building using Vite

ibarral commented 2 months ago

Tremor Version

v3.18.0

Link to minimal reproduction

n/d

Steps to reproduce

run "vite build" (using vite v5.4.2)
the build process will show lot of "Error when using sourcemap for reporting an error: Can't resolve original location of error."

What is expected?

have no errors on the build process

What is actually happening?

I get this errors:

node_modules/@tremor/react/dist/components/icon-elements/Badge/Badge.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/chart-elements/BarChart/BarChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/Button/Button.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/Textarea/Textarea.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/chart-elements/DonutChart/DonutChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/Switch/Switch.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/Tabs/TabGroup.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/DatePicker/DatePicker.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/chart-elements/AreaChart/AreaChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/Select/Select.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/DateRangePicker/DateRangePicker.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/chart-elements/LineChart/LineChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/layout-elements/Accordion/Accordion.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/TextInput/TextInput.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/vis-elements/BarList/BarList.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. node_modules/@tremor/react/dist/components/input-elements/Calendar/Calendar.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.

What browsers are you seeing the problem on?

No response

Any additional comments?

No response

severinlandolt commented 2 months ago

Hi! Did you follow the vite installation on our website? https://npm.tremor.so/docs/getting-started/installation

ibarral commented 2 months ago

yes, the only thing I noticed is that i'm using Headless UI v2.1.2. It's compatible?

severinlandolt commented 2 months ago

Hmm, not all components from the error are using Headless UI. I will try installing it today again and report back.

severinlandolt commented 2 months ago

Hi! Did the installation but I couldn't replicate your issue. CleanShot 2024-08-31 at 21 21 41@2x

Can you share a replication of the error? Maybe a repository?

ibarral commented 2 months ago

Hello @severinlandolt !

This is the full output of npm run build:

> portal-tenant@2.0.4 build
> tsc && vite build --base=/portal-tenant/

vite v5.4.2 building for production...
node_modules/@headlessui/react/dist/components/combobox/combobox.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/chart-elements/DonutChart/DonutChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/chart-elements/BarChart/BarChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/chart-elements/AreaChart/AreaChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/icon-elements/Badge/Badge.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/chart-elements/LineChart/LineChart.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/Button/Button.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/DatePicker/DatePicker.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/DateRangePicker/DateRangePicker.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/Select/Select.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/Tabs/TabGroup.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/TextInput/TextInput.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/layout-elements/Accordion/Accordion.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/Switch/Switch.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/Textarea/Textarea.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/vis-elements/BarList/BarList.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tremor/react/dist/components/input-elements/Calendar/Calendar.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 3176 modules transformed.
computing gzip size (2)...copied:
  ../public/portal-tenant/manifest.webmanifest → ../public/manifest.webmanifest
computing gzip size (3)...  ../public/portal-tenant/.vite/manifest.json → ../public/portal-tenant/manifest.json
../public/portal-tenant/manifest.webmanifest                            0.59 kB
../public/portal-tenant/.vite/manifest.json                             1.34 kB │ gzip:   0.38 kB
../public/portal-tenant/assets/flags-Cx4r8tdH.webp                     28.17 kB
../public/portal-tenant/assets/flags@2x-CiSx7kJd.webp                  66.55 kB
../public/portal-tenant/assets/utils-kFyEPpp2.js                      264.62 kB
../public/portal-tenant/assets/index-DAK-MTQn.css                     518.76 kB │ gzip:  60.13 kB
../public/portal-tenant/assets/workbox-window.prod.es5-CIVDLvzL.js      5.77 kB │ gzip:   2.35 kB │ map:     14.50 kB
../public/portal-tenant/assets/tremor-CWDoRbCk.js                     950.74 kB │ gzip: 253.27 kB │ map:  3,730.38 kB
../public/portal-tenant/assets/index-_lTX1IM9.js                    2,415.90 kB │ gzip: 483.99 kB │ map: 16,054.48 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 11.69s

PWA v0.17.5
mode      generateSW
precache  51 entries (5772.84 KiB)
files generated
  ../public/sw.js.map
  ../public/sw.js
  ../public/workbox-dded88f3.js.map
  ../public/workbox-dded88f3.js

and this is the package.json file:

{
  "name": "portal-tenant",
  "version": "2.0.4",
  "private": true,
  "type": "module",
  "dependencies": {
    "@babel/plugin-transform-private-property-in-object": "^7.22.11",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/modifiers": "^7.0.0",
    "@ebay/nice-modal-react": "^1.2.13",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/pro-light-svg-icons": "^6.4.2",
    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^2.1.3",
    "@headlessui/tailwindcss": "^0.2.1",
    "@hookform/resolvers": "^3.1.1",
    "@remixicon/react": "^4.2.0",
    "@sentry/browser": "^8.26.0",
    "@sentry/react": "^8.26.0",
    "@tailwindcss/container-queries": "^0.1.1",
    "@tanstack/react-virtual": "^3.1.3",
    "@tremor/react": "^3.18.0",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
    "@types/react-modal": "^3.16.3",
    "@uidotdev/usehooks": "^2.1.1",
    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "classnames": "^2.3.2",
    "date-fns": "^3.6.0",
    "date-fns-timezone": "^0.1.4",
    "date-fns-tz": "^3.1.3",
    "filepond": "^4.30.6",
    "filepond-plugin-file-encode": "^2.1.14",
    "filepond-plugin-file-validate-size": "^2.2.8",
    "filepond-plugin-file-validate-type": "^1.2.8",
    "i18next": "^23.2.11",
    "i18next-http-backend": "^2.2.1",
    "intl-tel-input": "^24.0.1",
    "libphonenumber-js": "^1.10.48",
    "pusher-js": "^8.3.0",
    "react": "^18.2.0",
    "react-day-picker": "^9.0.8",
    "react-dom": "^18.2.0",
    "react-filepond": "^7.1.2",
    "react-hook-form": "^7.45.1",
    "react-hot-toast": "^2.4.1",
    "react-i18next": "^15.0.1",
    "react-idle-timer": "^5.7.2",
    "react-modal": "^3.16.1",
    "react-select": "^5.7.4",
    "react-textarea-autosize": "^8.5.3",
    "react-use-draggable-scroll": "^0.4.7",
    "swr": "^2.2.0",
    "typescript": "^4.9.5",
    "uuid": "^10.0.0",
    "wouter": "^2.11.0",
    "zod": "^3.21.4",
    "zustand": "^4.3.8"
  },
  "scripts": {
    "start": "vite --host",
    "build": "tsc && vite build --base=/portal-tenant/",
    "serve": "vite serve",
    "test": "vitest"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.8",
    "@types/uuid": "^10.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.20",
    "lightningcss": "^1.22.1",
    "postcss": "^8.4.42",
    "prettier": "^3.0.1",
    "prettier-plugin-tailwindcss": "^0.6.6",
    "prop-types": "^15.8.1",
    "rollup-plugin-copy": "^3.5.0",
    "tailwindcss": "^3.4.10",
    "terser": "^5.26.0",
    "vite": "^5.4.2",
    "vite-plugin-pwa": "^0.17.4",
    "vite-plugin-svgr": "^4.0.0",
    "vite-tsconfig-paths": "^4.2.0",
    "vitest": "^2.0.5"
  }
}

Thank you for your help! :)

severinlandolt commented 2 months ago

Hi @ibarral, the only thing that comes to my mind would be pinning the headless ui version to npm i @headless/ui@1.7.19

ibarral commented 2 months ago

hello @severinlandolt I just did the test, and I can confirm that the problem started when I migrated from Vite 4 to 5.

Maybe is some misconfiguration on my config files?

vite.config.ts file

import basicSsl from "@vitejs/plugin-basic-ssl";
import react from "@vitejs/plugin-react";
import copy from "rollup-plugin-copy";
import { defineConfig } from "vite";
import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
import svgrPlugin from "vite-plugin-svgr";
import viteTsconfigPaths from "vite-tsconfig-paths";

const pwaOptions: Partial<VitePWAOptions> = {
  registerType: "prompt",
  outDir: "../public",
  base: "/",
  manifest: {
    name: "myapp",
    short_name: "myapp",
    scope: "/",
    start_url: "/myapp",
    icons: [
      {
        src: "/portal-tenant/favicon-192.png",
        type: "image/png",
        sizes: "192x192",
        purpose: "any",
      },
      {
        src: "/portal-tenant/favicon-192.png",
        type: "image/png",
        sizes: "192x192",
        purpose: "maskable",
      },
      {
        src: "/portal-tenant/favicon-512.png",
        type: "image/png",
        sizes: "512x512",
        purpose: "any",
      },
      {
        src: "/portal-tenant/favicon-512.png",
        type: "image/png",
        sizes: "512x512",
        purpose: "maskable",
      },
    ],
    display: "standalone",
    theme_color: "#0f172a",
    background_color: "#0f172a",
    orientation: "any",
  },
  workbox: {
    cleanupOutdatedCaches: true,
    globPatterns: [
      "admin/assets/fonts/*.{woff2,eot,svg,ttf,woff}",
      "portal-tenant/**/*.{js,css,html,svg,png,ico}",
      "portal-tenant/locales/**/*.json",
    ],
    maximumFileSizeToCacheInBytes: 4194304,
    navigateFallback: null,
    runtimeCaching: [
      {
        urlPattern: ({ url }) => {
          return url.pathname.startsWith("/api/tenant");
        },
        handler: "NetworkFirst",
        options: {
          cacheName: "myapp-tenant-api",
          cacheableResponse: { statuses: [0, 200] },
        },
      },
      {
        urlPattern: ({ url }) => {
          return url.pathname.startsWith("/myapp/");
        },
        handler: "NetworkFirst",
        options: {
          cacheName: "myapp-tenant-portal",
          cacheableResponse: { statuses: [0, 200] },
        },
      },
    ],
  },
};

export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin(), basicSsl(), VitePWA(pwaOptions)],
  server: {
    port: 3000,
  },
  build: {
    sourcemap: true,
    outDir: "../public/portal-tenant",
    emptyOutDir: true,
    manifest: true,
    minify: "terser",
    cssMinify: "lightningcss",
    rollupOptions: {
      input: ["./src/index.tsx"],
      output: {
        manualChunks: {
          tremor: ["@tremor/react"],
        },
      },
      plugins: [
        copy({
          verbose: true,
          hook: "writeBundle",
          targets: [
            { src: "../public/portal-tenant/manifest.webmanifest", dest: "../public/" },
            { src: "../public/portal-tenant/.vite/manifest.json", dest: "../public/portal-tenant/" },
          ],
        }),
      ],
    },
  },
  define: {
    __APP_NAME__: JSON.stringify(process.env.npm_package_name),
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
  },
});

tsconfig.json file

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client", "vite-plugin-pwa/react", "./vite-env"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@stores/*": ["./src/stores/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@utils/*": ["./src/utils/*"],
      "@typesDef/*": ["./src/types/*"],
      "@helpers/*": ["./src/helpers/*"],
      "@schemaValidators/*": ["./src/schemaValidators/*"],
      "test-utils": ["./utils/test-utils"]
    }
  },
  "include": ["src"]
}

severinlandolt commented 2 months ago

Hi! I am no expert in Vite. Maybe add this to your define config: defineConfig

optimizeDeps: { exclude: ['@tremor/react'] },

severinlandolt commented 2 months ago

Did this help? Going to close this until further notice :)

tremorlabs / tremor