Replies: 2 comments 2 replies
-
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
|
Beta Was this translation helpful? Give feedback.
-
Based on this comment:
So I have to modify --- 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 |
Beta Was this translation helpful? Give feedback.
-
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)
Beta Was this translation helpful? Give feedback.
All reactions