Electron: Tidak diizinkan memuat sumber daya lokal: file://index.html/ setelah webpacking main.js

Anda mungkin dapat mencoba mematikan webSecurity di webPreferences dari BrowserWindow . Untuk pertanyaan lebih lanjut saya sarankan mencari bantuan dari komunitas .

@MihaiValentin Hei, apakah Anda menemukan solusi untuk ini?

@MihaiValentin @singhshashi Saya memiliki masalah yang sama. Tampaknya webpack, secara default, mencoba "mengejek" global Node seperti __dirname . Saya menonaktifkan perilaku ini dengan opsi node.__dirname dan… berhasil!

Untuk jaga-jaga, saya juga menggunakan webpack-target-electron-renderer untuk opsi target .

Ini adalah konfigurasi saya sejauh ini. Saya harap ini membantu:

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 Terima kasih telah membagikannya, namun itu tidak berhasil. Jika saya mengemas file untuk proses utama menggunakan webpack, bahkan dengan konfigurasi simpul yang Anda katakan, saya masih mendapatkan kesalahan yang sama.

Saya membagikan solusi yang saya gunakan untuk mengatasi masalah ini untuk orang lain yang mendarat di utas ini.

Alih-alih menggunakan fitur es yang membutuhkan babel untuk mengubahnya agar berfungsi dengan benar di main. js file, saya memisahkan ini menjadi file yang berbeda. Di main.js saya, saya tidak menggunakan fitur apa pun yang memerlukan transpilasi babel. Jadi alih-alih mengimpor, saya menggunakan require. Untuk kode yang menggunakan fitur proposal es7 seperti async, saya memindahkan kode itu ke file yang berbeda, di dalam folder bernama desktopServices (Anda bisa membuat nama yang lebih baik). Saya sekarang menjalankan webpack untuk membuat bundel untuk desktopServices dan saya mereferensikan bundel ini di main.js.

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

File webpack.config.main.js saya berisi konfigurasi berikut.

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;

Bukan cara terbersih, tapi saya rasa ini adalah rute yang saya ambil untuk saat ini sampai beberapa fitur es yang ingin saya gunakan dimasukkan ke dalam simpul dan tidak memerlukan transpilasi babel.

Bagi saya, itu ternyata menjadi kesalahan yang menyesatkan. Saya mendapatkan kesalahan not allowed to load local resource karena webpack belum selesai menulis file sebelum saya mencoba memuatnya, bukan karena file tersebut ada di sana dengan izin yang salah.

Saya ~memperbaiki~ membungkusnya dengan setTimeout (lakban javascript) sehingga saya bisa melanjutkan hidup:

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

bagi saya .. alasannya adalah karena jalur webpack mengeluarkan bundel .. berada di luar jangkauan ... saya menyelesaikannya dengan kembali beberapa direktori dan menerapkan konfigurasi simpul seperti yang disarankan di atas .. berfungsi dengan baik : D

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

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

FYI untuk yang di sini melalui google: Anda mendapatkan kesalahan yang sama jika file tidak ada. Saya lupa memberi tahu paket elektron untuk menyalin file target ke dalam aplikasi. Belajar dari kesalahan bodoh saya :)

Untuk referensi di masa mendatang (karena saya terlalu sering menelusuri halaman ini), berikut adalah kemungkinan masalah saat ini:

1. File tidak ada, atau aplikasi Node Anda tidak dapat menjangkaunya. Pastikan electron-packager menyalin file target ke dalam aplikasi!

2. Anda mungkin perlu menonaktifkan webSecurity dalam webPreferences saat Anda membuat BrowserWindow() :

{
  webPreferences: {
    webSecurity: false
  }
}

1. Webpack, secara default, tampaknya mencoba untuk "mengejek" node global seperti node.__dirname , Anda dapat menonaktifkan ini dengan menambahkan yang berikut ke konfigurasi Anda:

  node: {
    __dirname: false
  }

1. Anda dapat menunda eksekusi pemuatan URL menggunakan setTimeout() (tidak disarankan) atau menunggu acara ready dikirim dari aplikasi (lebih baik).

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

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

Bagi saya solusinya adalah

1. menonaktifkan keamanan web.
2. ketika mencoba menggabungkan file, saya melakukan __dirname+"./FileName". Jadi itu membuat 'C:/Folder./FileName'. Jadi seharusnya tidak ada "./" melainkan hanya "/". Ini bukan masalah dalam pengembangan dan tidak sampai saya menambahkan ASAR.
3. Ini mengikuti casing nama file yang ketat. Masalah ini saya temui setelah menambahkan asar, sampai saat itu berfungsi sempurna dalam pengembangan serta produksi.

Semoga ini bisa membantu seseorang nube seperti saya.

Saya memuat http://localhost:8080/ di jendela browser utama saya untuk server dev webpack (sehingga saya bisa memuat ulang modul panas). Masalahnya adalah ketika memuat dengan protokol file:// pada <iframe> itu tidak berhasil.

Saya cukup menonaktifkan keamanan web seperti yang ditunjukkan oleh @popey456963 .

Saya memiliki dua konfigurasi untuk webpack masing-masing untuk electron-main dan electron-renderer

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
];

Saya sudah mencoba melamar

  node: {
    __dirname: false
  },

Saya telah menghibur di renderer.js __dirname saya dan dalam kedua kasus jika saya memiliki __dirname disetel ke false atau true, keduanya mencetak /

Tentu saja jika saya secara manual memasukkan url absolut itu berfungsi, meskipun tidak yakin mengapa __dirname menolak untuk memberikan jalur yang benar.

Pertimbangan

webpackTargetElectronRenderer sama dengan target: electron-main

Saya percaya pada suatu saat electron-main digulung ke dalam webpack membuat webpackTargetElectronRenderer menjadi obsolute

Di sini Anda dapat melihat apa yang dilakukan electron-main
https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70 -L185

Di sini Anda dapat melihat kode yang sama persis.
https://github.com/chentsulin/webpack-target-electron-renderer/blob/master/index.js

Ternyata aku punya

  node: {
    __dirname: false
  },

Dalam konfigurasi penyaji saya alih-alih konfigurasi utama saya. Saya akan menyimpan komentar saya di atas jika ada yang menyukai file konfigurasi saya.

Bagaimana jika saya tidak menggunakan webpack?

@hbgdPro Coba beberapa opsi dari https://github.com/electron/electron/issues/5107#issuecomment -299971806, 1, 2 dan 4 semuanya tidak memerlukan webpack.

@popey456963 Terima kasih. Saya sudah mencoba sebelum saya bertanya. Masalah saya sebenarnya saya harus menentukan folder mana yang perlu saya sertakan dalam proses pembuatan. Ini tidak ada hubungannya dengan webpack.

Saya baru saja menemukan ini sendiri, (hai saya dari tim webpack). Kami memiliki target utama elektron di webpack, dan saya tidak tahu bahwa ejekan __dirname dan __filename merusak contoh mulai cepat default.

Hanya untuk memastikan, tim elektron. Apakah ini akan menjadi rekomendasi resmi untuk menonaktifkan ini? Jika demikian saya akan melanjutkan dan PR default kami untuk target utama elektron yang kami miliki sehingga bawaan ini tidak diejek.

Terima kasih!

@TheLarkInn __dirname dan __filename sangat penting untuk sebagian besar aplikasi elektron karena digunakan untuk menemukan jalur ke file HTML untuk ditampilkan dalam proses perender. Mengejek mereka merusak banyak hal/sepanjang waktu. Tidak mengejek mereka akan memperbaiki banyak masalah orang 👍

Bagi mereka yang tidak menggunakan Webpack, saya menemukan solusi aneh yang saya harap seseorang dengan lebih banyak pengalaman dapat menguraikannya. Saya menggunakan yang berikut ini dan menerima kesalahan yang disebutkan di seluruh utas ini.

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

setelah mengganti kode di atas ke yang berikut, kesalahannya hilang, dan html akan ditampilkan.

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

Sepertinya yang asli memberikan jalur yang tidak tepat ke file html karena suatu alasan, adakah yang tahu mengapa?

@s-lawrence Jalur yang tidak tepat disebabkan oleh:

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

Seharusnya

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

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

Ah oke itu masuk akal. Terima kasih @milewski telah menjelaskan dan memberikan referensi.

Saya biasanya tetap menggunakan concatenating, tetapi sekarang setelah saya mengetahui sintaks yang tepat, saya akan mulai menggunakan lebih banyak literal template, tampilannya jauh lebih bersih.

@milewski , saya tidak melihat perbedaan dalam dua cuplikan Anda. Apakah yang kedua seharusnya berbeda dari yang pertama?

@jakehockey10 Yang kedua memiliki tanda kutip alih-alih tanda kutip tunggal,. Backticks menunjukkan itu adalah literal templat , bukan hanya literal string. Contoh pertama adalah string literal biasa, jadi bagian ${__dirname} tidak pernah diganti dengan nilai __dirname . Terkadang cukup sulit untuk diperhatikan jika editor Anda tidak menyorotnya secara berbeda (sayangnya, penyorot sintaks GFM tidak membedakannya).

Ah mengerti. Saya tidak melihat perbedaan itu ketika melihatnya di GitHub's Markdown, tetapi saya menggunakan Visual Studio Code dan pasti melihat perbedaannya di sana seperti yang Anda sebutkan. Maaf untuk alarm palsu ;-)

Hanya berpikir saya akan menambahkan, saya juga mendapatkan kesalahan ini karena kesalahan saya sendiri (sensitivitas topi)
Saya menelepon pathname: path.join(__dirname, 'Views/settingsWindow.html') ketika nama file semuanya huruf kecil.

Ini hanya menyebabkan kesalahan setelah webpacked.

Saya mencoba beberapa solusi tetapi tidak berhasil (menggunakan [email protected] dengan [email protected]).
Saya menemukan solusi terbaik dalam posting dengan hanya 3 suara di SO: Ternyata tidak perlu paket ini!
https://stackoverflow.com/questions/45041364/angular-electron-webpack-live-reloading

Solusi tanpa kerumitan konfigurasi:
-npm hapus instalan ulang elektron
-Jalankan ng servis di satu terminal
-di main.js ubah win.loadURL( http://localhost:4200/index.html );
-lalu jalankan npm jalankan elektron di terminal lain

Itu hanya BEKERJA

Saya mencoba memperbaikinya sepanjang hari & akhirnya solusi orang ini berhasil, periksa
https://github.com/electron-userland/electron-builder/issues/2955#issuecomment -393524832

Saat Anda menentukan atribut "build" di package.json, cukup tambahkan file yang diperlukan sebagai berikut:

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

Kemudian pembuat elektron akan mengemasnya dengan benar.

Ternyata hanya awalan 'file://' yang saya butuhkan untuk metode loadUrl.
Telah:
win.loadUrl(path.join(__dirname, "./index.html"))
Diganti dengan:
win.loadUrl(path.join("file://",__dirname, "./index.html"))

Webpack membingungkan saya dengan mencampur garis miring ke depan dan ke belakang di URL ke entri html, jadi saya menggunakan url dan path node untuk membuatnya berfungsi:

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

ini bencana, saya terjebak di CRA + elektron 😂, berjalan dalam mode dev tidak apa-apa, tetapi dikemas ke dalam windows exe tidak berfungsi sama sekali.

Saya mendapatkannya. Jika Anda menggunakan CRA dengan react-router, Anda harus menggunakan HashRouter, bukan BrowerRouter. SELESAI!!! 😂 lihat https://github.com/electron-userland/electron-builder/issues/2167