`Cannot set properties of undefined` Type Error for React Moment package

[iknowhtml]

Describe the bug

I'm migrating one of our projects at my company to Vite from CRA, and I see the following error in the console when I navigate to the locally hosted application in my browser:

See also the log file:
localhost-1647615535049.log

Needless to say, this wasn't an issue when we were using CRA.

I've tried a number of work arounds myself, but to no avail.

Happy to share if they're of interest.

Would love to find a fix for this as CRA is painfully slow for running a local development environment and building our project for production.

Thank you!

Reproduction

https://stackblitz.com/edit/vitejs-vite-vvkwaa

System Info

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 1.05 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.2.0/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
  Browsers:
    Brave Browser: 99.1.36.112
    Chrome: 99.0.4844.74
    Firefox: 94.0.2
    Firefox Developer Edition: 98.0
    Safari: 14.1.2
  npmPackages:
    @vitejs/plugin-react: ^1.2.0 => 1.2.0 
    vite: ^2.8.6 => 2.8.6

Used Package Manager

npm

Logs

N/A (no errors when running vite or vite build)

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/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

This issue is simillar to #7053.

• react-moment(cjs) is importing moment by import (which is transpiled to require) here.
• moment is resolved to moment/dist/moment.js(esm) by jsnext:main field.

After prebundle, module.exports = { default: Moment } but react-moment expects it to be module.exports = Moment so the error occurs.

[ZinkNotTheMetal]

I have the same issue

[sapphi-red]

I digged down a bit more.
moment is resolved by jsnext:main field here.

vite/packages/vite/src/node/plugins/resolve.ts

Lines 773 to 780 in fe4c1ed

	if (!entryPoint || entryPoint.endsWith('.mjs')) {
	for (const field of options.mainFields || DEFAULT_MAIN_FIELDS) {
	if (typeof data[field] === 'string') {
	entryPoint = data[field]
	break
	}
	}
	}

So for a workaround, setting resolve.mainFields to [] will work.

I am not sure whether it is ok to change !entryPoint || entryPoint.endsWith('.mjs') to !options.isRequire && (!entryPoint || entryPoint.endsWith('.mjs')) like #7438.

[iknowhtml]

Can confirm that the above work around resolves the issue:
https://stackblitz.com/edit/vitejs-vite-3kngck?file=vite.config.js

Thanks @sapphi-red!

[bluwy]

Closing as #7582 should fix this issue too.

[iknowhtml]

@bluwy , the latest version of Vite (2.9.1) doesn't resolve the issue:
https://stackblitz.com/edit/vitejs-vite-skvjpc?file=package.json

I'm assuming a build with the fix just hasn't been released it.
When can we expect a new version that has the fix?

Thanks!

[patak-dev]

Yes, it will be in 2.9.2, probably in a few days. We have some CI issues to check first.

[iknowhtml]

Sounds good. Thank you @patak-dev for the prompt reply!

[sapphi-red]

Opening because #7582 was reverted by #7737.