CommonJS Default Import missing / DEV MODE #482

aheissenberger · 2024-02-12T19:44:26Z

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?

The text was updated successfully, but these errors were encountered:

aheissenberger · 2024-02-12T20:10:11Z

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)

dai-shi · 2024-02-13T00:20:45Z

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.

campbellman · 2024-02-13T03:15:57Z

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'],
    }),
  ],
};

vite-plugin-cjs-interop source: https://github.com/cyco130/vite-plugin-cjs-interop
comment that led me there: Error in build: Named export. The requested module is a CommonJS module antfu-collective/vite-ssg#266 (comment)

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.

dai-shi · 2024-02-13T07:33:30Z

looks good to me for the current workaround > cjsInterop

aheissenberger · 2024-02-13T10:35:59Z

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

aheissenberger · 2024-02-13T11:17:43Z

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)

aheissenberger · 2024-02-13T11:58:57Z

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

Aslemammad · 2024-07-21T14:44:29Z

Can we close this since it's fixed in the upstream?

aheissenberger changed the title ~~CommonJS Default Import missing~~ CommonJS Default Import missing / DEV MODE Feb 12, 2024

dai-shi added the help wanted Extra attention is needed label Feb 13, 2024

dai-shi mentioned this issue Feb 19, 2024

[Umbrella] Third-party library compatibility issues #423

Open

9 tasks

dai-shi closed this as completed Jul 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CommonJS Default Import missing / DEV MODE #482

CommonJS Default Import missing / DEV MODE #482

aheissenberger commented Feb 12, 2024 •

edited

Loading

aheissenberger commented Feb 12, 2024

dai-shi commented Feb 13, 2024

campbellman commented Feb 13, 2024 •

edited

Loading

dai-shi commented Feb 13, 2024

aheissenberger commented Feb 13, 2024 •

edited

Loading

aheissenberger commented Feb 13, 2024

aheissenberger commented Feb 13, 2024

Aslemammad commented Jul 21, 2024

CommonJS Default Import missing / DEV MODE #482

CommonJS Default Import missing / DEV MODE #482

Comments

aheissenberger commented Feb 12, 2024 • edited Loading

aheissenberger commented Feb 12, 2024

dai-shi commented Feb 13, 2024

campbellman commented Feb 13, 2024 • edited Loading

dai-shi commented Feb 13, 2024

aheissenberger commented Feb 13, 2024 • edited Loading

aheissenberger commented Feb 13, 2024

aheissenberger commented Feb 13, 2024

Aslemammad commented Jul 21, 2024

aheissenberger commented Feb 12, 2024 •

edited

Loading

campbellman commented Feb 13, 2024 •

edited

Loading

aheissenberger commented Feb 13, 2024 •

edited

Loading