Parcel: Getting "Cannot find module" error in Electron render process on all installed node modules

[rkpatel33]

🐛 bug report

I am trying to set up Parcel in my Electron + React project. I have Parcel set up so that I get all the way to the render process loading, at which point I get Uncaught Error: Cannot find module 'react' error for anyimportstatement (ex:import _ from 'lodash';in the render process.jsfile). I am running Parcel using a script that uses the Parcel API to targetelectron` and run a development server.

If I comment out the render process imports and just put in some console.log statements, everything runs fine. I set up a toy project just to test the setup and it works perfectly, so I can't figure out for the life of my why this is happening.

🎛 Configuration (.babelrc, package.json, cli command)

// babelrc
{
    "presets": [
        "react",
        ["env", {
            "targets": {
                "browsers": ["Electron >= 1.7.8"]
            }
        }]
    ],
    "plugins": [
        "transform-decorators-legacy"
    ],
    "sourceMaps": "inline",
    "retainLines": true
}

// parcel-bundle.js file to use API
const Bundler = require('parcel-bundler');
const Path = require('path');
const app = require('express')();

// Entrypoint file location

const file = Path.join(__dirname, './app2/templates/app.html');

// Bundler options
const options = {
  outDir: './bundle', // The out directory to put the build files in, defaults to dist
  outFile: 'app.html', // The name of the outputFile
  // publicUrl: './', // The url to server on, defaults to dist
  watch: true, // whether to watch the files and rebuild them on change, defaults to process.env.NODE_ENV !== 'production'
  cache: true, // Enabled or disables caching, defaults to true
  cacheDir: '.cache', // The directory cache gets put in, defaults to .cache
  contentHash: false, // Disable content hash from being included on the filename
  minify: false, // Minify files, enabled if process.env.NODE_ENV === 'production'
  scopeHoist: false, // turn on experimental scope hoisting/tree shaking flag, for smaller production bundles
  target: 'electron', // browser/node/electron, defaults to browser
  https: false, // Serve files over https or http, defaults to false
  logLevel: 3, // 3 = log everything, 2 = log warnings & errors, 1 = log errors
  hmrPort: 0, // The port the HMR socket runs on, defaults to a random free port (0 in node.js resolves to a random free port)
  sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (not supported in minified builds yet)
  hmrHostname: '', // A hostname for hot module reload, default to ''
  detailedReport: false // Prints a detailed report of the bundles, assets, filesizes and times, defaults to false, reports are only printed if watch is disabled
};

async function runBundle() {
  // Initializes a bundler using the entrypoint location and options provided
  const bundler = new Bundler(file, options);

  // Let express use the bundler middleware, this will let Parcel handle every request over your express server
  app.use(bundler.middleware());

  let portNumber = 1234;
  app.listen(portNumber);
  console.log(`Serving bundle on http://localhost:${ portNumber }/`);

  // Run the bundler, this returns the main bundle
  // Use the events if you're using watch mode as this promise will only trigger once and not for every rebuild
  const bundle = await bundler.bundle();
}

runBundle();

Command to run project is yarn dev-app:

// part of the package.json file
// 
  "scripts": {
    "parcel:serve": "node parcel-bundler.js",
    "electron:app": "NODE_ENV=development ELECTRON_START_URL=http://localhost:1234 electron --debug app2/init-app.js",
    "dev-app": "run-p -lr parcel:serve electron:app",
    "dev-prod": "BACKEND=production run-p -lr parcel:serve electron:misson-control",
}

🤔 Expected Behavior

Render process would load modules installed in project root node_modules directory.

😯 Current Behavior

Failes with error in image above.

🔦 Context

The project is Electron + React, very parallel to this (however this toy project runs fine). For development I run a development server and source the render process JS from there.

https://github.com/rkpatel33/parcel-react-electron-example

💻 Code Sample

Unfortunately this is a private company repo, but my render process looks like this:

// NOTE: If I comment these imports out (and the code that uses them, I see my console log statement print in the render process window console.
import React from 'react';
import ReactDOM from 'react-dom';
import { remote } from 'electron';
// Styles
import 'lato-font/css/lato-font.min.css';
import 'font-awesome/css/font-awesome.min.css';

console.log('%c >>>>>>>>>>>>>>>> GETTING HERE', 'background: #FFFF00');

// This works, and I see the styling in some hard coded `<h1>` tags.
import '../styles/app.scss';

// Componenets
import App from '../components/App.jsx';

let AppComponent = (
  <App />
);

ReactDOM.render(
  AppComponent,
  document.getElementById('react-root-app')
);

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 10.6.0
| npm/Yarn | 1.7.0
| Operating System | Mac High Sierra 10.13.6

[rkpatel33]

I just noticed I can recreate the issue in the toy app by changing this package.json line from this:

"electron:start:with-url": "ELECTRON_START_URL=http://localhost:1234 electron .",

to sourcing the main process file directly like this, which has been working fine in my project before incorporating Parcel:

"electron:start:with-url": "ELECTRON_START_URL=http://localhost:1234 electron main.js",

The run the project with yarn start:bundle:html:electron. You will see the error in the Electron window console.

[michaelchiche]

it looks like you are having a similar issue I had: https://github.com/parcel-bundler/parcel/issues/1738.

[rkpatel33]

@michaelchiche Thanks!

[Nyamador]

.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.