search

wxt-dev / wxt

⚡ Next-gen Web Extension Framework
https://wxt.dev
MIT License
4.36k stars 184 forks source link

pnpm dev failed to load extension #353

Closed qiweiii closed 9 months ago

qiweiii commented 9 months ago

Describe the bug

after pnpm dev, I got this error from chrome:

image

image

image

To Reproduce

branch: https://github.com/qiweiii/markdown-sticky-notes/tree/migrate-wxt Steps to reproduce the bug using the reproduction:

  1. Install dependencies: pnpm i
  2. Start dev mode: pnpm dev

Expected behavior

Expected to open in chrome

Screenshots

Environment

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 640.95 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
    bun: 1.0.11 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.216
    Safari: 17.2.1
  npmPackages:
    wxt: ^0.14.3 => 0.14.3

Additional context

I am trying to migrate this old extension to wxt, the branch is wip so may have many problems, any help would be appreciated!

aklinker1 commented 9 months ago

Did some googling, I found a few other references to this UTF8 issue.

There's probably some non-encoded UTF characters being output that makes Chrome think your file isn't valid. The file was too big to look through myself, so I switched to trying to find the code/modules causing the problem.

After a binary search of commenting things out, I found this has something to do with the @uiw/react-codemirror module. I was able to get it building by commenting it out in the editor component. Then I had to make a few other changes to actually get a working build:

Full patch to get it working ```patch diff --git a/entrypoints/content/Editor.tsx b/entrypoints/content/Editor.tsx index d5e7ec5..5b28859 100644 --- a/entrypoints/content/Editor.tsx +++ b/entrypoints/content/Editor.tsx @@ -1,5 +1,5 @@ import { useRef } from "react"; -import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror"; +// import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror"; import { markdown, markdownLanguage } from "@codemirror/lang-markdown"; import { languages } from "@codemirror/language-data"; import * as themes from "@uiw/codemirror-themes-all"; @@ -19,7 +19,7 @@ const Editor = (props: Props) => { return (
{/* https://github.com/uiwjs/react-codemirror */} - { autoFocus={props.autofocus} style={{ fontSize: props.fontSize, fontFamily: props.fontFamily }} // TODO: check CodeMirror component has any more stuff need to move here or not - /> + /> */}
); }; diff --git a/entrypoints/content/Note.tsx b/entrypoints/content/Note.tsx index 6e5698a..1a7e9e7 100644 --- a/entrypoints/content/Note.tsx +++ b/entrypoints/content/Note.tsx @@ -23,8 +23,8 @@ import { useOutsideClickRef } from "rooks"; import nightOwl from "react-syntax-highlighter/dist/cjs/styles/prism/night-owl"; import Editor from "./Editor"; -import themes from "../themes"; -import fonts from "../fonts"; +import themes from "@/utils/themes"; +import fonts from "@/utils/fonts"; import type { Note } from "./storage"; const ITEM_HEIGHT = 20; diff --git a/entrypoints/options/Preference.tsx b/entrypoints/options/Preference.tsx index 8a1e663..3af059f 100644 --- a/entrypoints/options/Preference.tsx +++ b/entrypoints/options/Preference.tsx @@ -8,8 +8,8 @@ import Select, { SelectChangeEvent } from "@mui/material/Select"; import Input from "@mui/material/Input"; import { styled, withStyles } from "@mui/material/styles"; -import themes from "../themes"; -import fonts from "../fonts"; +import themes from "@/utils/themes"; +import fonts from "@/utils/fonts"; const ITEM_HEIGHT = 20; const ITEM_PADDING_TOP = 5; diff --git a/entrypoints/fonts.ts b/utils/fonts.ts similarity index 100% rename from entrypoints/fonts.ts rename to utils/fonts.ts diff --git a/entrypoints/themes.ts b/utils/themes.ts similarity index 100% rename from entrypoints/themes.ts rename to utils/themes.ts diff --git a/wxt.config.ts b/wxt.config.ts index 03dae2e..6fa6100 100644 --- a/wxt.config.ts +++ b/wxt.config.ts @@ -10,10 +10,10 @@ export default defineConfig({ short_name: "markdown-sticky-notes", name: "Markdown Sticky Notes", icons: { - "16": "notes16.png", - "32": "notes32.png", - "64": "notes64.png", - "128": "notes128.png", + "16": "icon/notes16.png", + "32": "icon/notes32.png", + "64": "icon/notes64.png", + "128": "icon/notes128.png", }, permissions: ["storage", "tabs"], web_accessible_resources: [ ```

Obviously removing the editor isn't a solution lol. Instead, I'd recommend you load the editor inside an iframe, and just have the content script insert the iframe. That way you don't have to include @uiw/react-codemirror inside a content script. Maybe that would work-around the error with your dependency.

See WXT's createIframeUi helper: https://wxt.dev/guide/content-script-ui.html#iframe

qiweiii commented 9 months ago

@aklinker1 much appreciated, I will give it a try

lionelhorn commented 8 months ago

@aklinker1

Depending on the wxt.config.ts and vite build options (terser used as minifier or not), I also get these errors.

Would something as simple as this in a vite plugin that can be activated or not solve the issue?

https://github.com/PlasmoHQ/plasmo/blob/6c559127f70d356e3325712e70502b082579f13f/packages/parcel-optimizer-terser/src/to-utf8.ts

aklinker1 commented 8 months ago

If one of you could try this function out, that'd be helpful. I'm a little concerned about iterating over every character of the bundle to fix a rare case that doesn't happen for everyone.

You can test this out by adding a custom vite plugin, and calling the function @lionelhorn mentioned on the bundle during the generateBundle hook.

On my phone right now, will add a full example if that's not enough to get you started

qiweiii commented 8 months ago

I will try this solution when I get home!

Xdy1579883916 commented 3 months ago

我也遇到了这个问题，首先我尝试关闭vite minify, 编译后chrome能正常加载扩展。 I also encountered this problem. First, I tried to turn off Vite Minify, and after compiling, Chrome was able to load the extension normally.

于是我使用了 terser So I used Terser

vite() {
        return {
            build: {
                minify: "terser",
                terserOptions: {
                    compress: {
                        drop_console: true,
                        drop_debugger: true,
                    },
                },
            }
        }
    }

可以通过这个设置尝试是否能够解决上述问题

You can try this setting to see if it can solve the above problem