SyntaxError: Named export 'xxx' not found. The requested module 'xxx.js' is a CommonJS module,

[EralChen]

Hi! Thanks for Reading

I just import MapView from '@arcgis/core/views/MapView'

// index.page.vue
<script lang="ts" setup>
import MapView from '@arcgis/core/views/MapView'
</script>

And got Error

15:51:15 [vike][request(1)] HTTP request: /
15:51:18 [vite][request(1)] Error when evaluating SSR module /pages/index.page.vue: failed to import "@arcgis/core/views/MapView"
|- file:///D:/projectCode/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%BA%94%E7%94%A8/zz-platform-template/node_modules/.pnpm/@[email protected]/node_modules/@esri/calcite-components/dist/components/index.js:6
export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client/index.js';
         ^^^^^^^^^^^^
SyntaxError: Named export 'getAssetPath' not found. The requested module '@stencil/core/internal/client/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@stencil/core/internal/client/index.js';
const { getAssetPath, setAssetPath, setNonce, setPlatformOptions } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

That's ok in SPA.

Is there any way to import and use it?

A simple demo you can try at https://github.com/EralChen/simple-ssr

[brillout]

It's a common issue with ESM-CJS. It's unrelated to Vike.

If you can provide a minimal reproduction then I'll have a look at it.

[brillout]

Have you tried Node.js's recommendation?

import pkg from '@stencil/core/internal/client/index.js';
const { getAssetPath, setAssetPath, setNonce, setPlatformOptions } = pkg;

[brillout]

Nervermind, I'm seing it's library code you cannot (easily) modify.

[EralChen]

yeah, it's a package @arcgis/core

[brillout]

I'd use https://github.com/cyco130/vite-plugin-cjs-interop to fix the issue. Alternatively, you can add the problematic npm package to ssr.noExternal.

Also, vike-vue has an ssr: boolean flag which allows you to seamlessly disable SSR. This means you can disable SSR for your map pages while using SSR for your other pages. You can use Bati to scaffold a vike-vue app.

If you want SSR for the outer part of your map pages, you can wrap your map in a <ClientOnly> component so that it's imported only on the client-side.

Let me know how it goes.

[EralChen]

Thanks , I'll try later

[EralChen]

It works by

<template>
  <PageX>
    <ClientOnly>
      <MyMapView></MyMapView>
    </ClientOnly>
  </PageX>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import PageX from '#/components/PageX/index.vue'
import ClientOnly from '#/components/ClientOnly'
const MyMapView = defineAsyncComponent(() => import('#/components/MyMapView/index.vue'))
</script>

Also, I tried vite-plugin-cjs-interop

But the plugin seems not work.

And ssr.noExternal is ok, just the lib has the ReferenceError: Element is not defined in SSR.

Anyway, <ClientOnly> component is useful for the issue.

Thanks for your help!

[brillout]

👍 I'm glad your problem is solved. (It seems like your library doesn't really support SSR, so the only viable option until it does is to render the page as SPA or to wrap it in <ClientOnly>.)

Do you mind sharing your implementation? We're thinking of adding a <ClientOnly> implementation to vike-vue (FYI @AurelienLourot).

Btw. in case your company would be up for it: https://github.com/sponsors/brillout. Any amount is appreciated :).

[brillout]

(@EralChen Thanks for the donation 💚. Next step is getting company sponsorship 🙂.)