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

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.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 1
Comments: 20 (5 by maintainers)

Most upvoted comments

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

+23

trdxDeepu on Mar 15, 2023

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

Thanks @sapphi-red!

+14

iknowhtml on Mar 29, 2022

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.

SuRiRONHeaRt on Dec 22, 2023

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

JairTorres1003 on Nov 14, 2022

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.

sapphi-red on Mar 29, 2022

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.

sapphi-red on Mar 18, 2022

Still problem after npm run build

npm run dev working correctly

igorleszczynski on Feb 26, 2024

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: @.***>

SuRiRONHeaRt on Dec 22, 2023

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

roddc on Jul 26, 2022

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

iknowhtml on Apr 6, 2022

Closing as #7582 should fix this issue too.

bluwy on Apr 3, 2022