ant-design/ant-design-mobile

新版本remix框架SSR报global.css错误

Closed this issue · 4 comments

aofong commented

Version of antd-mobile

5.34.0

Operating system and its version

Others

Browser and its version

Microsoft Edge 123.0.2420.53 (正式版本) (x86_64)

Sandbox to reproduce

No response

What happened?

在新版本remix框架中antd-mobile启动报错，新版本remix使用了vite来编译，之前的版本好像可以正常使用

remix：2.8.1
vite: 5.2.6

参考了 文档中的remix ssr部分后仍然报错

Relevant log output

09:34:50 [vite] Error when evaluating SSR module /app/routes/_index.tsx: failed to import "antd-mobile"
|- /Users/123/Documents/WorkDocument/td_h5_cloud/node_modules/antd-mobile/cjs/global/global.css:1
:root {
^

SyntaxError: Unexpected token ':'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1274:20)
    at Module._compile (node:internal/modules/cjs/loader:1320:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/Users/123/Documents/WorkDocument/td_h5_cloud/node_modules/antd-mobile/cjs/global/index.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
typytypytypy commented

make sure you put ?url at the end of the import

import antdGlobalStyles from "antd-mobile/es/global/global.css?url";

typytypytypy commented

I'm not sure exactly what the error is for you, but I can show you what is working for me:

vite.config.ts
//added antd-mobile to ssr:noExternal

ssr: {
    noExternal: ["antd-mobile"],
  },

package.json
// pinned react to canary version

"react": "^18.3.0-canary-c3048aab4-20240326",
"react-dom": "^18.3.0-canary-c3048aab4-20240326",

root.tsx

import antdGlobalStyles from "antd-mobile/es/global/global.css?url";
import antdstyles from "antd-mobile/bundle/style.css?url";

...
export const links = () => {
  return [
    { rel: "stylesheet", href: antdGlobalStyles },
    { rel: "stylesheet", href: antdstyles },

Try those changes and let me know what you get.

  • 👍1
aofong commented

@typytypytypy Thank you very much