🧐[问题] module is not defined in Vite

[textnumber085]

trafficstars

I created a test project with yarn create vite my-react-app --template react-ts.

After everything is settled, then yarn add @ant-design/pro-components.

However when I add this page, it can not be loaded.

import { ProCard } from "@ant-design/pro-components";

const About = () => {
    return (
        <>
            <h1>About</h1>
            <ProCard title="默认尺寸" extra="extra" tooltip="这是提示" style={{ maxWidth: 300 }}>
                <div>Card content</div>
                <div>Card content</div>
                <div>Card content</div>
            </ProCard>
            <ProCard
                title="小尺寸卡片"
                extra="extra"
                tooltip="这是提示"
                style={{ maxWidth: 300, marginBlockStart: 24 }}
                size="small"
            >
                <div>Card content</div>
                <div>Card content</div>
                <div>Card content</div>
            </ProCard>
        </>
    );
};

export default About;

useHMR.js:14 Uncaught ReferenceError: module is not defined

[sushi-su]

https://github.com/ant-design/cssinjs/issues/46

[1589625130]

有没有人解决啊

[samonxian]

+1，需要兼容 vite 吧

[textnumber085]

ant-design/cssinjs#46

@sushi-su Just install @ant-design/cssinjs? still not working

[sushi-su]

@textnumber085 cssinjs 用 0.0.0-alpha.45 版本

[1589625130]

怎么用啊

[1589625130]

ant-design/cssinjs#46

哥，出个教程引导一下吧

[sushi-su]

@1589625130 ...在自己项目安装上指定版本就行

[sushi-su]

https://github.com/QNAV/RuoYi-X-Admin 可以参考我还在开发的一个项目

[1589625130]

https://github.com/QNAV/RuoYi-X-Admin 可以参考我还在开发的一个项目 谢谢老哥

[textnumber085]

@textnumber085 cssinjs 用 0.0.0-alpha.45 版本

Thanks, but still...

I'll look at your project :)

[Jungzl]

Add code snippets below to your package.json and reinstall.

pnpm:

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

yarn:

  "resolutions": {
    "@ant-design/pro-utils/**/@ant-design/cssinjs": "0.0.0-alpha.45"
  }

npm:

  "overrides": {
    "@ant-design/pro-utils": {
      "@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

[1589625130]

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

多谢大佬，完美解决

[583540970]

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

多谢大佬，完美解决

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

多谢大佬，完美解决

大佬,这段加在哪里

[1589625130]

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

多谢大佬，完美解决

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

多谢大佬，完美解决

大佬,这段加在哪里

package.json

[textnumber085]

Add code snippets below to your package.json and reinstall.

pnpm:

  "pnpm": {
    "overrides": {
      "@ant-design/pro-utils>@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

yarn:

  "resolutions": {
    "@ant-design/pro-utils/**/@ant-design/cssinjs": "0.0.0-alpha.45"
  }

npm:

  "overrides": {
    "@ant-design/pro-utils": {
      "@ant-design/cssinjs": "0.0.0-alpha.45"
    }
  }

thanks! error resolved!!