Unable to use `?url`, `?worker`, or `new URL(…, import.meta.url)` inside 3rd party module #10837

wojtekmaj · 2022-11-08T20:11:39Z

Describe the bug

I'm trying to fix an issue with first-class Vite support for React-PDF. "first-class" support means you can import React-PDF using bundler-specific entry file and all the configuration will be done for you. "all the configuration" means passing workerSrc or workerPort to pdfjs, library that renders the PDFs. workerSrc expects an URL, workerPort - a Worker. Either is fine.

So my goal is fairly simple: from react-pdf, import file (either as URL or worker) from pdfjs-dist.

For Webpack 5, this works:

entry.webpack5.js

import * as pdfjs from 'pdfjs-dist/build/pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker', import.meta.url);

and this works:

entry.webpack5.js

import * as pdfjs from 'pdfjs-dist/build/pdf';

pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url),
  { type: 'module' },
);

For Webpack 4, this works:

entry.webpack4.js

import * as pdfjs from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'file-loader!pdfjs-dist/build/pdf.worker';

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

For Parcel 2, this works:

entry.parcel2.js

import * as pdfjs from 'pdfjs-dist/build/pdf';

pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  new URL('npm:pdfjs-dist/build/pdf.worker.js', import.meta.url),
  { type: 'module' },
);

Neither of these options work for Vite. Neither does what Vite docs seem to recommend:

entry.vite.js

import * as pdfjs from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?url';

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

Reproduction

https://github.com/wojtekmaj/react-pdf/tree/vite-test

Steps to reproduce

I came up with every possible combination of imports, suffixes, and techniques to pass worker to pdfjs. Here's the full list of techniques (if I'm missing something, let me know!)

// Pass these as:
// - pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
// - pdfjs.GlobalWorkerOptions.workerPort = pdfjsWorker; - for ?worker only
import pdfjsWorker from './pdf.worker.entry';
import pdfjsWorker from './pdf.worker.entry?url';
import pdfjsWorker from './pdf.worker.entry?worker';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?url';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?worker';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry?url';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry?worker';

// Use directly:
pdfjs.GlobalWorkerOptions.workerSrc = './pdf.worker.entry';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.entry';

pdfjs.GlobalWorkerOptions.workerSrc = require.resolve('./pdf.worker.entry');
pdfjs.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker');
pdfjs.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker.entry');

pdfjs.GlobalWorkerOptions.workerSrc = new URL('./pdf.worker.entry', import.meta.url);
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker', import.meta.url);
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.entry', import.meta.url);

pdfjs.GlobalWorkerOptions.workerSrc = new URL('./pdf.worker.entry', import.meta.url);
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker', import.meta.url);
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.entry', import.meta.url);

pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  './pdf.worker.entry',
  { type: 'module' },
);
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  'pdfjs-dist/build/pdf.worker',
  { type: 'module' },
);
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  'pdfjs-dist/build/pdf.worker.entry',
  { type: 'module' },
);

pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  require.resolve('./pdf.worker.entry'),
  { type: 'module' },
);
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  require.resolve('pdfjs-dist/build/pdf.worker'),
  { type: 'module' },
);
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  require.resolve('pdfjs-dist/build/pdf.worker.entry'),
  { type: 'module' },
);

pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  new URL('./pdf.worker.entry', import.meta.url),
  { type: 'module' },
);
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  new URL('pdfjs-dist/build/pdf.worker', import.meta.url),
  { type: 'module' },
);
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
  new URL('pdfjs-dist/build/pdf.worker.entry', import.meta.url),
  { type: 'module' },
);

I then made an entry file out of each of 33 possibilities listed above. I pushed them to https://github.com/wojtekmaj/react-pdf/tree/vite-test branch. Then, I used sample/vite sub-repository as a testing site and started importing React-PDF using each entry files.

1, 2, 3 - resulting in "Setting up fake worker", meaning - we didn't import the worker correctly (e.g. workerSrc was not a string).
4, 5 - stuck on loading, meaning - it probably got recognized as worker but it's not really a valid worker.
6 - "Could not read from file: /react-pdf/sample/vite/node_modules/pdfjs-dist/build/pdf.worker.js?url"
7, 8 - "Could not read from file: /react-pdf/sample/vite/node_modules/pdfjs-dist/build/pdf.worker.js?worker"
9 - resulting in "Setting up fake worker".
10 - "Could not read from file: /react-pdf/sample/vite/node_modules/pdfjs-dist/build/pdf.worker.entry.js?url"
11, 12 - "Could not read from file: /react-pdf/sample/vite/node_modules/pdfjs-dist/build/pdf.worker.entry.js?worker"
13, 14, 15 - 404 Not found
16, 17, 18 - "__require.resolve is not a function"
19, 20, 21, 22, 23, 24 - 404 Not found
25, 26, 27 - stuck on loading.
28, 29, 30 - "__require.resolve is not a function"
31, 32, 33 - stuck on loading.

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 522.77 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - /usr/local/bin/node
    Yarn: 3.1.0 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 106.0.3
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react: ^2.2.0 => 2.2.0 
    vite: ^3.2.2 => 3.2.2

Used Package Manager

yarn

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

wojtekmaj · 2022-11-08T21:03:13Z

Related to #8261

wojtekmaj · 2022-11-08T21:25:21Z

Also kinda related to #7585 and #7991?

wojtekmaj · 2022-11-08T21:51:29Z

#6918 looks related, but the fix that closed it doesn't seem to resolve the issue, or I don't understand something...

wojtekmaj · 2022-11-08T22:18:26Z

I came to the conclusion that:

?url, ?worker either don't work inside 3rd party modules intentionally or unintentionally - either docs are to be clarified, or suffixes not working in 3rd party modules are to be fixed.

The following should be working in Vite 3.2.0 after analysing #7837

import * as pdfjs from 'pdfjs-dist/build/pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker', import.meta.url);

and yet, this results in 404 Not found response on request to http://localhost:5173/node_modules/.vite/deps/pdfjs-dist/build/pdf.worker.

What I do see, however, is this in deps folder:

From what I see:

pdfjs-dist is indeed nowhere to be found in deps
react-pdf_dist_esm_entry__vite.js is huuuuge - and includes pdfjs-dist contents!

wojtekmaj · 2022-11-08T23:37:58Z

I THINK I've managed to reproduce it here:

https://github.com/wojtekmaj/vite-missing-deps-bug

But what worries me is that in repro, I'm getting 504 Gateway Timeout, whereas on real app it's 404 Not found that's bugging me. In both cases, however, the resolved module URL is nowhere to be found in node_modules/.vite/deps.

wojtekmaj · 2022-11-09T00:11:27Z

Superseded by #10838 and #10839

wojtekmaj added the pending triage label Nov 8, 2022

wojtekmaj mentioned this issue Nov 8, 2022

[v6] "Could not read from file: /myrepo/node_modules/pdfjs-dist/build/pdf.worker.js?url" when using Vite specific entry wojtekmaj/react-pdf#1148

Closed

4 tasks

wojtekmaj changed the title ~~Unable to use ?url, ?worker inside 3rd party module, or otherwise import another module as URL/worker inside 3rd party module~~ Unable to use ?url, ?worker, or new URL(…, import.meta.url) inside 3rd party module Nov 8, 2022

wojtekmaj closed this as not planned Won't fix, can't repro, duplicate, stale Nov 9, 2022

CodyJasonBennett mentioned this issue Nov 13, 2022

(WIP) KTX2Loader: Replace manual transcoder path with dynamic imports mrdoob/three.js#24946

Closed

github-actions bot locked and limited conversation to collaborators Nov 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to use `?url`, `?worker`, or `new URL(…, import.meta.url)` inside 3rd party module #10837

Unable to use `?url`, `?worker`, or `new URL(…, import.meta.url)` inside 3rd party module #10837

wojtekmaj commented Nov 8, 2022 •

edited

Loading

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 8, 2022 •

edited

Loading

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 9, 2022

Unable to use ?url, ?worker, or new URL(…, import.meta.url) inside 3rd party module #10837

Unable to use ?url, ?worker, or new URL(…, import.meta.url) inside 3rd party module #10837

Comments

wojtekmaj commented Nov 8, 2022 • edited Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 8, 2022 • edited Loading

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 8, 2022

wojtekmaj commented Nov 9, 2022

Unable to use `?url`, `?worker`, or `new URL(…, import.meta.url)` inside 3rd party module #10837

Unable to use `?url`, `?worker`, or `new URL(…, import.meta.url)` inside 3rd party module #10837

wojtekmaj commented Nov 8, 2022 •

edited

Loading

wojtekmaj commented Nov 8, 2022 •

edited

Loading