Closed NicolasReibnitz closed 1 year ago
I had the same issue, it seemed to go away in dev mode by setting moduleResolution: node16
in my tsconfig (this has some side effects, for example you need to add .js extensions to all the files. See more here ).
I'm still unable to run build script, getting the same Content script refId is undefined:
error. Investigating further...
The serve
issue seems to be caused by some misalignment inside the write functions. Files are written without encoding the querystring params (in this case, ?id=...
), while the scripts expect to find them there. Probably @jacksteamdev can shed some light on this, having rewritten the writers recently.
For the build
see below.
@NicolasReibnitz after further investigation, the build issue is caused by a wrong regexp.
It's not catched by tests because the test configuration is:
export default defineConfig({
build: {
minify: false,
},
[...]
});
in fact, by adding minify: false
to your repo the build command worked.
I think the serve
and the build
issues are different. I will try and submit a PR for the build
issue, while the serve
is still rather obscure.
@marcoreni Thanks for the assist and the PR!
@NicolasReibnitz Thanks for putting together this superb issue! The minimum reproduction is a big help. 💯
There's certainly something fishy going on here. First, the file writer doesn't write the dynamic script file; in this case, it's /src/main-world.ts__scriptId--MW0JO.js
, which should be something like export default "/src/main-world.ts.js";
.
It seems that Vue in the main world is somehow tripping up the file writer. I refactored your example to use plain TS in the main world, and things seem to work as expected. Once this bug is fixed, other issues will arise related to using Vue in a main world script. Chrome APIs aren't available to main-world content scripts, and CRXJS uses the Chrome API to support HMR.
As a workaround, for now, I would decouple my main-world logic from the Vue app. Then, the Vue app can send messages from the content script to the main world script using window.postMessage
or custom DOM events.
Hey guys! Thanks a lot for your quick response! I'll test the new build for the... uhm... build side of things. And I think I get what @jacksteamdev is saying about the HMR issues and I'll see if I can get a postMessage bridge kinda thing working.
Thanks again, I'll let you know how it went and what I did for reference later.
Cheers!
Ah... the new build isn't on NPM yet, is it?
Sorry about that! I released it to beta earlier today.
Okay, build seems to be working now! Thanks @marcoreni and @jacksteamdev. Dev doesn't. As expected. But to my TypeScript-newbie eyes the scripts (including the main-world) seem pretty TypeScript-y already. What did you change @jacksteamdev?
I did some further investigation on this (it happened on one of my projects, that does not use vue
but has a main world script with some dependencies).
It seems that if I start the script "a lot of times" files are correctly generated (still unclear why). In a clean scenario (rm -rf node_modules && rm -rf dist && vite dev
) it fails every time.
What I'm seeing with some console.log debugging
is that some prepScript
calls hang here, and that those hangs cause the files to be missing. For example, in my project one of the missing files is injected.ts__scriptId--yqe68.js
, and this file is "hanging".
I tried catching exceptions on that transformRequest
invocation, but the only error was related to an image, and I don't think that's related (I removed the image import and nothing changed). Listing it here just for reference:
ERROR transformRequest Cannot set properties of undefined (setting 'isSelfAccepting')
TypeError: Cannot set properties of undefined (setting 'isSelfAccepting')
at TransformContext.transform (file:///Volumes/Workspace/work/git/accedo-chrome-extension/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.9/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36789:48)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.transform (file:///Volumes/Workspace/work/git/accedo-chrome-extension/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.9/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30)
at async loadAndTransform (file:///Volumes/Workspace/work/git/accedo-chrome-extension/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.9/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29) {
plugin: 'vite:import-analysis',
id: '/Volumes/Workspace/work/git/accedo-chrome-extension/src/fireman-logo.png?import',
pluginCode: 'export default "/src/fireman-logo.png?import"'
}
I'm trying to see if there are related issues on Vite side but I've just started using it, so maybe this info helps someone else in further investigations.
transformRequest
for my injected.ts
file hangs because one of the dependencies hangs as well.
In particular, I have a tippy.js
dep, that tries to be resolved as /node_modules/.vite/deps/tippy__js.js?v=2953ce2f
. This resolution goes into here where ~and hangs because~ scriptId
is handled, but every other scenario is not.
I honestly don't know whether this is correct.
After A LOT of try and error I think what's happening here is an infinite loop.
Almost everything works by simply commenting this line. I don't have an exact reason, but my assumption is that:
Therefore, both Vite and the plugin are waiting for each other.
I don't know why the function is there, I don't know what its purpose is or was supposed to be.
By removing it everything works, so...
Build tool
Vite
Where do you see the problem?
Describe the bug
I'm following the guide here to inject a main-world script. I face errors in both the dev and build modes. (note: I'm by no means a typescript expert! That might be the cause of the problem. Just saying).
Dev mode
The files compile fine, but the main-world script can't be found.
See error log below.
The file
dist/src/content-script.ts.js
does exist.dist/src/main-world.ts__scriptId--MW0JO.js
does not. But there is adist/src/main-world.ts.js
file instead.Build mode
The compilation fails.
See error log below.
(note: I shortened the paths using
[...]
myself. That's not the problem. 😄)Reproduction
I put a simplified test case on GitHub here: https://github.com/NicolasReibnitz/crxjs-test-case
I hope that's okay. Let me know if you need something else.
But these are the main files, I guess:
manifest.config.ts:
src/content-script.ts:
src/main-world.ts:
Logs
Errors in the browser:
and
Error in terminal:
System Info
Severity
blocking all usage of RPCE