Error running freshly created project

[luixal]

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

2. 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

3. 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):

• vue-web-extension version: latest
• OS: EndevourOS (Linux Arch based)
• Node.js version: 17.3.0

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]

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.