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 :)

[deependrasingh002]

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

[mabedan]

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

Beware of using this workaround. This basically tells vite to ignore “browser” property of the package.json of all your dependencies and will break manage packages such as axios, engine-io/client, and more.

[sapphi-red]

TLDR: for people using moment, set resolve.mainFields: ['browser', 'module', 'jsnext']

Moment only exposes ESM files via the legacy jsnext:main. Because the module field (which was supported by rollup and webpack) was not set for a long time, some packages depending on moment does not expect moment to be ESM (moment/moment@9ce89e7, moment/moment@0c709ba). But later on Vite has been made and included jsnext:main field to resolve.mainFields without knowing that fact. That made those packages depending on moment not to work like the OP in this issue. Given that Vite has been included jsnext:main field by default, it's probably better to avoid removing otherwise it might break other things. So in conclusion, for users using dependencies using moment, please set resolve.mainFields: ['browser', 'module', 'jsnext'] so that the ESM version of moment won't be used.