Electron: main.jsをWebパッキングした後、ローカルリソースをロードすることはできません：file：//index.html/

BrowserWindowのwebPreferencesでwebSecurityをオフにしてみてください。 その他の質問については、コミュニティに助けを求めることをお勧めします。

@MihaiValentinねえ、あなたはこれに対する解決策を見つけましたか？

@MihaiValentin@ singhshashi私も同じ問題を抱えていました。 webpackは、デフォルトで、 __dirnameのようなノードグローバルを「モック」しようとしているようです。 node.__dirnameオプションを使用してこの動作を無効にしたところ、機能しました。

念のため、 targetオプションにもwebpack-target-electron-rendererを使用しています。

これはこれまでの私の設定です。 お役に立てば幸いです。

var webpack = require('webpack');
var path = require('path');
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'index.js'
  },
  node: {
    __dirname: false,
    __filename: false
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        exclude: /node_modules/,
        loader : 'babel'
      }
    ]
  }
};

config.target = webpackTargetElectronRenderer(config);

module.exports = config;

@eiriarteそれを共有してくれてありがとう、しかしそれはうまくいきませんでした。 あなたが言ったノード構成でも、webpackを使用してメインプロセスのファイルをパックすると、同じエラーが発生します。

このスレッドにたどり着く他の人のために問題を回避するために使用している回避策を共有しています。

メインで正しく動作するためにそれらをトランスパイルするためにbabelを必要とするes機能を使用する代わりに。 jsファイル、私はこれらを異なるファイルに分けました。 私のmain.jsでは、babelトランスパイルを必要とする機能を使用していません。 したがって、インポートの代わりにrequireを使用します。 非同期などのes7プロポーザル機能を使用していたコードの場合、そのコードをdesktopServicesというフォルダー内の別のファイルに移動しました（より適切な名前を思い付くことができます）。 ここで、webpackを実行してdesktopServicesのバンドルを作成し、main.jsでこのバンドルを参照します。

const myshell = require('./dist/desktopServices').myShell ;

私のwebpack.config.main.jsファイルには、次の構成が含まれています。

let config = {
  target:'electron',
  entry:'./desktopServices/desktopServices.js',
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename: 'desktopServices.js',
    publicPath:'/dist/',
    libraryTarget:'commonjs2'
  },
  resolve: {
    extensions:["",".js",".json"]
  },
  module: {
    noParse: /node_modules\/json-schema\/lib\/validate\.js/,
    loaders:[{
      test: /\.js?$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
      {
        test: /\.json/,
        loader: 'json-loader',
      },
    ],
  },
}

module.exports = config;

最もクリーンな方法ではありませんが、これは、使用したいes機能の一部がノードに組み込まれ、Babelトランスパイルを必要としないまで、当面は取っているルートだと思います。

私にとって、それは誤解を招くエラーであることがわかりました。 not allowed to load local resourceエラーが発生したのは、ファイルを読み込もうとする前にwebpackがファイルの書き込みを完了していなかったためであり、間違った権限でファイルが存在したためではありません。

私はそれをsetTimeout （javascriptのダクトテープ）で〜修正〜ラップして、人生をやり遂げることができました：

setTimeout(() => {
  win.loadURL(`file:///${__dirname}/index.html`);
}, 2000); // 1 second wasn't enough lol

私にとって..理由は、webpackがバンドルを出力していたパスが届かなかったためです...いくつかのディレクトリに戻って、上記のようにノード構成を適用することで解決しました..完全に機能します：D

pathname: path.join(__dirname, '../../source/resources/views', 'index.html');

node: {
    __dirname: false,
    __filename: false
  },

参考までに、グーグル経由でここにいる人たちへ：ファイルが存在しない場合も同じエラーが発生します。 電子パッケージャーにターゲットファイルをアプリにコピーするように指示するのを忘れました。 私の愚かな過ちから学ぶ:)

今後の参考のために（このページを何度も検索したため）、現在考えられる問題は次のとおりです。

1. ファイルが存在しないか、ノードアプリケーションがファイルに到達できません。 electron-packagerがターゲットファイルをアプリにコピーしていることを確認してください。

2. BrowserWindow()を作成するときに、 webPreferences webSecurityを無効にする必要がある場合があります。

{
  webPreferences: {
    webSecurity: false
  }
}

1. Webpackは、デフォルトで、 node.__dirnameのようなノードグローバルを「モック」しようとしているようです。これを無効にするには、構成に次を追加します。

  node: {
    __dirname: false
  }

1. setTimeout()を使用してURLの読み込みの実行を遅らせるか（非推奨）、アプリからreadyイベントが送信されるのを待つ（より良い）ことができます。

setTimeout(() => {
  win.loadURL(`file:///${__dirname}/index.html`);
}, 2000); // 1 second wasn't enough lol

app.on('ready', () => {
  win.loadURL(`file:///${__dirname}/index.html`);
})

私にとっての解決策は

1. Webセキュリティを無効にします。
2. ファイルを連結しようとしたとき、私は__dirname+"。/FileName"を実行していました。 つまり、「C：/Folder./FileName」を作成していました。 したがって、「./」ではなく「/」だけである必要があります。 これは開発中の問題ではなく、ASARを追加するまでは問題ではありませんでした。
3. これは、ファイル名の厳密な大文字小文字の区別に従います。 asarを追加した後に発生したこの問題は、それまでは開発だけでなく本番環境でも完璧に機能していました。

これが私のような誰かのnubeに役立つことを願っています。

webpack devサーバーのメインブラウザウィンドウにhttp://localhost:8080/をロードしています（ホットモジュールをリロードできるように）。 問題は、 <iframe>でfile://プロトコルを使用してロードすると、機能しなかったことです。

@ popey456963が指摘しているように、単にWebセキュリティを無効にしました。

electron-mainとelectron-rendererのそれぞれに2つのwebpackの構成があります

const path = require('path');
const config_main = {
  target: 'electron-main',
  entry: path.resolve(__dirname, 'src/main/index.js'),
  output: {
    path    : path.resolve(__dirname, 'static'),
    filename: 'main.js'
  },
  externals: [{ 'electron-store': 'require("electron-store")' }],
  resolve: {
    alias: {
      main   : path.resolve(__dirname, 'src/main/'),
      common : path.resolve(__dirname, 'src/common/')
    }
  }
};

const config_renderer = {
  target: 'electron-renderer',
  entry: path.resolve(__dirname, 'src/renderer/index.js'),
  output: {
    path    : path.resolve(__dirname, 'static'),
    filename: 'renderer.js'
  },
  externals: [{ 'electron-store': 'require("electron-store")' }],
  resolve: {
    alias: {
      components : path.resolve(__dirname, 'src/renderer/components/'),
      core       : path.resolve(__dirname, 'src/renderer/core/'),
      states     : path.resolve(__dirname, 'src/renderer/states/'),
      ui         : path.resolve(__dirname, 'src/renderer/ui/'),
      common     : path.resolve(__dirname, 'src/common/'),
    }
  }
};

module.exports = [
  config_main,
  config_renderer
];

応募してみました

  node: {
    __dirname: false
  },

renderer.jsで__dirnameをコンソール出力しましたが、どちらの場合も__dirnameをfalseまたはtrueに設定すると、両方とも/出力します。

もちろん、絶対URLを手動で入力すると機能しますが、 __dirnameが正しいパスの指定を拒否する理由はわかりません。

考慮事項

webpackTargetElectronRendererはターゲットと同じものです： electron-main

ある時点でelectron-mainがwebpackに組み込まれ、 webpackTargetElectronRendererが絶対的なものになったと思います

ここでは、 electron-main機能を確認できます
https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70 -L185

ここでは、まったく同じコードを見ることができます。
https://github.com/chentsulin/webpack-target-electron-renderer/blob/master/index.js

私が持っていたことが判明

  node: {
    __dirname: false
  },

メインの設定ではなく、レンダラーの設定で。 誰かが私の設定ファイルを気に入った場合に備えて、上記のコメントを保持します。

webpackを使用していない場合はどうなりますか？

@hbgdPro https://github.com/electron/electron/issues/5107#issuecomment -299971806のオプションのいくつかを試してください。1、2、4はすべてwebpackを必要としません。

@popey456963ありがとう。 私は尋ねる前にすでに試していました。 私の問題は、実際には、ビルドプロセスに含める必要のあるフォルダーを指定する必要があることでした。 それはwebpackとは何の関係もありません。

私はちょうどこれに出くわしました（こんにちは私はwebpackチームから来ました）。 webpackにはelectron-mainターゲットがあり、 __dirnameと__filenameのモックがデフォルトのクイックスタートの例を破っていることを知りませんでした。

念のため、電子チーム。 これは、これを無効にすることを公式に推奨しますか？ もしそうなら、私は先に進んで、これらのビルトインがモックされないように、私たちが持っている電子メインターゲットのデフォルトをPRします。

ありがとう！

@TheLarkInn __dirnameと__filenameは、レンダラープロセスで表示するHTMLファイルへのパスを見つけるために使用されるため、ほとんどの電子アプリにとって非常に重要です。 それらをあざけると、ほとんど/常に物事が壊れます。 それらをモックしないと、多くの人々の問題が解決します👍

Webpackを使用していない人のために、私はもっと経験のある人が詳しく説明してくれることを望んでいる奇妙な解決策に出くわしました。 私は以下を使用していて、このスレッド全体で言及されているエラーを受け取りました。

win.loadURL('file://${__dirname}/renderer/main.html')

上記のコードを次のコードに切り替えた後、エラーはなくなり、htmlがレンダリングされます。

win.loadURL('file://' + __dirname + '/renderer/main.html')

オリジナルが何らかの理由でhtmlファイルへの不適切なパスを与えていたようですが、誰かがその理由を知っていますか？

@s-lawrence不適切なパスは次の理由によるものです。

win.loadURL('file://${__dirname}/renderer/main.html')

する必要があります

win.loadURL(`file://${__dirname}/renderer/main.html`)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

ああ、それは理にかなっています。 これについて詳しく説明し、リファレンスを提供してくれた@milewskiに感謝します。

私は通常、連結に固執しますが、適切な構文がわかったので、テンプレートリテラルをさらに使用し始めるので、見た目はずっときれいになります。

@milewski 、2つのスニペットに違いはありません。 2番目のものは最初のものとは異なるはずですか？

@jakehockey102番目のものには一重引用符の代わりにバッククォートがあります。 バッククォートは、それが単なる文字列リテラルではなく、テンプレートリテラルであることを示しています。 最初の例は通常の文字列リテラルであるため、 ${__dirname}の部分が__dirnameの値に置き換えられることはありません。 エディターがそれらを異なって強調表示しない場合、時々気付くのはかなり難しいです（残念ながら、GFM構文強調表示はそれらを区別しません）。

ああ、やった。 GitHubのMarkdownで表示したときにその違いに気づきませんでしたが、私はVisual Studio Codeを使用しており、おっしゃるように違いに間違いなく気づいています。 誤警報でごめんなさい;-)

追加しようと思ったのですが、私自身の失敗（多動性障害）が原因でこのエラーも発生しました
ファイル名がすべて小文字のときにpathname: path.join(__dirname, 'Views/settingsWindow.html')を呼び出していました。

これは、Webパックされた後にのみエラーを引き起こしました。

私はいくつかの解決策を試しましたが、それを機能させることができませんでした（[email protected]と[email protected]を使用）。
SOに3票しか投票していない投稿で、最良の解決策を見つけました。このパッケージは必要ないことがわかりました。
https://stackoverflow.com/questions/45041364/angular-electron-webpack-live-reloading

ゼロ構成-面倒なソリューション：
-npmアンインストールelectron-reload
-1つのターミナルでサーブを実行する
-main.jsでwin.loadURL（ http://localhost:4200/index.html ）;を変更します。
-次に、別の端末でnpmrunelectronを実行します

それはうまくいく

私はこれを一日中修正しようとしました、そして最後にこの人の解決策はチェックしました
https://github.com/electron-userland/electron-builder/issues/2955#issuecomment -393524832

package.jsonで「build」属性を定義するときは、次のように必要なファイルを追加するだけです。

    "files": [
      "./build/**/*",
      "./index.html",
      "./src/*.js"
    ],

その後、電子ビルダーはそれを正しくパックします。

loadUrlメソッドに必要なのは「file：//」プレフィックスだけであることが判明しました。
持っていました：
win.loadUrl(path.join(__dirname, "./index.html"))
交換された：
win.loadUrl(path.join("file://",__dirname, "./index.html"))

Webpackは、htmlエントリへのURLでスラッシュとバックスラッシュの両方を混在させるのを妨げているので、ノードのurlとpathを使用して機能させます。

const winURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:9080'
  : url.format({
    protocol: 'file',
    pathname: path.join(__dirname, 'index.html'),
  });

それは災害です、私はCRA +電子で立ち往生しています😂、開発モードで実行することは問題ありませんが、Windowsexeにパッケージ化されてもまったく機能しません。

わかった。 🤣react-routerでCRAを使用する場合は、BrowerRouterではなくHashRouterを使用する必要があります。 終わり！！！ 😂https： //github.com/electron-userland/electron-builder/issues/2167を参照してください