yarn dev result has error Cannot find module 'source-map-support/source-map-support.js'

[TheCulprit]

Clone repo. Run yarn. Run yarn dev.

Built app launches with an error already displayed in the open devtools console.

Uncaught Error: Cannot find module 'source-map-support/source-map-support.js'
    at Module._resolveFilename (module.js:485)
    at Function.Module._resolveFilename (C:\Dev\Web\electron-webpack-quick-start\node_modules\electron\dist\resources\electron.asar\common\r…:35)
    at Function.Module._load (module.js:437)
    at Module.require (module.js:513)
    at require (internal/module.js:11)
    at (index):8

Win10 64bit npm 5.8.0 node 8.11.1 yarn 1.5.1

[vivopcz]

i have the same probem ,

module.js:485 Uncaught Error: Cannot find module 'source-map-support/source-map-support.js'
    at Module._resolveFilename (module.js:485)
    at Function.Module._resolveFilename (D:\electron\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35)
    at Function.Module._load (module.js:437)
    at Module.require (module.js:513)
    at require (internal/module.js:11)
    at (index):8
Module._resolveFilename @ module.js:485
Module._resolveFilename @ D:\electron\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35
Module._load @ module.js:437
Module.require @ module.js:513
require @ internal/module.js:11
(anonymous) @ (index):8
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
module.js:485 Uncaught Error: Cannot find module 'react'
    at Module._resolveFilename (module.js:485)
    at Function.Module._resolveFilename (D:\electron\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35)
    at Function.Module._load (module.js:437)
    at Module.require (module.js:513)
    at require (internal/module.js:11)
    at eval (external "react"?588e:1)
    at Object.react (renderer.js:1255)
    at __webpack_require__ (renderer.js:711)
    at fn (renderer.js:96)
    at eval (index.tsx:2)
Module._resolveFilename @ module.js:485
Module._resolveFilename @ D:\electron\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35
Module._load @ module.js:437
Module.require @ module.js:513
require @ internal/module.js:11
(anonymous) @ external "react"?588e:1
react @ renderer.js:1255
__webpack_require__ @ renderer.js:711
fn @ renderer.js:96
(anonymous) @ index.tsx:2
./src/renderer/index.tsx @ renderer.js:1196
__webpack_require__ @ renderer.js:711
fn @ renderer.js:96
0 @ renderer.js:1210
__webpack_require__ @ renderer.js:711
(anonymous) @ renderer.js:763
(anonymous) @ renderer.js:766
client?3523:77 [WDS] Hot Module Replacement enabled.

[vivopcz]

can't import react ,this is my index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as fs from 'fs';

console.log('dddcc11c');
fs.writeFile('aa.txt', 'fadsf', (err: Error) => {
  if (err) {
    console.log('ddd');
  }
});

class App extends React.Component {
  render() {
    return (
      <div >
        <header>
          <h1 >Welcome to React</h1>
        </header>
        <p >
          To get started, edit <code>src/App.tsx</code> and save to reload.
          </p>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app') as HTMLElement
);

[45deg]

I have the same problem (win 10, node v9.11.1, yarn 1.6.0) and found a path in module.paths is wrong (inappropriate escaping) but I'm afraid I have no idea how to fix this issue... (might have to consult electron's internal)

[DmytroLapshyn]

Looks like at least on Windows the problem could be potentially related to how the path to modules is (mal)formed. If we look at the bottom of the call stack:

at (index):8

we will see something like:

require("module").globalPaths.push("C:\Users\user.name\path\to\project\node_modules")

with backslashes unescaped.

@45deg You got it perfectly right with screenshots! Kudos to you!

[DmytroLapshyn]

Further investigation: Looks like it's something related to how the index HTML is being served by webpack-dev-server. If we look at dist/renderer-index-template.html, we can see that the path has correctly escaped backslashes.

Confirmed by running curl -G http://localhost:9080/

[DmytroLapshyn]

So far successfully patched by changing line 285 in RendererTarget.js to

${nodeModulePath == null ? "" :require("module").globalPaths.push("${nodeModulePath.replace(/\/g, "/")}")}

(that is, replacing backslashes with forward slashes instead of escaping them)

[ArchiMoebius]

mmm, that patch didn't resolve the issue for me, fwr.

[anhang]

Followed @DmytroLapshyn 's tip and updated

node_modules\electron-webpack\out\targets\RendererTarget.js:285 to

${nodeModulePath == null ? "" : `require("module").globalPaths.push("${nodeModulePath.replace(/\\/g, "/")}")`}

Worked for me.

[rodrigopavezi]

It is not working for me when running yarn dist on Mac

See below:

It looks like the source-map-support module is not included on the electron asar.

One thing to not is that I need to keep the nodeIntegration: false

Anyone knows what can be done?

Cheers

[jsharland]

Is there a way to fix this that doesn't involve manually changing the RendererTarget.js file in my locally installed electron-webpack node module?

[twigs67]

Is there an update on this? Right now, I'm just adding all of these missing modules to extraResources config, which seems to be working, but I haven't reached the last of them yet. So far:

"extraResources": [
    "./node_modules/source-map-support",
    "./node_modules/source-map",
    "./node_modules/buffer-from",
    "./node_modules/electron-updater"
],

[daimenworrall]

Is there an update on this issue? I'm having the same problems.

[daimenworrall]

Figured this out after playing around with it for a while...

Had "source-map-support" under devDependencies. Should have been under dependencies.