React-pdf: Tidak berfungsi menggunakan browserify, tetapi saya tidak tahu apakah itu masih penyebabnya

Dibuat pada 18 Jul 2017  ·  5Komentar  ·  Sumber: wojtekmaj/react-pdf

Saya mencoba 1.8.3 dengan Browserify, dan saya masih memiliki masalah dalam menjalankan aplikasi saya. Alih-alih mencoba membuat sampel yang disediakan seperti yang saya lakukan saat membahas nnarhinen/react-pdf#39, kali ini saya mencoba menulis aplikasi minimal dari awal. Soal ini terlihat berbeda dari sebelumnya.

git clone https://bitbucket.org/lorenzostanco/reactpdf-browserify-test
cd reactpdf-browserify-test/
npm install
npm run build
npm run serve

Pemuatan PDF gagal, dan di konsol saya melihat:

GET http://127.0.0.1:8080/build.worker.js 404 (Not Found)
Warning: Setting up fake worker.
GET http://127.0.0.1:8080/build.worker.js 404 (Not Found)
bug

Semua 5 komentar

Hai,
sepertinya saya tidak memiliki akses ke repositori ini.
Dilihat dari kesalahannya, inilah yang saya tahu:
Di Webpack, kami menggunakan pekerja-loader yang meneruskannya ke pdf.js secara otomatis.
Di Browserify, Anda harus menyalin loader ke tempat tertentu sendiri. Ini karena ketika pdf.js tidak mendapatkannya di params, ia akan mencoba mendapatkannya dari URL default.
React-PDF akan berfungsi dengan baik tanpa file ini. Tapi ya, sangat disarankan agar Anda memasangnya karena alasan kinerja.

Pertimbangkan untuk membuat sesuatu seperti ini menggunakan tegukan seperti yang mereka lakukan dalam contoh resmi mereka?
https://github.com/mozilla/pdf.js/blob/master/examples/browserify/gulpfile.js

Maaf, saya memberi Anda URL repo menggunakan SSH, yang membutuhkan kunci SSH saya. Menggunakan:

git clone https://bitbucket.org/lorenzostanco/reactpdf-browserify-test/src

Di Browserify, Anda harus menyalin loader ke tempat tertentu sendiri

Ya, setelah menyalin pdfjs-dist/build/pdf.worker.min.js ke jalur yang ditunjukkan pada kesalahan 404, berhasil! Terima kasih. Saya tidak mencoba tugas tegukan, tetapi dari pandangan sekilas jelas cara kerjanya.

React-PDF akan berfungsi dengan baik tanpa file ini

Itu tidak. Kesalahan tersebut ditampilkan, dan PDF gagal dimuat (bergantung pada "Memuat PDF..." selamanya).

sangat disarankan agar Anda memasangnya karena alasan kinerja

Bisakah saya bertanya apakah menurut Anda itu relevan, mengingat saya hanya merender satu halaman saat aplikasi saya dimuat? Jika tidak, saya lebih suka memiliki bundel yang lebih kecil. Memberi saya akan dapat membuat React-PDF bekerja tanpa itu ...

Membalas komentar yang Anda tulis tentang masalah yang salah: :senyum:

Satu pertanyaan lagi. Apakah menggunakan versi perbaikan Anda, dengan 'pdf.combined.js' TIDAK menghasilkan peringatan ini atau hanya menghilangkan 404? Jika pdf.combined.js berfungsi dengan baik, mungkin itu adalah jalur yang harus kita ikuti di 2.0.

Menggunakan nnarhinen/react-pdf#43 kesalahan 404 hilang, tetapi saya masih mendapatkan Warning: Setting up fake worker

Hah, terima kasih sudah begitu jeli! :D

Menjawab pertanyaan Anda tentang relevansi, itu tidak benar-benar berfungsi seperti ini, karena memuat beberapa ratus kb dan satu-satunya keuntungan adalah utas terpisah. PDF.js masih membutuhkan semua yang ada di dalam pdf.worker.js, apakah itu diperlakukan sebagai pekerja atau tidak. Menonaktifkan pekerja hanya menyebabkannya dimuat dalam satu utas, yang tidak memberi Anda manfaat apa pun. Singkat cerita - pekerja harus ada di sana.

Saya baru saja merilis v2.0.0-beta dan saya telah memastikan untuk membuat instruksi yang jelas tentang ini. Beri tahu saya jika saya dapat membantu Anda dengan hal lain!

Omong-omong, untuk meningkatkan proyek pengujian Anda ke 2.0.0:

  1. Perbarui reaksi-pdf:
    "react-pdf": "^2.0.0-beta"
  1. Tambahkan perintah ke package.json:
    "build": "npm run copy-worker && npm run build-browserify",
    "build-browserify": "browserify index.jsx -t [ babelify --presets [ es2015 react stage-2 ] ] --outfile build.js",
    "copy-worker": "copy node_modules\\pdfjs-dist\\build\\pdf.worker.js pdf.worker.js",
  1. Ubah index.jsx:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Document, Page } from 'react-pdf';

render(<Document file="sample.pdf"><Page pageIndex={2} /></Document>, document.getElementById('app'));

Menikmati :)

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

wojtekmaj picture wojtekmaj  ·  4Komentar

Solitaryo picture Solitaryo  ·  5Komentar

zambony picture zambony  ·  3Komentar

GManzato picture GManzato  ·  4Komentar

Kerumen picture Kerumen  ·  3Komentar