Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

[botshen]

Why is this error occurring, here is my repository address: botshen/mock-v3

Please run pnpm i pnpm build and then load the extension in chrome then you can see this error message, what is causing this?

[mubaidr]

You are trying to use import statements in js file, which is causing issue. Also if you run pnpm dev and load extension in chrome, it will display better error messages (with source-maps).

[botshen]

You are trying to use import statements in js file, which is causing issue. Also if you run pnpm dev and load extension in chrome, it will display better error messages (with source-maps).

If I run pnpm dev I don't see any error message, my script works fine but after build it prompts this error, I don't know why this is happening.

[mubaidr]

You are using imports inside a js file, which I believe gets transpiled during dev process. But when using build it is not processed therefore this error. Consider using npm pakcage for the ajax-hook

[botshen]

You are using imports inside a js file, which I believe gets transpiled during dev process. But when using build it is not processed therefore this error. Consider using npm pakcage for the ajax-hook

I started out using npm, but I switched to importing js when I got this error 'ajax-hook' is imported by src/content-script/inject.ts, but could not be resolved – treating it as an external dependency

[mubaidr]

Did you add package?

pnpm add ajax-hook

and then

pnpm i

[botshen]

Did you add package?你添加了包吗？

pnpm add ajax-hook

and then 进而

pnpm i

I of course ran the command to add the dependency and this is my package.json

{
  "dependencies": {
    "ajax-hook": "^3.0.1",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.18",
    "@iconify-json/mdi": "^1.1.54",
    "@tailwindcss/forms": "^0.5.4",
    "@types/chrome": "^0.0.243",
    "@types/eslint": "^8.44.2",
    "@types/eslint-config-prettier": "^6.11.0",
    "@types/node": "^18.17.3",
    "@types/prettier": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "^6.3.0",
    "@typescript-eslint/parser": "^6.3.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/compiler-sfc": "^3.3.4",
    "@vueuse/core": "^10.3.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.46.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-vue": "^9.16.1",
    "postcss": "^8.4.27",
    "prettier": "^3.0.1",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "sass": "^1.64.2",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.1.6",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-icons": "^0.16.5",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.4.9",
    "vite-plugin-pages": "^0.31.0",
    "vue-tsc": "^1.8.8",
    "webext-bridge": "^6.0.1"
  },
  "name": "vite-vue3-chrome-extension-v3",
  "overrides": {
    "@crxjs/vite-plugin": "$@crxjs/vite-plugin"
  },
  "pnpm": {
    "overrides": {},
    "peerDependencyRules": {
      "allowAny": [],
      "allowedDeprecatedVersions": {
        "sourcemap-codec": "1.4.8"
      },
      "allowedVersions": {},
      "ignoreMissing": []
    }
  },
  "private": true,
  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "lint": "eslint . --fix --ext js,mjs,cjs,ts,mts,cts,vue",
    "preview": "vite preview"
  },
  "type": "module",
  "version": "0.0.1"
}

The above error still exists and I'm struggling with it 🥺

[botshen]

Can you help me look at it, I've been struggling with it for days and still no solution, google can't find an answer, thank you!

[mubaidr]

I will check it, pls update repo to use npm package of ajax-hook

[botshen]

I will check it, pls update repo to use npm package of ajax-hook

I've updated the repository, please check it for me if you have time, thanks again!

[mubaidr]

• You can inject scripts using manifest.config.js OR
• you can import scripts into content script, vite will process these too.

https://github.com/botshen/mock-v3/pull/1

[botshen]

After packaging the js or using the import statement, the browser will report an error