T
TanStack•2mo ago
foreign-sapphire

Start RC -> Failed to load the ES module

Hi, code that was working OK inside Start 1.31 is now showing an error in the logs. https://68dcdf7e5058d6c68105c80c--momnium.netlify.app/ The strange thing is that if the page is loaded directly from the address bar it loads ok. But if I navigate to a route using a link, I get this error. But if I refresh it loads. Log message: 
Oct 1, 11:04:23 AM: 99aee44c ERROR (node:8) Warning: Failed to load the ES module: /var/task/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.esm.js. Make sure to set "type": "module" in the nearest package.json file or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Oct 1, 11:04:23 AM: 99aee44c ERROR /var/task/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.esm.js:7
import{getRelativePosition as t}from"chart.js/helpers";import{Chart as n}from"chart.js";var e={value:()=>{}};function i(){for(var t,n=0,e=arguments.length,i={};n<e;++n){if(!(t=arguments[n]+"")||t in i||/[\s.]/.test(t))throw 

…

SyntaxError: Cannot use import statement outside a module
at wrapSafe (node:internal/modules/cjs/loader:1620:18)
at Module._compile (node:internal/modules/cjs/loader:1662:20)
at Object..js (node:internal/modules/cjs/loader:1820:10)
at Module.load (node:internal/modules/cjs/loader:1423:32)
at Function._load (node:internal/modules/cjs/loader:1246:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at cjsLoader (node:internal/modules/esm/translators:268:5)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:202:7)
at ModuleJob.run (node:internal/modules/esm/module_job:343:25),
status: 500,
statusText: undefined,
headers: undefined,
data: undefined,
body: undefined,
unhandled: true
}
Oct 1, 11:04:23 AM: 99aee44c ERROR (node:8) Warning: Failed to load the ES module: /var/task/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.esm.js. Make sure to set "type": "module" in the nearest package.json file or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Oct 1, 11:04:23 AM: 99aee44c ERROR /var/task/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.esm.js:7
import{getRelativePosition as t}from"chart.js/helpers";import{Chart as n}from"chart.js";var e={value:()=>{}};function i(){for(var t,n=0,e=arguments.length,i={};n<e;++n){if(!(t=arguments[n]+"")||t in i||/[\s.]/.test(t))throw 

…

SyntaxError: Cannot use import statement outside a module
at wrapSafe (node:internal/modules/cjs/loader:1620:18)
at Module._compile (node:internal/modules/cjs/loader:1662:20)
at Object..js (node:internal/modules/cjs/loader:1820:10)
at Module.load (node:internal/modules/cjs/loader:1423:32)
at Function._load (node:internal/modules/cjs/loader:1246:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at cjsLoader (node:internal/modules/esm/translators:268:5)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:202:7)
at ModuleJob.run (node:internal/modules/esm/module_job:343:25),
status: 500,
statusText: undefined,
headers: undefined,
data: undefined,
body: undefined,
unhandled: true
}
package.json already has type: "module"
Track Cycling Tools & Insights for Cyclists and Coaches
Momnium provides advanced tools for track cycling training, race analysis, and equipment optimization. Also a blog packed with expert tips and insights.
2 Replies
foreign-sapphire
foreign-sapphireOP•2mo ago
Offending code is: 
import DragDataPlugin from 'chartjs-plugin-dragdata';

...

export function registerChartPlugins(): void {
    Chart.registry.addScales(CategoryScale);
    Chart.registry.addScales(LinearScale);
    Chart.registry.addScales(RadialLinearScale);
    Chart.registry.addScales(TimeSeriesScale);
    Chart.registry.addPlugins(Filler);
    Chart.registry.addPlugins(Legend);
    Chart.registry.addPlugins(Tooltip);
    Chart.registry.add(ArcElement);
    Chart.registry.add(DoughnutController);
    Chart.registry.add(LineController);
    Chart.registry.add(LineElement);
    Chart.registry.add(PointElement);
    Chart.registry.add(RadarController);
    Chart.registry.add(ScatterController);
    Chart.registry.add(DragDataPlugin);
    Chart.registry.add(BarController);
    Chart.registry.add(BarElement);
}
import DragDataPlugin from 'chartjs-plugin-dragdata';

...

export function registerChartPlugins(): void {
    Chart.registry.addScales(CategoryScale);
    Chart.registry.addScales(LinearScale);
    Chart.registry.addScales(RadialLinearScale);
    Chart.registry.addScales(TimeSeriesScale);
    Chart.registry.addPlugins(Filler);
    Chart.registry.addPlugins(Legend);
    Chart.registry.addPlugins(Tooltip);
    Chart.registry.add(ArcElement);
    Chart.registry.add(DoughnutController);
    Chart.registry.add(LineController);
    Chart.registry.add(LineElement);
    Chart.registry.add(PointElement);
    Chart.registry.add(RadarController);
    Chart.registry.add(ScatterController);
    Chart.registry.add(DragDataPlugin);
    Chart.registry.add(BarController);
    Chart.registry.add(BarElement);
}
Then this get's called like this: 
import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router';
import { ReactElement } from 'react';
import { SignedIn, SignedOut } from '@clerk/tanstack-react-start';
import { RouteDefinition as SignInRouteDefinition } from '@/routes/sign-in';
import { RouteDefinition as AppRouteDefinition } from '@/routes/_authed/app.index';
import { registerChartPlugins } from '@/components/common/chart/utils';

registerChartPlugins();

export const Route = createFileRoute('/_authed')({
    component: ProtectedComponent,
});

function ProtectedComponent(): ReactElement {
    return (
        <>
            <SignedIn>
                <div className="flex flex-1 pt-[calc(var(--header-height)-10px)]">
                    <Outlet />
                </div>
            </SignedIn>
            <SignedOut>
                <Navigate to={SignInRouteDefinition.path as string} from={AppRouteDefinition.path as any} />
            </SignedOut>
        </>
    );
}
import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router';
import { ReactElement } from 'react';
import { SignedIn, SignedOut } from '@clerk/tanstack-react-start';
import { RouteDefinition as SignInRouteDefinition } from '@/routes/sign-in';
import { RouteDefinition as AppRouteDefinition } from '@/routes/_authed/app.index';
import { registerChartPlugins } from '@/components/common/chart/utils';

registerChartPlugins();

export const Route = createFileRoute('/_authed')({
    component: ProtectedComponent,
});

function ProtectedComponent(): ReactElement {
    return (
        <>
            <SignedIn>
                <div className="flex flex-1 pt-[calc(var(--header-height)-10px)]">
                    <Outlet />
                </div>
            </SignedIn>
            <SignedOut>
                <Navigate to={SignInRouteDefinition.path as string} from={AppRouteDefinition.path as any} />
            </SignedOut>
        </>
    );
}
I'm wondering why did this work in 1.131.x but not in 1.1.32.x. What has changed? What is the correct way to call registerChartPlugins(); once when the _authed is loaded first? I guess this would fix it. I've tried this: 
beforeLoad: () => registerChartPlugins()
beforeLoad: () => registerChartPlugins()
but that's not helping....
harsh-harlequin
harsh-harlequin•2mo ago
you need to the offending package to ssr.noExternal in the vite config

Did you find this page helpful?