Skip to content

Use decodeURIComponent to fix error: "SyntaxError: Unexpected token '%'"#23

Merged
developit merged 1 commit intodevelopit:mainfrom
pankdm:decode-uri
Jan 31, 2025
Merged

Use decodeURIComponent to fix error: "SyntaxError: Unexpected token '%'"#23
developit merged 1 commit intodevelopit:mainfrom
pankdm:decode-uri

Conversation

@pankdm
Copy link
Contributor

@pankdm pankdm commented Feb 11, 2022 •
edited
Loading

Summary

This PRs decodes the data portion of the worker script before executing this in NodeJS. Worth noting that decodeURIComponent on a normal text or base64 encoding is idempotent so this change shouldn't affect other cases.
Also the browser itself probably does such decoding automatically when loading workers.

More details

I discovered this issue when trying to use this web-worker package along with webpack worker-loader syntax. For example, if I have a worker defined like this:

import DummyWorker from "worker-loader?inline=no-fallback!./dummy_worker";
const worker = DummyWorker();
...

Then I get the following error coming from web-worker package:

worker.<data:>:1
%2F*%0A%20*%20ATTENTION%3A%20An%20%22eval-source-map%22%20devtool%20has%20been%20used.%0A%20*%20This%20devtool%20is%20neither%20made%20for%20production%20nor%20for%20readable%20output%20files.%0A%20*%20It%20uses%20%22eval()%22%20calls%20to%20create%20a%20separate%20source%20file%20with%20attached%20SourceMaps%20in%20the%20browser%20devtools.%0A%20*%20If%20you%20are%20trying%20to%20read%20the%20output%20file%2C%20select%20a%20different%20devtool%20(https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Fdevtool%2F)%0A%20*%20or%20disable%20the%20default%20devtool%20with%20%22devtool%3A%20false%22.%0A%20*%20If%20you%20are%20looking%20for%20production-ready%20output%20files%2C%20see%20mode%3A%20%22production%22%20(https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Fmode%2F).%0A%20*%2F%0A%2F******%2F%20(()%20%3D%3E%20%7B%20%2F%2F%20webpackBootstrap%0A%2F******%2F%20%09%22use%20strict%22%3B%0A%2F******%2F%20%09var%20__webpack_modules__%20%3D%20(%7B%0A%0A%2F***%2F%20%22.%2Fnode_modules%2Fts-loader%2Findex.js!.%2Fjest%2Fdummy_worker.ts%22%3A%0A%2F*!****************************************************************!*%5C%0A%20%20!***%20.%2Fnode_modules%2Fts-loader%2Findex.js!.%2Fjest%2Fdummy_worker.ts%20***!%0A%20%20%5C****************************************************************%2F%0A%2F***%2F%20(()%20%3D%3E%20%7B%0A%0Aeval(%22%5Cnconsole.log(%5C%22Hello%2C%20world%5C%22)%3B%5Cn%2F%2F%23%20sourceURL%3D%5Bmodule%5D%5Cn%22)%3B%0A%0A%2F***%2F%20%7D)%0A%0A%2F******%2F%20%09%7D)%3B%0A%2F************************************************************************%2F%0A%2F******%2F%20%09%0A%2F******%2F%20%09%2F%2F%20startup%0A%2F******%2F%20%09%2F%2F%20Load%20entry%20module%20and%20return%20exports%0A%2F******%2F%20%09%2F%2F%20This%20entry%20module%20can't%20be%20inlined%20because%20the%20eval-source-map%20devtool%20is%20used.%0A%2F******%2F%20%09var%20__webpack_exports__%20%3D%20%7B%7D%3B%0A%2F******%2F%20%09__webpack_modules__%5B%22.%2Fnode_modules%2Fts-loader%2Findex.js!.%2Fjest%2Fdummy_worker.ts%22%5D()%3B%0A%2F******%2F%20%09%0A%2F******%2F%20%7D)()%0A%3B
^

SyntaxError: Unexpected token '%'
    at new Script (node:vm:100:7)
    at createScript (node:vm:257:10)
    at Object.runInThisContext (node:vm:305:10)
    at evaluateDataUrl (webpack-internal:///../../../web-worker/cjs/node.js:228:13)
    at workerThread (webpack-internal:///../../../web-worker/cjs/node.js:212:9)
    at eval (webpack-internal:///../../../web-worker/cjs/node.js:79:56)

It looks like webpack URI-encodes the worker script before sending it.

The same worker script looks totally reasonable after decoding:

decoded =  /*
 * ATTENTION: An "eval-source-map" devtool has been used.
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./node_modules/ts-loader/index.js!./jest/dummy_worker.ts":
/*!****************************************************************!*\
  !*** ./node_modules/ts-loader/index.js!./jest/dummy_worker.ts ***!
  \****************************************************************/
/***/ (() => {

eval("\nconsole.log(\"Hello, world\");\n//# sourceURL=[module]\n");

/***/ })

/******/ 	});
/************************************************************************/
/******/
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval-source-map devtool is used.
/******/ 	var __webpack_exports__ = {};
/******/ 	__webpack_modules__["./node_modules/ts-loader/index.js!./jest/dummy_worker.ts"]();
/******/
/******/ })()
;

and the above PR fixes my issue.

@pankdm pankdm changed the title Use decodeURIcomponent for worker's data script Use decodeURIComponent to fix error: "SyntaxError: Unexpected token '%'" Feb 11, 2022
@developit developit merged commit 00ddf0c into developit:main Jan 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pankdm @developit