crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.9k stars 191 forks source link

Running Dev in 2.0.0-x causes crash with yarn PnP #552

Closed Joshuabaker2 closed 2 years ago

Joshuabaker2 commented 2 years ago

Build tool

Vite

Where do you see the problem?

Describe the bug

Note this only causes a crash in the 2.0.0-beta, it runs fine on 1.x. Tested it out on beta-1 and beta-3.

When running vite via yarn run dev, I get the following error:

failed to load config from /<srcdir>/vite.config.js
error when starting dev server:
  Error: require() of ES Module /Users/josh/.yarn/berry/cache/get-port-npm-6.1.2-5a92df687a-9.zip/node_modules/get-port/index.js from /Users/josh/.yarn/berry/cache/@crxjs-vite-plugin-npm-2.0.0-beta.3-7f5f4d3a68-9.zip/node_modules/@crxjs/vite-plugin/dist/index.cjs not supported.
  Instead change the require of index.js in /Users/josh/.yarn/berry/cache/@crxjs-vite-plugin-npm-2.0.0-beta.3-7f5f4d3a68-9.zip/node_modules/@crxjs/vite-plugin/dist/index.cjs to a dynamic import() which is available in all CommonJS modules.
  at require$$0.Module._extensions..js (/<srcdir>/.pnp.cjs:58892:15)
at Object._require.extensions.<computed> [as .js] (file:///<srcdir>/.yarn/__virtual__/vite-virtual-ac6e96a74c/4/.yarn/berry/cache/vite-npm-3.1.8-6703f419ed-9.zip/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63540:17)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.require$$0.Module._load (/<srcdir>/.pnp.cjs:58734:14)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/josh/.yarn/berry/cache/@crxjs-vite-plugin-npm-2.0.0-beta.3-7f5f4d3a68-9.zip/node_modules/@crxjs/vite-plugin/dist/index.cjs:21:15)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at require$$0.Module._extensions..js (/<srcdir>/.pnp.cjs:58896:33)

Reproduction

It's a private repo, but I'll copy-paste the relevant config files:

package.json:

{
  "name": "chrome-extension",
  "private": true,
  "packageManager": "yarn@3.2.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@fraction/shared": "workspace:*",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@crxjs/vite-plugin": "2.0.0-beta.3",
    "@emotion/babel-plugin": "^11.9.2",
    "@emotion/core": "^11.0.0",
    "@emotion/eslint-plugin": "^11.2.0",
    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
    "@types/chrome": "^0.0.195",
    "@types/node": "^16.11.39",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^5.23.0",
    "@vitejs/plugin-react": "^1.3.2",
    "@yarnpkg/pnpify": "^4.0.0-rc.4",
    "concurrently": "^7.2.1",
    "eslint": "^8.15.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-ban": "^1.6.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "eslint-plugin-storybook": "^0.5.2",
    "prettier": "^2.6.2",
    "tslib": "^2.4.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.8"
  }
}

vite.config.ts

import { crx } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = require("./manifest.json");

export default defineConfig({
  plugins: [react(), crx({ manifest })],
  resolve: {
    alias: {
      src: "/src",
    },
  },
});

Logs

No response

System Info

Using yarn 4 with PnP.

System:
    OS: macOS 12.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.68 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 4.0.0-rc.22 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Brave Browser: 87.1.17.75
    Chrome: 106.0.5249.119
    Firefox: 103.0
    Safari: 15.0

Severity

blocking all usage of RPCE

jacksteamdev commented 2 years ago

Looks like get-port is an ESM-only package, so it doesn't work with the CommonJS build of CRXJS.

Surprising that I haven't seen this before. Are you using the Vite starter? If not, mind sharing your tsconfig.json?

jacksteamdev commented 2 years ago

failed to load config from //vite.config.js

Just noticed that it references a JS Vite config; I wonder why?

Joshuabaker2 commented 2 years ago

Sorry the vite.config.js is a red-herring, I must have run tsc and it auto-converted the ts file, but if I delete the js file and use just the ts file the same thing happens.

I am using my own tsconfig as this package is part of a monorepo so there's some shared packages and configurations. Here's what it looks like:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "inlineSources": true,
    "isolatedModules": true,
    "useUnknownInCatchVariables": false,
    "lib": ["dom", "dom.iterable", "esnext", "scripthost", "es2020"],
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "target": "esnext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "emitDecoratorMetadata": true,
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"],
      "@fraction/shared": ["../packages/shared"]
    },
    "include": [
      "./src/**/*"
    ],
    "exclude": ["node_modules"],
    "useDefineForClassFields": true,
    "allowJs": false,
    "module": "ESNext",
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "types": ["chrome", "@emotion/react/types/css-prop", "vite/client"]
  },
  "references": [{ "path": "../shared" }, { "path": "./tsconfig.node.json" }]
}

and tsconfig.node.json contains:

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts"]
}
promethyttrium commented 2 years ago

Just reproduced this exact error, the minimal steps are just whatever is in https://crxjs.dev/vite-plugin/getting-started/solid/create-project

npx degit solidjs/templates/ts vite-solid-crxjs
npm i @crxjs/vite-plugin@beta -D  # added the @beta part

# vite.config.js
import { defineConfig } from 'vite'
import solidPlugin from "vite-plugin-solid";
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    solidPlugin(), 
    crx({ manifest })
  ],
});

# manifest.json
{
  "manifest_version": 3,
  "name": "CRXJS Solid Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

I would have thought the the minimum sanity test would be to make sure it works with the documentation's Getting Started steps... 🤦

Joshuabaker2 commented 1 year ago

So I updated to beta.4, but was getting a different crash. Ended up just changing my package to a module (with "type": "module" in my package.json) and that resolved the crash.

For posterity, the crash I was getting as a commonjs project was:

yarn dev
✘ [ERROR] [plugin externalize-deps] Failed to resolve entry for package "@crxjs/vite-plugin". The package may have incorrect main/module/exports specified in its package.json.

    ../../.yarn/unplugged/esbuild-npm-0.15.9-37944ec582/node_modules/esbuild/lib/main.js:1327:27:
      1327 │         let result = await callback({

and

failed to load config from /Users/josh/dev/fraction/dashboard/packages/chrome-extension/vite.config.ts
error when starting dev server:
Error: Build failed with 1 error:
../../.yarn/unplugged/esbuild-npm-0.15.9-37944ec582/node_modules/esbuild/lib/main.js:1327:27: ERROR: [plugin: externalize-deps] Failed to resolve entry for package "@crxjs/vite-plugin". The package may have incorrect main/module/exports specified in its package.json.