Error when incorporating web-vitals into a Electron x React application: chunk runtime-main [entry] Cannot convert undefined or null to object

[mohammadhunan-dev]

Hi, I'm building an application that uses create-react-app with Electron. Version 4.x of Create React App includes web-vitals (whereas earlier versions of create-react-app, such as 3.4.x, did not include web-vitals). Since web-vitals has been added I cannot build my application, unless I manually remove 'web-vitals' since I get the following error when trying to bundle the application with webpack: chunk runtime-main [entry] Cannot convert undefined or null to object

Steps to reproduce:

Step 1: Create your app

npx create-react-app myapp 
cd myapp

Step 2: Install Dependencies:

npm i @craco/craco
npm install electron webpack-node-externals --save-dev

Step 3: Create a build script

echo 'const nodeExternals = require("webpack-node-externals");
 
module.exports = {
webpack: {
configure: {
target: "electron-renderer",
externals: [
nodeExternals({
allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
}),
],
},
},
};' > craco.config.js

Step 4: Load your build/index.html into an Electron Window

echo 'const electron = require("electron");
const path = require("path");

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  });
  mainWindow.loadFile(path.join(__dirname, "../build/index.html"));
}
app.on("ready", createWindow);'> public/electron.js

Step 5: Update your package.json:

  "main": "public/electron.js",
  "homepage": "./",
    "scripts": {
    "build": "craco build",
    "start": "electron ."
  },

Upon running 'npm run build', you get the error "chunk runtime-main [entry] Cannot convert undefined or null to object"

However, if you npm uninstall 'web-vitals' from the project, the error goes away.

[philipwalton]

Hmmm, I tried following these steps and did not get any build errors. This is what I see:

myapp git:(main) ✗ npm run build

> [email protected] build /Users/philipwalton/Projects/philipwalton/electron/myapp
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.33 KB      build/static/js/2.7d671bad.chunk.js
  1.56 KB       build/static/js/3.6eec110b.chunk.js
  1.16 KB       build/static/js/runtime-main.2bdb99f6.js
  595 B (+7 B)  build/static/js/main.53b51097.chunk.js
  574 B         build/static/css/main.9d5b29c0.chunk.css

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

Can you check to see if a step is missing from your build instructions?

[mohammadhunan-dev]

Hi, @philipwalton, No, I don't believe I'm missing a step, did you replace the default build script with 'craco build'? Update: It looks like your 'npm run build' is still running 'react-scripts build' rather than 'craco build'.

Here's a sample application showing this error: https://github.com/mongomoe/Sample-React-Electron-Web-Vitals-App

You can clone it, cd into it, npm install, and then run 'npm run build' to see the error.

[mohammadhunan-dev]

I've updated the issue description to make the steps a bit more clear.

[philipwalton]

Hmmm, ok thanks, I can reproduce the error now. But unfortunately the craco build process swallows the stack trace, so I can't see what it's trying to convert to an object.

I'm not familiar with create-react-app or craco, but if you're able to debug and at least get a stack trace, then I can see if there's a workaround I can add so the library works in this environment.

My (possibly wrong) guess as to what's going on is that the Electron runtime doesn't support some API that the library is assuming is available (since it's built to run in the browser).