realm tutorial with electron + react does not work with any state component

[Yimaha]

How frequently does the bug occur?

All the time

Description

We tried to follow through this tutorial with all the correct version and stuff > https://docs.mongodb.com/realm/sdk/node/integrations/electroncra/

What we realized is that, it works, yes, that nice, but if we introduce any sort of state management, for example, modify the App.js as follow:

import logo from './logo.svg';
import './App.css';
import React, { useState } from 'react';
import Example from "./Example";
function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

the application will no longer compile, and it gives this error:

Uncaught Error: Must use import to load ES Module: /mnt/502476F92476E180/test2/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js require() of ES modules is not supported. require() of /mnt/502476F92476E180/test2/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js from /mnt/502476F92476E180/test2/build/index.html is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename arrayWithHoles.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /mnt/502476F92476E180/test2/node_modules/@babel/runtime/helpers/esm/package.json.

at __node_internal_captureLargerStackTrace (node:internal/errors:463)
at new NodeError (node:internal/errors:370)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1128)
at Module.load (node:internal/modules/cjs/loader:982)
at Module._load (node:internal/modules/cjs/loader:823)
at Function.c._load (node:electron/js2c/asar_bundle:5)
at Function.o._load (node:electron/js2c/renderer_init:29)
at Module.require (node:internal/modules/cjs/loader:1006)
at require (node:internal/modules/cjs/helpers:93)
at Object.<anonymous> (arrayWithHoles":1)
at l (index.html:1)
at Module.<anonymous> (main.267b8975.chunk.js:1)
at l (index.html:1)
at r (index.html:1)
at Array.t [as push] (index.html:1)
at main.267b8975.chunk.js:1

which is weird, I cannot find any documentation about this online, did someone encountered this before?

my package.json is also attached here:
{
  "main": "public/electron.js",
  "homepage": "./",
  "name": "my_electron_react_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "realm": "^10.9.0"
  },
  "scripts": {
    "build": "craco build",
    "start": "electron .",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^13.2.1",
    "webpack-node-externals": "^3.0.0"
  }
}

Stacktrace & log output

No response

Can you reproduce the bug?

Yes, always

Reproduction Steps

Just follow through the tutorial and add a state

on Ubuntu 20.04, node.js version 10.19.0, npm version 6.14.15

Version

13.2.1

What SDK flavour are you using?

Local Database only

Are you using encryption?

No, not using encryption

Platform OS and version(s)

Ubuntu 20.04

Build environment

Which debugger for React Native: ..

[takameyer]

Thanks for reporting. We have not encountered this yet and will need to investigate further.

[Yimaha]

So, our team (in particular one of the team member whose name start with F) figured out that it was the issue with craco config.

We also found a similar post on stack-overflow that seems to be caused by a similar issue,

https://stackoverflow.com/questions/68660633/realm-is-compatible-with-electron-react-error-when-integrating

we answered how we fixed it there

[kneth]

@Yimaha Thank you for the update. We close the issue as we believe your stack overflow post is the best answer.