question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`next dev` fails with webpack error when importing functions inside web worker

See original GitHub issue

What version of Next.js are you using?

10.2.3

What version of Node.js are you using?

16.2.0

What browser are you using?

Firefox

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

Using a web worker, similar to the with-web-worker example. The web worker file (located under worker/search.js) imports functions from another local file like this:

import { getIndexRange, getTextItemWithNeighbors } from '../lib/search';

Which then results in the following error with Next.js >=10.2.1:

error - webpack/runtime/compat
The "path" argument must be of type string. Received undefined

I’m able to resolve this error by in-lining the functions directly in the web worker file (worker/search.js) instead of importing them.

This issue appeared with v10.2.1-canary.9, so probably introduced by https://github.com/vercel/next.js/pull/25035. It used to work before.

Expected Behavior

I would like to be able to import the functions in the web worker file without an error, as it used to work in the past.

To Reproduce

Honestly, it’s pretty hard to reproduce this issue… I’ve tried to apply a similar structure as in my project to the with-web-worker example, but wasn’t able to reproduce it. Maybe @nemanja-tosic (https://github.com/vercel/next.js/issues/25276#issuecomment-847681082) has some clues about it…

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:8
  • Comments:35 (4 by maintainers)

github_iconTop GitHub Comments

7reactions
lagz0necommented, Jun 24, 2021

OMG, unbelieve that I was able to reproduce this. It happens when there are 2 different webworker sharing same dependencies.

https://github.com/Lagz0ne/web-worker-build-error

Those backgrounds are sharing those imports and those imports exceed a certain size threshold (the data file is pretty big). Only then the yarn build yells

webpack/runtime/compat
The "path" argument must be of type string. Received undefined

It won’t happen if we remove that data from the background bundle.

And, yarn dev works. yarn build yells that error

Next version is 11.0.1

6reactions
Qeldronacommented, Feb 7, 2022

@balazsorban44 You’ve got to be kidding, we’ve got several reproductions and this is impacting lots of people in production. I’ve brought this up with our company’s account rep repeatedly and been ignored, and here it also seems to be something the team would rather ignore than seriously look at our reproductions and solve.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Web Worker not working when importing module, even while ...
You might have a problem with webpack importing your worker in the WebWorker class. Try returning new Worker(URL.createObjectURL(blob) ...
Read more >
Module Methods - webpack
This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a...
Read more >
Resolve | webpack
Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look...
Read more >
Web Workers | webpack - JS.ORG
As of webpack 5, you can use Web Workers without worker-loader . Syntax. new Worker(new URL('./worker.js', import.meta.url)); // or customize the chunk name ......
Read more >
TypeScript - webpack
In this guide we will learn how to integrate TypeScript with webpack. Basic Setup. First install the TypeScript compiler and loader by running:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found