Search code examples
node.jsgoogle-chromevitebrowser-extension

CRXJS Error: Path contains invalid characters when running chrome extension

I cloned the chrome extension quickstart from this site, however I am unable to run it after installing the dependencies (with yarn). I am using Node 16 via NVM as Node-Gyp was giving some installation errors on Node 18. When I run "yarn dev" I get the following output after Vite initializes the local dev server:

PS C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3> yarn dev
yarn run v1.22.19
warning ..\package.json: No license field
$ run-s clean && vite
warning ..\package.json: No license field
$ run-p clean:*
warning ..\package.json: No license field
warning ..\package.json: No license field
$ rimraf dist
$ rimraf dist-firefox-v2

  VITE v4.3.9  ready in 881 ms        

  ➜  Local:   http://127.0.0.1:5173/  
  ➜  Network: use --host to expose    
  ➜  press h to show help
C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\node_modules\@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\utils.js:16   
      const error = new Error(`Path contains invalid characters: ${pth}`)   
                    ^

Error: Path contains invalid characters: C:/Users/kking/OneDrive/Documents/code/Client Projects/refine3/refine-v3/src/C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\dist/content
    at checkPath (C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\node_modules\@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\utils.js:16:21)
    at Object.module.exports.makeDir (C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\node_modules\@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\make-dir.js:12:3)
    at Object.defineProperty.value (C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\node_modules\universalify\index.js:22:13)  
    at C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\node_modules\@crxjs\vite-plugin\node_modules\fs-extra\lib\output-file\index.js:20:11
    at C:\Users\kking\OneDrive\Documents\code\Client Projects\refine3\refine-v3\node_modules\universalify\index.js:22:54 {
  code: 'EINVAL'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I initially thought the issue was due to running from a Onedrive-synced folder, so I ran it from a different folder but had the same result. I have looked through the issues on CRXJS's repo, Vite's repo, and the repo for this quickstart but have not been able to find any posted issues mentioning this problem. repo

Solution

  • For anyone from the future viewing this, dont use that sites "quickstart" template. Just follow the official CRXJS documentation here