Does not work on Windows #137

onikienko · 2021-12-16T18:45:47Z

Build tool

Vite

Where do you see the problem?

In the browser
In the terminal

Describe the bug

dev and build scripts just hang on the Building Chrome Extension files... It appears on Windows only. When running on Linux everything works as expected.

Reproduction

Create a new extension using this guide https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7
Run it on Windows.

Logs

$ npm run dev  
vite v2.7.3 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 606ms.

Building Chrome Extension files...

// and script just hangs here eating CPU

System Info

System:
    OS: Windows 11
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor             
    Memory: 17.17 GB / 31.91 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chromium (96.0.1054.53)
  npmPackages:
    rollup-plugin-chrome-extension: ^4.0.1-9 => 4.0.1-9 
    vite: ^2.7.3 => 2.7.3

Severity

blocking all usage of RPCE

The text was updated successfully, but these errors were encountered:

onikienko · 2021-12-16T18:52:25Z

Also, I tried to run RPCE tests on Windows. Looks like there are problems with paths. Take a look at the screenshot. (Project location is C:\Projects\experiments\rollup-plugin-chrome-extension )

jacksteamdev · 2021-12-16T19:59:07Z

@onikienko Those watch file paths look suspicious. Would you have time to help debug this? 🙏

This may be the offending code:
https://github.com/extend-chrome/rollup-plugin-chrome-extension/blob/fdf47a3ee891b1b1e7c4f76eb710f58d500e843f/src/files_spawnFile.ts#L65-L67

I added this to support Windows, but Rollup is supposed to use POSIX separators internally.

jacksteamdev · 2021-12-16T20:09:08Z

A quick tip: The tests take a long time to run altogether, so it might be helpful to debug just one test.

I use this VSCode plugin to debug single tests: Jest Runner - Visual Studio Marketplace. It adds a CodeLens to the test file that runs a single test:

It may require adding some lines to the VSCode settings file: .vscode/settings.json

{
  "jestrunner.debugOptions": {
    "args": ["--no-cache"]
  },
  "jestrunner.jestPath": "node_modules/jest/bin/jest.js",
}

XState Viz

When you run the debugger, it should open the XState Visualizer. You can see the progress of the build there. The dropdown lets you select individual files. The paths of the files should be available in the sidebar under "context"

onikienko · 2021-12-17T16:52:17Z

Tried to debug some tests. Get this jest config error:

In the jest config moduleNameMapper it looks like correct.

I guess it's because unneeded slashes were added.
Do you have an idea how to debug/fix it?

jacksteamdev · 2021-12-17T23:46:17Z

test/jest.globalSetup.ts is supposed to run before Jest runs. It builds the files in src/browser and src/service-worker. Something may be wrong there. Do the files below exist? If not, then something is wrong in the global setup file.

onikienko · 2021-12-18T13:39:32Z

You are right. It comes from test/jest.globalSetup.ts. Problem with rollup path resolution. Take a look at source. Slashes are missing here:

This one is even more complicated:

If honest, I have no idea how rollup works 😺 Looks like that resolveId is the first hook called. Is there a way to set up how paths should be resolved?

jacksteamdev · 2021-12-18T16:30:26Z

Rollup configs always accept POSIX, so let's try mapping entryFiles in line 31 to POSIX before giving it to Rollup in config in line 33. normalizePath from @rollup/pluginutils seems like a good place to start.

onikienko · 2021-12-21T20:44:12Z

Tried to normalizePath all paths for the rollup config. Paths look correct after that. But now rollup configs just hangs on bundleImports. Reported jacksteamdev/rollup-plugin-bundle-imports#13

Looks like the issue is out of my expertise 😅

jacksteamdev · 2021-12-22T14:35:35Z

Thanks for working on this! I'm going to remove bundleImports and just use a custom plugin.

Looks like normalizePath is the way forward. I'll add it everywhere I can; maybe you can give it a run then?

jacksteamdev · 2021-12-22T15:59:50Z

@onikienko Can you make a PR with the changes you've made?

You've done a lot, and I'd like you to get credit for it.

onikienko · 2021-12-22T16:48:33Z

Nothing to PR. Just a few lines of code. Tests did not pass since rollup hangs on bundleImports. So I am even not sure that these changes are correct. I just made sure that all path looks correct. If you want you may take a look at my changes onikienko@e5cd8a3

Dimirolz · 2022-01-16T08:41:44Z

Hi @jacksteamdev, I had the same problem running a project on Windows. At the same time on WSL it works great.
I found the problem, and fix it for myself. It's dirty because I'm a newbie. And most likely my fix broke something else.

But maybe it gives you an idea and helps you to fix it in the right way. The problem in my case was here.

https://github.com/extend-chrome/rollup-plugin-chrome-extension/blob/1ac7985ce31dd93ce9c3d08b72ac76469b2f2ef1/src/files.machine.ts#L104-L118

I change these few lines of code:

const dirName = process.cwd();
// and
manifest.id = dirName + "\\manifest.json";

And everything starts working on Windows.

jacksteamdev · 2022-01-18T18:33:57Z

@Dimirolz This helps a lot! It's good to know we don't have to change lots of things to get this working.

jacksteamdev · 2022-02-20T23:10:09Z

@onikienko @Dimirolz I've done a major rewrite in v4.0.1-16, would you be interested in giving this another look?

The API has changed a little, I've updated the instructions on this DEV article:

Create a Vite-React Chrome Extension in 90 seconds - DEV Community 👩‍💻👨‍💻

DaPotatoMan · 2022-02-23T07:33:45Z

@jacksteamdev With v4.0.1-16 pnpm dev works but fails to build.

> Executing task in folder demo: pnpm run build <


> demo@0.0.0 build X:\Projects\demo
> vite build

vite v2.8.4 building for production...
✓ 16 modules transformed.
rendering chunks (4)...[vite:build-html] The "fileName" or "name" properties of emitted files must be strings that are 
neither absolute nor relative paths, received "../../../X:\Projects\demo\index.html".
error during build:
Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "../../../X:\Projects\demo\index.html".
    at error (X:\Projects\demo\node_modules\.pnpm\registry.npmjs.org+rollup@2.68.0\node_modules\rollup\dist\shared\rollup.js:159:30)
    at FileEmitter.emitFile (X:\Projects\demo\node_modules\.pnpm\registry.npmjs.org+rollup@2.68.0\node_modules\rollup\dist\shared\rollup.js:15476:24)
    at Object.generateBundle (X:\Projects\demo\node_modules\.pnpm\registry.npmjs.org+vite@2.8.4\node_modules\vite\dist\node\chunks\dep-971d9e33.js:21679:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 ELIFECYCLE  Command failed with exit code 1.
The terminal process "C:\Program Files\PowerShell\7\pwsh.exe -Command pnpm run build" terminated with exit code: 1.

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { chromeExtension } from "rollup-plugin-chrome-extension";
import manifest from './manifest.json'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), chromeExtension({ manifest })],
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

manifest.json

{
  "manifest_version": 3,
  "name": "Rpce React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

pietrofxq · 2022-02-24T23:35:43Z

I am having the same issue on Windows 10, can't build our chrome extension in my new machine :(

keyeightysix · 2022-02-25T16:09:06Z

@jacksteamdev With v4.0.1-16 pnpm dev works but fails to build.

> Executing task in folder demo: pnpm run build <


> demo@0.0.0 build X:\Projects\demo
> vite build

vite v2.8.4 building for production...
✓ 16 modules transformed.
rendering chunks (4)...[vite:build-html] The "fileName" or "name" properties of emitted files must be strings that are 
neither absolute nor relative paths, received "../../../X:\Projects\demo\index.html".
error during build:
Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "../../../X:\Projects\demo\index.html".
    at error (X:\Projects\demo\node_modules\.pnpm\registry.npmjs.org+rollup@2.68.0\node_modules\rollup\dist\shared\rollup.js:159:30)
    at FileEmitter.emitFile (X:\Projects\demo\node_modules\.pnpm\registry.npmjs.org+rollup@2.68.0\node_modules\rollup\dist\shared\rollup.js:15476:24)
    at Object.generateBundle (X:\Projects\demo\node_modules\.pnpm\registry.npmjs.org+vite@2.8.4\node_modules\vite\dist\node\chunks\dep-971d9e33.js:21679:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 ELIFECYCLE  Command failed with exit code 1.
The terminal process "C:\Program Files\PowerShell\7\pwsh.exe -Command pnpm run build" terminated with exit code: 1.

vite.config.ts
index.html
manifest.json

I also have the exact same output, on Windows and using the same files as this comment. I'm on latest version 4.0.1-16.

I'm totally plucking at straws here but looking at path.d.ts and searching basename within the plugin was where my rabbit hole stopped. It does look like everything is there to be normalising paths for windows but it's not happening.

Not an issue from this project but looks related. storybookjs/builder-vite#31 (comment)

Windows path issue.

jacksteamdev · 2022-02-25T23:30:36Z

@DaPotatoMan @pietrofxq @keyeightysix Thanks for the feedback!

keyeightysix · 2022-02-26T03:35:05Z

@DaPotatoMan @pietrofxq @keyeightysix Thanks for the feedback!

No problem at all @jacksteamdev. I was really surprised and happy to find this project only yesterday after a few weeks of extension land.

If there's anything I can do to help debug this issue let me know.

Stumblinbear · 2022-03-20T05:04:40Z

Also running into this issue--any luck on a workaround?

lionelhorn · 2022-03-21T00:05:15Z

rendering chunks (6)...[vite:build-html] The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "../../ ../../../

I'm also experiencing this issue.
With version 4.0.1-18.
vite v2.8.6

Same code working properly via WSL.

DaPotatoMan · 2022-03-21T04:56:31Z

@Stumblinbear @lionelhorn There's a workaround if you modify a local vite file (in node_modules).
Try to search for this line and change the code to: (You will find the file in your build error log)

this.emitFile({
  type: 'asset',
  fileName: path.basename(shortEmitName),
  source: result
})

It's an internal vite issue. I have created an issue here.

DaPotatoMan · 2022-04-10T13:47:57Z

@jacksteamdev Looks like this issue is fixed by #7383 in Vite 2.9.0. Both the dev and build command is working correctly.

jacksteamdev added the bug Something isn't working label Jan 26, 2022

Wombarly mentioned this issue Feb 3, 2022

Stuck at "Building Chrome Extension files..." #198

Closed

2 tasks

jacksteamdev added the vite-plugin Related to Vite plugin label Feb 6, 2022

This was referenced Mar 21, 2022

Error: EISDIR: illegal operation on a directory, read when running rollup -c #186

Closed

Content-script HMR works only for css #254

Closed

jacksteamdev added the windows Windows compatibility issue label Apr 5, 2022

jacksteamdev closed this as completed Apr 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does not work on Windows #137

Does not work on Windows #137

onikienko commented Dec 16, 2021 •

edited

onikienko commented Dec 16, 2021

jacksteamdev commented Dec 16, 2021 •

edited

jacksteamdev commented Dec 16, 2021

onikienko commented Dec 17, 2021 •

edited

jacksteamdev commented Dec 17, 2021 •

edited

onikienko commented Dec 18, 2021

jacksteamdev commented Dec 18, 2021

onikienko commented Dec 21, 2021 •

edited

jacksteamdev commented Dec 22, 2021

jacksteamdev commented Dec 22, 2021

onikienko commented Dec 22, 2021

Dimirolz commented Jan 16, 2022 •

edited

jacksteamdev commented Jan 18, 2022

jacksteamdev commented Feb 20, 2022

DaPotatoMan commented Feb 23, 2022

pietrofxq commented Feb 24, 2022

keyeightysix commented Feb 25, 2022 •

edited

jacksteamdev commented Feb 25, 2022

keyeightysix commented Feb 26, 2022

Stumblinbear commented Mar 20, 2022

lionelhorn commented Mar 21, 2022 •

edited

DaPotatoMan commented Mar 21, 2022 •

edited

DaPotatoMan commented Apr 10, 2022

Does not work on Windows #137

Does not work on Windows #137

Comments

onikienko commented Dec 16, 2021 • edited

Build tool

Where do you see the problem?

Describe the bug

Reproduction

Logs

System Info

Severity

onikienko commented Dec 16, 2021

jacksteamdev commented Dec 16, 2021 • edited

jacksteamdev commented Dec 16, 2021

XState Viz

onikienko commented Dec 17, 2021 • edited

jacksteamdev commented Dec 17, 2021 • edited

onikienko commented Dec 18, 2021

jacksteamdev commented Dec 18, 2021

onikienko commented Dec 21, 2021 • edited

jacksteamdev commented Dec 22, 2021

jacksteamdev commented Dec 22, 2021

onikienko commented Dec 22, 2021

Dimirolz commented Jan 16, 2022 • edited

jacksteamdev commented Jan 18, 2022

jacksteamdev commented Feb 20, 2022

DaPotatoMan commented Feb 23, 2022

pietrofxq commented Feb 24, 2022

keyeightysix commented Feb 25, 2022 • edited

jacksteamdev commented Feb 25, 2022

keyeightysix commented Feb 26, 2022

Stumblinbear commented Mar 20, 2022

lionelhorn commented Mar 21, 2022 • edited

DaPotatoMan commented Mar 21, 2022 • edited

DaPotatoMan commented Apr 10, 2022

onikienko commented Dec 16, 2021 •

edited

jacksteamdev commented Dec 16, 2021 •

edited

onikienko commented Dec 17, 2021 •

edited

jacksteamdev commented Dec 17, 2021 •

edited

onikienko commented Dec 21, 2021 •

edited

Dimirolz commented Jan 16, 2022 •

edited

keyeightysix commented Feb 25, 2022 •

edited

lionelhorn commented Mar 21, 2022 •

edited

DaPotatoMan commented Mar 21, 2022 •

edited