Using Cloudscape with Remix

[bshelling]

Does anyone have any experience use cloudscape with remix? When I import a component I receive this message.

(node:15503) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
/Users/bshelling/Projects/notesyncpatient-app/client/node_modules/@cloudscape-design/components/button/index.js:1
import { __rest } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1195:20)
at Module._compile (node:internal/modules/cjs/loader:1239:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
at Module.load (node:internal/modules/cjs/loader:1133:32)
at Module._load (node:internal/modules/cjs/loader:972:12)
at ModuleWrap. (node:internal/modules/esm/translators:168:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

[avinashbot]

The Cloudscape components package is designed around bundlers, and uses non-ESM import statements and CSS side-effect imports. The Remix docs have a page on how to support these packages here: https://remix.run/docs/en/main/styling/css-imports.

In short, just add cloudscape-design packages to serverDependenciesToBundle like so:

  serverDependenciesToBundle: [/^@cloudscape-design\/.*/],

[bshelling]

@avinashbot Thanks. I'll check it out

[chehsunliu]

Based on this comment:

With vite, serverDependenciesToBundle is no longer used since vite has it's own ssr.noExternal config that you can use.

So I have to modify vite.config.ts instead:

--- vite.config.ts   2024-09-15 14:56:28.437318477 +0800
+++ vite.config.ts   2024-09-15 14:56:20.571202001 +0800
@@ -3,6 +3,9 @@
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
+  ssr: {
+    noExternal: [/^@cloudscape-design\/.*/]
+  },
   plugins: [
     remix({
       future: {

Reference: https://remix.run/docs/en/main/guides/spa-mode#cjsesm-dependency-issues

[davidsainez]

Thanks a bunch!