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.

[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.

[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 #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

[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

[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.

[FilippoNardin]

I had some luck when importing moment.js directly as an ESM module by overriding the module resolution to the source file in node_modules.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        // Allow moment.js to be used as an ESM module
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./node_modules/moment/moment.js"),
      },
    ],
  },
});

[igorleszczynski]

Still problem after npm run build

npm run dev working correctly