Giters

dai-shi / waku

⛩️ The minimal React framework

Home Page:https://waku.gg

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CommonJS Default Import missing / DEV MODE

aheissenberger opened this issue · comments

commented

ERROR in hydration process in browser - only in DEV MODE pnpm waku dev --with-ssr - build has no problems:

react-server-dom-webpack_client.js?v=0f579180:864 Uncaught SyntaxError: 
The requested module '/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/dayjs.min.js?v=32646099' does not provide an export named 'default' (at get-timezone-offset.mjs?v=32646099:2:8)

original file - bundled:

'use client';
import dayjs from "/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/dayjs.min.js?v=89918f44";
import timezonePlugin from "/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/plugin/timezone.js?v=89918f44";
import utcPlugin from "/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/plugin/utc.js?v=89918f44";

dayjs.extend(utcPlugin);
dayjs.extend(timezonePlugin);
function getTimezoneOffset(date, timezone) {
    if (timezone) {
        return dayjs(date).tz(timezone).utcOffset() + date.getTimezoneOffset();
    }
    return 0;
}

export {getTimezoneOffset};

The package dayjs package.json does not provide a type nor does it provide exports. An esm folder exists but is not detected by Vitejs.

The script does not fail with import dayjs from, it fails with the deep import from plugin folder:
import timezonePlugin from "/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/plugin/timezone.js?v=89918f44";

current vite config:

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => ({
  ...({
    optimizeDeps: {
      exclude: ['@mantine/core','@mantine/hooks'],
    },
    ssr: {
      noExternal: ['@mantine/core','@mantine/hooks'],
    },
  }),
}));

tsconfig.node.json
tsconfig.json

How can a change of vite DEV MODE config fix this problem?

commented

same problem with lodash:

react-server-dom-webpack_client.js?v=445c577a:864 Uncaught SyntaxError: The requested module '/node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/get.js?v=b868b311' does not provide an export named 'default' (at DataUtils.js?v=b868b311:3:8)
commented

it fails with the deep import from plugin folder

Sounds like it's extremely hard to solve. Hoped externalizing would help.

$ mkdir dayjs-test
$ cd dayjs-test 
$ npm init -y
$ npm i dayjs
$ cat test.mjs
import timezonePlugin from "dayjs/plugin/timezone.js";

console.log(timezonePlugin);
$ node test.mjs
[Function (anonymous)]

Hmm, this works. We'd need someone experienced with Vite.

commented

I was able to prevent the lodash error after installing vite-plugin-cjs-interop and adding the following vite.config.ts file:

import { cjsInterop } from 'vite-plugin-cjs-interop';

export default {
  plugins: [
    cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: ['lodash'],
    }),
  ],
};

I wasn't able to reproduce the dayjs issue myself so I'm curious if this fixes that as well @aheissenberger.

Doesn't seem like a great long term solution. I'll continue looking further into waku's internal config.

commented

looks good to me for the current workaround > cjsInterop

commented

no improvement - I tested the plugin with this config:

cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: ['lodash','lodash/**','dayjs','dayjs/**'],
}),

To be clear - the problem exists only in the javascript code which is loaded in dev mode in the hydration process. The server side rendered code works without an error and outputs the correct static html in dev mode, then the hydration kicks in and the error is thrown in the browser.

I think the logic of the plugin could help but the plugin seems not to be called to transform the code required by the frontend in the hydration process. The documentation of the plugin states that it will only be called during the SSR process.

I removed the vite cache in ./node_modules/.vite before every test - here is a grep of all that happend with dayjs in the vitejs debug output:

2024-02-13T10:07:55.206Z vite:resolve 0.30ms @mantine/dates/styles.css -> /waku-mantine/node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.332Z vite:load 126.02ms [fs] node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.335Z vite:import-analysis 0.05ms [no imports] node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.335Z vite:transform 2.34ms node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.368Z vite:load 1.73ms [fs] node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.370Z vite:hmr [self-accepts] node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.370Z vite:import-analysis 0.07ms [0 imports rewritten] node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.370Z vite:transform 1.80ms node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.371Z vite:resolve 0.19ms /node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css -> /waku-mantine/node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.389Z vite:load 17.85ms [fs] /node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.390Z vite:import-analysis 0.05ms [no imports] node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css
2024-02-13T10:07:55.390Z vite:transform 1.62ms /node_modules/.pnpm/@mantine+dates@7.5.2_@mantine+core@7.5.2_@mantine+hooks@7.5.2_dayjs@1.11.10_react-dom@18.3.0-_ijs54lfvbjpc5kq3mttqn75pb4/node_modules/@mantine/dates/styles.css

As a next step I will try to create a simple test setup without the Mantine UI framework

commented

I found this additional options for the plugin - but then the plugin crashes:

plugins: [
    cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: [
      'dayjs'
    ],
      client: true,
      apply:'serve'
    }),
  ],

I debugged the crash of the acorn javascript parser and fixed it by modifying the cjs-interop plugin to ignoring code where the id ends with .css.

The original error is gone, but I have now an other error:

Uncaught TypeError: Cannot read properties of null (reading 'use')
    at use (chunk-FJJXHVDL.js?v=fe4df551:1736:29)
    at Children (client.js?v=fe4df551:126:29)
    at renderWithHooks (chunk-6XPIBFK3.js?v=b35bb809:8402:26)
    at updateFunctionComponent (chunk-6XPIBFK3.js?v=b35bb809:12140:28)
    at mountLazyComponent (chunk-6XPIBFK3.js?v=b35bb809:12453:23)
    at beginWork$1 (chunk-6XPIBFK3.js?v=b35bb809:13568:22)
    at HTMLUnknownElement.callCallback2 (chunk-6XPIBFK3.js?v=b35bb809:14917:22)
    at Object.invokeGuardedCallbackImpl (chunk-6XPIBFK3.js?v=b35bb809:14942:24)
    at invokeGuardedCallback (chunk-6XPIBFK3.js?v=b35bb809:14982:37)
    at beginWork (chunk-6XPIBFK3.js?v=b35bb809:19031:15)
commented

The plugin is from @cyco130 which hast build his own ssr framework and worked with @nksaraf on a vite-rsc prototype.
I have opened an issue and pull request to fix the problem:
cyco130/vite-plugin-cjs-interop#29