`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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] 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. https://github.com/vitejs/vite/blob/fe4c1edbe009e1df340b4d879c02d2e57a6cd7f0/packages/vite/src/node/plugins/resolve.ts#L773-L780 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.

[roddc]

I am getting this error from a library Ros.js:36 Uncaught TypeError: Cannot set properties of undefined (setting 'socket').

function Ros(options) {
  options = options || {};
  var that = this;
  this.socket = null;
...
}

How do I fix this, the workaround is not working.

I am using 3.0.3 version of vite

[JairTorres1003]

The same thing happened to me and here https://github.com/vitejs/vite/issues/6675#issuecomment-1034142133 I found the solution for my part, it works fine, you just have to modify the file vite.config.js and also install the plugin

[ismaelpaul]

The same thing happened to me and here #6675 (comment) I found the solution for my part, it works fine, you just have to modify the file vite.config.js and also install the plugin

It worked for me as well, thanks Jair :)

[trdxDeepu]

those who created react app with vite can get the issues like that can be resolve by using this just

[SuRiRONHeaRt]

those who created react app with vite can get the issues like that can be resolve by using this just

you're the king here! simple, no show off words. plain solution. other people who try to show off by using technical terms can go f themselves.

[trdxDeepu]

Sorry is this a good comment for me or a bad because i m not good at kuch English

[SuRiRONHeaRt]

Very Good comment brother. You are the only one who explained the solution very clear. Others just used fancy technical terms to show off.

On Fri, 14 Apr 2023, 18:59 Deependra Singh, @.***> wrote:

Sorry is this a good comment for me or a bad because i m not good at kuch English

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/7376#issuecomment-1508506932, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FPL4DTTKS3C72L5VVXQU3XBFGMXANCNFSM5RCDVMOQ . You are receiving this because you commented.Message ID: @.***>

[ChristianCaracach-velaONE]

The same thing happened to me and here #6675 (comment) I found the solution for my part, it works fine, you just have to modify the file vite.config.js and also install the plugin

Worked for me. Thanks!!

[joseteIIo]

I am not using CRA for a project and unfortunately the issue persists even with @trdxDeepu 's solution.