Vue version

3.3.8

Link to minimal reproduction

https://github.com/elcolie/dojo-blog

Steps to reproduce

1. npm install
2. npm run serve
3. json-server --watch data/db.sjon (in another terminal)
4. Open browser to http://localhost:8080/tags/webdev

What is expected?

Expect filtered list are rendered

What is actually happening?

Chrome console shows.

runtime-core.esm-bundler.js:41 [Vue warn]: Failed to resolve component: PostList
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Tag tag="webdev" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

System Info

❯ node -v
v12.13.0
> Chrome is up to date
Version 119.0.6045.123 (Official Build) (arm64)

===========================
❯ npx envinfo --system --npmPackages vue --binaries --browsers
/usr/local/lib/node_modules/npm/node_modules/@npmcli/config/lib/definitions/definitions.js:2244
    const ciName = ciInfo.name?.toLowerCase().split(' ').join('-') || null
                               ^

SyntaxError: Unexpected token '.'
    at Module._compile (internal/modules/cjs/loader.js:892:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/@npmcli/config/lib/definitions/index.js:1:21)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)

Any additional comments?

I learn this project from Udemy

I just ran your repo and can't reproduce the error. A general note: you are running node 12, apparantly, which is very old, has reached EOl several years ago and is likely not supported by multiple packages that may be part of i.e. webpack or even our Vue compiler. That may be related.

The project setup based on webpack is also pretty outdated. New projects should likely use Vite. But if you use it to follow along your tutorial/course, that's fine. Just be aware that a "modern" setup looks different (see our docs)

@LinusBorg After I follow > npm create vue@latest

node: v20.9.0 OSX: Sonoma 14 Chrome is up to date Version 119.0.6045.123 (Official Build) (arm64)

I got new problem.

Uncaught ReferenceError: Cannot access 'PostList' before initialization at Tag.vue:26:26