TypeError: can't convert undefined to object - connectMenu.js:81. Only in production env

[meetajhu]

Version

v2.11.0

Test Case

import React from "react";
import ReactDOM from "react-dom";
import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";

function handleClick(e, data) {
  console.log(data.foo);
}

function MyApp() {
  return (
    <div>

      <ContextMenuTrigger id="some_unique_identifier">
        <div className="well">Right click to see the menu</div>
      </ContextMenuTrigger>

      <ContextMenu id="some_unique_identifier">
        <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>
          ContextMenu Item 1
        </MenuItem>
        <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>
          ContextMenu Item 2
        </MenuItem>
        <MenuItem divider />
        <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>
          ContextMenu Item 3
        </MenuItem>
      </ContextMenu>

    </div>
  );
}

ReactDOM.render(<MyApp myProp={12}/>, document.getElementById("main"));

Steps to reproduce

Take Webpack build with NODENV=Production and run the react app. Browser console shows error in connectMenu.js:81 TypeError: can't convert undefined to object . Development environment works fine.

Expected Behavior

Not sure if Babel related error. But app should run in Production build.

Actual Behavior

Everything is fine on development environment. However, when I compile my packs to production-ready environment (NODE_ENV=production), react-contextmenu gives an error on startup in file connectMenu.js:81

[meetajhu]

Fixed issue by excluding node_modules From Being Transpiled By Babel-Loader. If your using Webpacker for Rails add this line
environment.loaders.delete('nodeModules')
to
config/webpack/environment.js
which should look like

/* config/webpack/environment.js */

const { environment } = require('@rails/webpacker')
environment.loaders.delete('nodeModules')
module.exports = environment

[eyelly-wu]

@meetajhu How to solve the problem without using Webpacker for Rails

[meetajhu]

@meetajhu How to solve the problem without using Webpacker for Rails

in your webpack.config.js add "exclude: /(node_modules)/" under your babel-loader settings

//webpack.config.js

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'
      }
   ]
}

[eyelly-wu]

@meetajhu I found some other solutions

1. change the react-contextmenu's package.json
from

to

2. delete "module": "es6/index.js" of the react-contextmenu's package.json

3. change wepack.config.js like this

resolve: {
  mainFields: ['main', 'module']
}

[barbalex]

These "solutions" are not easy to implement in every situation. I tried both and they did not work for me. I had to revert to copying the react-contextmenu.js-file created in the dist folder after building into my project. Very hacky.

And my case will not be rare: It seems that this problem occurs when this lib is used in gatsby (my case). Which is quite popular.

So I feel that this issue should be re-opened.

[barbalex]

@eyelly-wu I have to admit I do not completely understand your solution. Do you think this could be converted into a pull request? Hoping it would be accepted?

[jazeved0]

Why is this issue closed? The same bug still appears for me in Gatsby

[stevenkkim]

This bug is also appearing for me in Gatsby.

UPDATE: It turns out react-contextmenu was breaking my gatsby build causing the error Uncaught (in promise) Error: page resources for /app/ not found. Not rendering React

In my case, /app/ is a client-only route that contains a client-side react app. I had no problems when I run gatsby develop, but I get the error when running gatsby serve.

My temporary solution for now is to use the compiled version of react-contextmenu in /node_modules/react-contextmenu/dist/react-context-menu.js

So instead of import { ContextMenu } from 'react-contextmenu'; I do import { ContextMenu } from 'react-contextmenu/dist/react-contextmenu';.

Thanks to @barbalex for your comments above and also in the gatsby issues, they helped me find the solution.

I do think that this bug should be reopened and addressed – I suspect that a number of people out there are using gatsby with react-contextmenu and will run into this problem.