Dynamic imports doesn't work after i upgraded to Vite 5.3.1

[sadiki-o]

Describe the bug

useEffect(() => {
        if (dateTooltipTheme === 'light') import('tippy.js/themes/light.css');
        if (dateTooltipTheme === 'light-border') import('tippy.js/themes/light-border.css');
        if (dateTooltipTheme === 'material') import('tippy.js/themes/material.css');
        if (dateTooltipTheme === 'translucent') import('tippy.js/themes/translucent.css');
    }, [dateTooltipTheme]);

This code used to work with my package package but now i get this error when i try my package in a vite environment:

Reproduction

https://github.com/sadiki-o/react-full-year-scheduler/

Steps to reproduce

No response

System Info

System:
    OS: Linux 6.9 EndeavourOS
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 3.28 GB / 14.99 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.2.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.1 - /usr/bin/npm
    pnpm: 9.2.0 - /usr/bin/pnpm
    bun: 1.0.22 - /usr/bin/bun
  Browsers:
    Brave Browser: 125.1.66.118
    Chromium: 125.0.6422.141

Used Package Manager

npm

Logs

Plugin: vite:import-analysis
  File: /home/darkuni/Documents/reproduce/react-full-year-scheduler/dist/index-CFyecHGU.js:171:49
  3285|      ae(se), !C && ne(void 0), !C && Q(void 0), pe(void 0);
  3286|    }, [te, i, C, Fe]), wt(() => {
  3287|      r === "light" && import("./light-l0sNRNKZ.js"), r === "light-border" && import("./light-border-l0sNRNKZ.js"), r === "material" && import("./material-l0sNRNKZ.js"), r === "translucent" && import("./translucent-l0sNRNKZ.js");
     |                              ^
  3288|    }, [r]), K ? /* @__PURE__ */ j.jsxs(
  3289|      At.Provider,
      at TransformPluginContext._formatError (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:49703:41)
      at TransformPluginContext.error (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:49698:16)
      at normalizeUrl (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:64260:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:64392:39
      at async Promise.all (index 146)
      at async TransformPluginContext.transform (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:64319:7)
      at async PluginContainer.transform (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:49544:18)
      at async loadAndTransform (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:52366:27)
      at async viteTransformMiddleware (file:///home/darkuni/Documents/test-list/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:62102:24)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

I can't reproduce the error with the repro you gave. I ran npm i and npm run dev and didn't see any errors. Is there a step I'm missing?

[sadiki-o]

@bluwy use this code in app.tsx:

import dayjs from "dayjs";
import { useState } from "react";
import { ReactFullYearScheduler, TEvent } from "react-full-year-scheduler";

const App = () => {
    const [events, setEvents] = useState<TEvent[]>([
        {
            eventName: "event 1",
            startDate: dayjs("2023-01-10"),
            endDate: dayjs("2023-02-01"),
            eventBgColor: "#ff5f4c",
            eventTextColor: "white",
        },
        {
            eventName: "event 2",
            startDate: dayjs("2023-04-01"),
            endDate: dayjs("2023-04-30"),
            eventBgColor: "purple",
            eventTextColor: "white",
        },
        {
            eventName: "event 3",
            startDate: dayjs("2023-05-01"),
            endDate: dayjs("2023-05-29"),
            eventBgColor: "green",
            eventTextColor: "white",
        },
    ]);
    return (
        <div className="w-[1400px] mx-auto mt-10">
            <ReactFullYearScheduler
                events={events}
                locale="en"
                dateTooltipTheme="material"
                weekSeparatorWidth={10}
                weekSeparatorColor="white"
                headerWeekDayBgColor="#b39cd0"
                headerWeekendBgColor="rgba(75, 68, 83, 0.69)"
                weekendCellBackgroundColor="rgba(75, 68, 83, 0.69)"
                weekendCellTextColor="white"
                weekDayCellBackgroundColor="rgba(75, 68, 83, 0.69)"
                weekDayCellTextColor="white"
                selectionColor="black"
                selectionTextColor="white"
                maxRangeSelection={50}
                minRangeSelection={5}
                firstDayOfWeek="Monday"
                customWeekend={[4, 5]}
                maxYear={2030}
                minYear={1970}
                readonlyCalendar={false}
                showWeekSeparator={false}
                showTodayButton={true}
                enableYearToYearSelection={true}
                enableWeekendSelection={false}
                minCellWidth={30}
                showSeparatorInHeader={false}
                enableEventOverwriting={true}
                onDatePick={(eventDate, clearSelectedCell) => {
                    console.log(eventDate.toDate());
                }}
                onEventSinglePickInterception={(date, eventName, clearSelectedCell) => {
                    console.table([eventName, date.toDate()]);
                }}
                onRangePick={(eventStartDate, eventEndDate, clearSecondSelectedCell, clearSelection) => {
                    console.log("duck");
                }}
                onEventRangePickInterception={(
                    eventFirstDate,
                    eventLastDate,
                    eventsToBeDeleted,
                    eventsToBeUpdated,
                    clearSecondSelectedCell,
                    clearSelection,
                ) => {}}
            />
        </div>
    );
};

export default App;

just to make sure we follow the same steps:

• you can either install my package from npm or download my package and build it
• create an empty Vite project with react-ts and install the package from the folder where you cloned it for example:
  'npm i ~/path-to-package'
• run : 'npm run dev'

[sadiki-o]

you need to use the package to trigger the error

[bluwy]

I can't reproduce the issue following the steps. Everything is working fine without errors on my end. If I manually check the imports where you're showing the error, I can see that the path is valid. Can you provide a full repro of the problem as a github repo or stackblitz?

[sadiki-o]

@bluwy i apologize i forgot to mention that i have upgraded vite in my package to version 5.3.1. Try changing version building the package and use in another vite project

[bluwy]

Can you provide a proper repro? I think there's a lot of back and forth that can be prevented if we have it.

[sadiki-o]

I can't deploy a non working version of my package, i have created a seperate branch which you can clone and test by the following:

git clone --branch updating-vite-version-for-test https://github.com/sadiki-o/react-full-year-scheduler.git

i apologize i can't provide a codesandox since the package with Vite 5.3.1 is not deployed to npm.

[sadiki-o]

@bluwy here is a very dirty solution sorry , replit i cloned the package inside this repl folder and installed it