vite+react+antd，build之后出现报错？

Jairwin-L commented 3 years ago

Describe the bug

使用antd的DatePicker组件点击时候出现问题，如图：

感谢🙏： @sodatea @Shinigami92 @underfin @psaren

Reproduction

https://github.com/Jairwin-L/vite-react-ts-demo/blob/077146486dcbd2965b6773bcf170dce5aabaec51/src/pages/demo.tsx#L25

System Info

"dependencies": {
        "antd": "^4.16.6",
        "antd-mobile": "^2.3.4",
        "indexof": "^0.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.2.0"
    },
    "devDependencies": {
        "@types/node": "^14.14.31",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/react-router-dom": "^5.1.7",
        "@vitejs/plugin-legacy": "^1.3.2",
        "@vitejs/plugin-react-refresh": "^1.3.2",
        "less": "^4.1.1",
        "typescript": "^4.1.2",
        "vite": "^2.3.6",
        "vite-plugin-cdn": "^1.0.0-beta.3",
        "vite-plugin-resolve-externals": "^0.1.0",
        "vite-plugin-style-import": "^0.7.6"
    }

Used Package Manager

yarn

Logs

ReferenceError: module is not defined

Validations

[ ] Follow our Code of Conduct
[ ] Read the Contributing Guidelines.
[ ] Read the docs.
[ ] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[ ] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[ ] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

benmccann commented 3 years ago

This error was also reported in a SvelteKit project: https://github.com/sveltejs/kit/issues/1961

The reporter provided a repo to reproduce: https://github.com/raulfdm/sveltekit-vite-ssr-error

benmccann commented 3 years ago

From the SvelteKit report, I notice that unified has "type": "module". It declares a dependency on is-buffer which is CJS. This seems similar to the issue of not being able to have a CJS dependency in an ESM module (https://github.com/vitejs/vite/issues/3024) though the error message is different, so I'm not sure it's exactly the same

The SvelteKit project works if I update is-buffer and extend to distribute ESM versions. Though the author of extend says screw ESM. He only wants to support CJS and considers this a Vite bug (https://github.com/justmoon/node-extend/pull/57). So there's a whole lot of projects that will not work in Vite until this issue is fixed since that library alone is downloaded 20m times per week

It looks like unified is not being treated as external because there is not a separate CJS and ESM entry point. Instead it has only main with "type": "module". I can't add it to ssr.external because then I get the error message Must use import to load ES Module

raulfdm commented 3 years ago

This error was also reported in a SvelteKit project: sveltejs/kit#1961

The reporter provided a repo to reproduce: https://github.com/raulfdm/sveltekit-vite-ssr-error (note that raulfdm/sveltekit-vite-ssr-error#1 must be merged to run the project)

Just something I think it might worth mention, is that it's possible use it with skypack:

Open https://www.skypack.dev/view/unified
Click "Open in Codepen"
Change the import statement from import unified from 'https://cdn.skypack.dev/unified'; to import {unified} from 'https://cdn.skypack.dev/unified';
Console console.log(unified())

I'm not sure how they do but they do

sodatea commented 3 years ago

A simple workaround: Add the following script tag in the index.html before the entry script:

<script>var module = {}</script>

It's a bug in the Rollup CommonJS plugin that doesn't fully recognize the code snippet used by moment to detect the CommonJS environment. I'll open an issue there.

ArnaudBarre commented 1 year ago

Just tested with Vite@4 and react-plugin@3 the date picker work both in dev and preview

vitejs / vite-plugin-react