React-pdf: <hash>.worker.js가 오류 404를 반환합니다.</hash>

안녕하세요 @benoj , 늦게 회신 해 .worker.js 가있는 파일이 있습니까? 모든 것이 올바르게 설정되면 하나가 있어야합니다.

@wojtekmaj 걱정 마세요-문제를 해결했지만 해결 방법을 잘 모르겠습니까?

작업자가 /<hash>.worker.js 에서로드되므로 / 을로드하면 앱이 제대로 작동하지만 /subresource 에로드하면 /subresource/<hash>.worker.js 대해 404가 표시됩니다. 내 devserver가 작업자가 생성 된 빌드 폴더의 모든 파일을 제공하기 때문입니다. 그러나 작업자가 절대 경로가 아닌 상대 경로로 끌리는 것처럼 보입니다.
어쨌든 이것을 무시 하시겠습니까?

@benoj 예쁜 솔루션인지는 모르겠지만 devServer에만 영향을 미치는 경우 devServer 프록시 를 사용하여 잘못된 방향으로 진행되는 요청을 리디렉션 할 수 있습니다.

@wojtekmaj 아니요 프로덕션 앱에도 영향을 미칩니다.

앱은 반응 라우터를 사용하는 단일 페이지 앱입니다. 루트가 아닌 수준에서 앱을 열면 작업자에 대한 요청이 잘못된 경로로 이동합니다.

기본적으로 /{hash}.worker.js 대한 절대 경로를 사용하여 수정할 수 있습니다. 현재 상대 경로를 재정의 할 수 있습니까?

또한 해시가 어떻게 계산되는지 알고 있습니까? 그리고 그것이 일정하다면?

벤

흠 ... Webpack에서 동적으로 가져온 모든 파일이 동일한 논리를 공유한다고 생각하므로 / 이외의 다른 곳에있는 동안 동적으로 다운로드 된 모든 번들에 문제가있을 수 있습니다. Webpack 구성에서 output.publicPath 이 누락 된 것 같습니다.

내 웹팩 (위)을 다음으로 업데이트했습니다.

  output: {
    filename: "js/[name].js",
    path: path.resolve("build"),
    publicPath: '/js'
  }

하지만 [hash].worker.js 이 /js 폴더에 빌드되지 않고 앱의 요청이 이제 /subresource/js/[hash].worker.js 하므로 여전히 404로 해결됩니다.

그러나 이것을 해결하는 방법에 대해 혼란 스럽습니까? 내 웹팩은 상당히 표준적인 것 같습니다. 왜 다른 사람들이 이것을 보지 못하는지 잘 모르겠습니까?

업데이트 : 작동했습니다. 이 솔루션에 대한 귀하의 의견을 듣고 싶습니다.

내 자신의 pdf.worker를 빌드하기 위해 webpack이 업데이트되었습니다.

 entry: {
    bundle: [
      'babel-polyfill',
      "./src/frontend/index.js"
    ],
    'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry'
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve("build"),
    publicPath: 'js/'
}

workerSrc를 js 출력 경로에 수동으로 설정

import Document from 'react-pdf/build/Document';
import Outline from 'react-pdf/build/Outline';
import Page from 'react-pdf/build/Page';
import React from 'react';
const pdfjs = require('pdfjs-dist');
pdfjs.PDFJS.workerSrc = '/js/pdf.worker.js';

흠, 전혀 나쁜 해결 방법이 아닙니다!
나는 이것이 webpack-loader 의 저장소에서 더 많이 논의되어야한다고 생각합니다. 나는 결코 Webpack 전문가가 아니므로 작업자가 일반 번들과 같은 방식으로 처리되지 않으면 더 나은 솔루션을 찾고 작동 방식에 대한 수정 사항을 찾을 수 있습니다.

그건 그렇고, 조금 더 편리한 방법으로 자신의 PDFJS 설정을 설정하는 지원이 곧 제공 될 예정입니다.

안녕하세요 @benoj ,
해킹없이 사용자 지정 PDF.js 설정을 설정하는 기능이 이제 React-PDF 2.3.0에 적용됩니다. 크게 다르지 않습니다.

import { setOptions, <WhateverElseYouNeed> } from 'react-pdf';

setOptions({
  workerSrc: '/js/pdf.worker.js',
});

네가 좋아하길 바래!

@wojtekmaj 굉장 할 것입니다! 감사 :)

이것이 의도 한대로 작동하는지 확실하지 않습니다.
setOptions 메서드를 사용하여 시도했지만 아무 소용이 없습니다.
백엔드에서 제공하지 않는 빌드 루트에서 <hash>.worker.js 파일을 계속 생성합니다.
prod webpack config 에서이 문제가 발생하지 않았습니다 (해시를 앞에 붙이지 않았습니다), 이상하게도 dev에서 발생하고 있습니다 ...이 원인을 파악하면 다시보고합니다.

나는 해결 방법으로 @benoj 원래 솔루션에 의지했습니다.

주목해야 할 중요한 점은 entry.webpack의 유일한 목적은 사용자 측에서 구성없이 PDF.js 작업자를 활성화하는 것입니다. 비활성화하려는 경우 일반적인 항목 인 entry.webpack을 사용해서는 안됩니다.

비활성화하고 싶지 않고 동적으로 가져 오기 / 참조되는 방법을 조금 더 제어 할 수 있습니다.

pdfjs 을 (를) window 에 가져 오거나 첨부한다고 가정합니다.
setOptions가 컨텍스트없이 호출되도록 구성되는 방법을 궁금해했습니다.
위에서 언급했듯이 pdfjs 수동으로 가져오고 workerSrc를 지정하면 작동하는 것으로 보입니다.

// importing these on their own
import Document from 'react-pdf/build/Document';
import Page from 'react-pdf/build/Page';
// configuring pdfjs
const pdfjs = require('pdfjs-dist');
pdfjs.PDFJS.workerSrc = '/js/pdf.worker.js';

편집하다:

소스를 보면 내 문제가 entry.webpack 에서 가져 오는 것이라고 생각합니다.
다음은 의도 한대로 작동합니다!

import { Document, Page, setOptions } from "react-pdf/build/entry";

setOptions({
  workerSrc: "/js/worker.pdf.js"
});

나에게 괜찮아 보인다;) 물론 로더를 직접 복사해야하기 때문에 더 많은 구성을해야하는 경우.

그건 그렇고, 이것이 기본 진입 점이므로 from 'react-pdf' 작성할 수 있습니다. :)

이 문제에 직접 직면합니다. ReactPDF는 절대적으로 도메인에 대한 것이 아니라 상대 경로에서 작업자를로드하려고합니다. 누구든지 그것을 분류하는 방법에 대한 아이디어가 있습니까? 나는 webpack에 너무 익숙하지 않으므로 Laravel Mix를 사용하고 있습니다.

또한 여기에서 끝났습니다-내 앱은 /static 정적 자산을 제공하지만 webpack에서 workerjs 파일을 생성 할 수 없습니다.

@joshbrw , @tjwebb , 위 의

setOptions 가 더 이상 사용되지 않거나 그동안 어딘가로 옮겨진 것으로 보이므로 위의 주석 에있는 운동은 더 이상 작동하지 않습니다. 문서를 읽으면 다음이 작동 할 수 있다고 믿게됩니다.

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `/path/to/your/worker.js`

그러나 DevTools에서 시도되는 경로가 여전히 현재 URL에 상대적이며 절대적이지 않기 때문에 작동하지 않습니다.

우리는 리 액트 앱 내에서 PDF를 렌더링하기 위해 이것을 사용하고 있습니다. 'react-pdf'가져 오기 또는 'react-pdf / dist / entry.webpack'또는 pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js'; (여기서 '=`)를 사용하든 로컬에서 잘 작동하지만 첫 번째 또는 세 번째 옵션은 모두 작동하지 않습니다. 우리의 생산.

프로덕션에서 'react-pdf'가져 오기를 사용하면 pdf.worker.js가 URL / pdf.work.js에서 호출되며 (상태) "취소됨"입니다. 그런 다음 CDN을 사용해 보았고 파일이 성공적으로로드되었지만 두 상황 모두에서 탭이 멈추고 결국 충돌이 발생했습니다. devTool Sources에 "잠재적 인 메모리 부족 충돌 전에 일시 중지되었습니다"라는 메시지가 있습니다.

우리는 그것을 꺼내야했고, 무슨 일이 일어나고 있는지 전혀 몰랐습니다.

다음 문제를 읽었습니다. 371 , 378- 답변 없음 , pdf.js의 8305

업데이트가 있습니까?
비슷한 문제가 발생하지만 동일합니다. 콘솔에 오류가 표시되지 않고 404가 반환 값으로 표시되지 않습니다.
사용할 때 : import { Document, Page } from "react-pdf"; pdf 파일을 볼 수 있습니다.
하지만 import { Document, Page } from 'react-pdf/dist/entry.webpack'; 사용할 때 파일을 볼 수 없습니다.
onDocumentLoadSuccess 호출 한 적이 없으며 Loading PDF… 메시지와 함께로드 하는
다음 메서드는 호출되지 않습니다.

• onLoadError (문서 구성 요소 내부)
• onSourceError (문서 구성 요소 내부)
• onLoadError (페이지 구성 요소 내부)
• onRenderError (페이지 구성 요소 내부)
• onLoadProgress (페이지 구성 요소 내부)

@ b-asaf 때로는 특히 404 대신 클라이언트 측 라우팅이있는 최신 앱에서 HTML 페이지가 반환되므로 실제 HTTP 404 오류 코드가 표시되지 않고 200이 표시됩니다.

너무 까다롭기 때문에 PDF.js의 기본 cdn을 사용할 수 있습니다.

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

여기에 모든 답변에 감사하지만 CDN을 사용하는 대신

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

도메인 간 요청을 피하기 위해 프로젝트의 출력 파일을 사용하고 싶지만 설정하면 작동하지 않습니다.

pdfjs.GlobalWorkerOptions.workerSrc = '/dist/vendors~pdfjsWorker.js';

이 도구를 많이 좋아했지만 절대 경로를 무시하는 것은 오류 인 것 같습니다. SPA 앱에서 작업 중이며 http://example.com/check/id/language 에 액세스하려고하면 패키지가 작동하지 않습니다.

감사.

이것은 CDN 문제가 아니며 내 로컬 앱 중 하나에서 실행되지만 다른 앱에서는 실행되지 않습니다.

내 앱 중 하나에서 react static을 사용하여 web-pack dev server를 통해 실행됩니다.

다른 하나는 webpack과 함께 번들로 제공되는 노드 / 익스프레스 백엔드를 가지고 있으며 프런트 엔드는 다시 React입니다. 작동하지 않습니다.

pdf 항목의 구성은 동일합니다.
이것은 내 노드 / 익스프레스 웹 팩 설정으로해야 할 일이 있음을 알려줍니다.
급행 노선과 관련이있을 수 있습니다.

어쨌든; 이 문제를 해결하면 다시 돌아 오거나, 무슨 일인지 아는 사람이 있으면 공유해주세요.

나는 그것을 작동했다!
내 tsconfig에 설정된 commonjs를 사용하고 있기 때문에
다음과 같이 가져와야합니다.
import {Document, Page} from 'react-pdf/dist/umd/entry.webpack'
좋아하지 않는
import {Document, Page} from 'react-pdf' //BAD not working !

이제 내 노드 / 익스프레스 앱에서 작동합니다.

사용자가 서버를 개발하고 정적으로 반응하는 다른 앱에서
내 tsconfig.json에 설정된 esnext를 사용하고 있습니다.
나는 그것을 수입하고있다

import {Document, Page} from 'react-pdf';

작동합니다!

즉, 설정된 모듈 에 따라 다르게 가져와야합니다.

commonjs 용
` 'react-pdf'에서 {Document, Page} 가져 오기

esnext 용
import {Document, Page} from 'react-pdf/dist/umd/entry.webpack'

@nickjohngray react-pdf/dist/umd/entry.webpack 에서 가져 오려고하는데 Typescript가 하위 모듈이 존재하지 않는다고 불평합니다. 최신 버전 인 @types/react-pdf 버전 4.0.6이 설치되어 있습니다. 유형 문제를 어떻게 해결 했습니까?

typecheck를 완료하는 데 시간이 오래 걸리면 작업자가 잘 컴파일되고 있고 dist/umd 사용할 때 PDF가로드 및 표시되는지 확인할 수 있지만 typecheck가 완료되면 오류가 발생하고 IDE도 불평 :

Error:(4, 30) TS7016: Could not find a declaration file for module 'react-pdf/dist/umd/entry.webpack'. 
  E:/Users/Rob/workspace/gTove/node_modules/react-pdf/dist/umd/entry.webpack.js' implicitly has an 'any' type.
  If the 'react-pdf' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-pdf`

안녕하세요 @RobRendell
나는 유형 오류가 없었습니다.
이 유형 오류로 인해 중지되는 경우 any 유형을 사용하고 작동하는지 확인하십시오.

@nickjohngray any 형식으로 사용할 수는 없지만 (가져 오기 문), 가져 오기 앞에 // @ts-ignore 라는 줄을 추가하여 오류를 무시할 수 있습니다. 그렇게하면 모든 것이 잘 작동합니다.

이상적으로는 적절한 유형을 추가하는 방법을 찾고 싶습니다. .d.ts 파일을 추가하여 모듈 선언을 확장하려고합니다.

import {pdfjs, Document, Page, Outline} from 'react-pdf';

declare module 'react-pdf/dist/umd/entry.webpack' {
    export {pdfjs, Document, Page, Outline};
}

...하지만 그것은 나를 위해 문제를 해결하지 않는 것 같습니다. 나는 Typescript에 능숙하지 않아서 무슨 일이 일어나고 있는지 알 수 없습니다.

지금 달성해야 할 마감일이 몇 가지 있습니다. 내가 끝나면 도와 줄 수있어
저 물건 . 문제는 작고 짜증나는 유형의 문제 여야합니다.

나는 typescript를 완전히 지원하지 않는 libs에 대한 패스에서 발견했습니다.
그들을 위해 유형을 작업하는 데 시간을 할 가치가 없습니다. 내 시간은 제한되어 있고
킥 엉덩이 구성 요소를 만들고 고치는 데 사용합니다. 나는 당신이 그렇게 촉구합니다
똑같다 . 😀

고마워 닉.

월요일, 2020 년 9 월 28 일, 오후 8:01 Rob Rendell, [email protected] 작성 :

@nickjohngray https://github.com/nickjohngray 나는 유형으로 사용할 수 없습니다
(이것은 import 문입니다), 그러나 //라는 줄을 가져 오기 전에 가져올 수 있습니다.
@ ts-ignore는 오류를 무시합니다. 그렇게하면 모든 것이 잘 작동합니다.

이상적으로는 적절한 유형을 추가하는 방법을 찾고 싶습니다. 나는 노력하고있다
.d.ts 파일을 추가하여 모듈 선언을 확장합니다.

'react-pdf'에서 {pdfjs, Document, Page, Outline} 가져 오기;

선언 모듈 'react-pdf / dist / umd / entry.webpack'{
{pdfjs, 문서, 페이지, 개요} 내보내기;
}

...하지만 그것은 나를 위해 문제를 해결하지 않는 것 같습니다. 나는 능숙하지 않다
Typescript에서 그게 무슨 일인지 알기에 충분합니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/wojtekmaj/react-pdf/issues/97#issuecomment-699818238 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AD3TSIQUIASADKB6UASTNRDSIAYEZANCNFSM4ECOS2TQ
.