search

Kocal / vue-web-extension

🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
https://vue-web-extension.netlify.app/
MIT License
1.57k stars 167 forks source link

Error running freshly created project #677

Open luixal opened 2 years ago

luixal commented 2 years ago

Describe the bug It's impossible to run a new extension/project just created.

To Reproduce Steps to reproduce the behavior:

  1. Create a new extension using the command provided in the doc
vue create --preset kocal/vue-web-extension todo-txt-nmx
  1. Pick some options (these are the last one, I've tried different ones):
@vue/cli-plugin-eslint
? Pick an ESLint config: Basic
? Pick additional lint features: 

vue-cli-plugin-browser-extension
? Which browser extension components do you wish to generate? background, popup, options, content scripts, override, standalone
? Generate a new signing key (danger)? No

Preset options:
? Install axios? Yes
  1. When the creation ends, it already throws some errors about unused vars, like this one:
⚓  Running completion hooks...
error: 'request' is defined but never used (no-unused-vars) at todo-txt-nmx/src/background.js:1:49:
> 1 | browser.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    |                                                 ^
  2 |   console.log('Hello from the background')
  3 |
  4 |   browser.tabs.executeScript({

but if you go into the created dir and try to run or build with npm run serve you get the following errors:

> todo-txt-nmx@0.1.0 serve
> vue-cli-service build --mode development --watch

⠙  Building for development...[ Starting the Hot Extension Reload Server... ]
⠹  Building for development...Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/myuser/dev/todo-txt-nmx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
⠼  Building for development.../home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:114
            throw e;
            ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/myuser/dev/todo-txt-nmx/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/home/myuser/dev/todo-txt-nmx/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/myuser/dev/todo-txt-nmx/node_modules/cache-loader/dist/index.js:147:7
    at /home/myuser/dev/todo-txt-nmx/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Expected behavior A fresh extension to be created in the dist dir to load it in Chrome :)

Screenshots Have none.

Desktop (please complete the following information):

Additional context Not sure if it's important but, when running and npm list vue to check vue's version in the project, it shows 2.6.14 and package.json file shows this "vue": "^2.6.11". Shouldn't it be v3?

symonxdd commented 2 years ago

I just started to work with this Vue CLI Preset (on Windows 11) and have no errors like you. The only errors I'm getting are the ones from ESLints rule no-unused-vars, which is configurable. I, myself have it disabled.

I think it might be an OS-issue.