Skip to content

natalie-o-perret/primevue-poc

Repository files navigation

Vue 3 + Typescript + Vite + PrimeVue: localhost build issue reproduction

So far installing packages is good:

$ yarn
yarn install v1.22.10
warning package.json: No license field
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix 
package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning my-vue-app@0.0.0: No license field
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.18s.

Developping as well:

$ yarn dev
yarn run v1.22.10
warning package.json: No license field
$ vite

  vite v2.1.5 dev server running at:

  > Network:  http://192.168.0.10:3000/
  > Local:    http://localhost:3000/
  > Network:  http://172.17.128.1:3000/

  ready in 373ms.

That being said, if the build command below also works:

$ yarn build
yarn run v1.22.10
warning package.json: No license field
$ vite build
vite v2.1.5 building for production...
✓ 34 modules transformed.
dist/assets/logo.03d6d6da.png                                   6.69kb
dist/assets/color.473bc8ca.png                                  10.11kb
dist/assets/roboto-v20-latin-ext_latin-regular.b86b128b.woff2   22.11kb
dist/assets/primeicons.7362b83d.eot                             56.21kb
dist/assets/roboto-v20-latin-ext_latin-500.fa074f87.woff2       22.20kb
dist/assets/roboto-v20-latin-ext_latin-700.8d9364a0.woff2       22.19kb
dist/assets/roboto-v20-latin-ext_latin-regular.e70a908b.woff    28.36kb
dist/assets/roboto-v20-latin-ext_latin-500.d092ad8e.woff        28.39kb
dist/assets/roboto-v20-latin-ext_latin-700.e24c2752.woff        28.41kb
dist/assets/primeicons.c1e93246.ttf                             56.04kb
dist/assets/primeicons.3929b551.woff                            56.11kb
dist/assets/primeicons.8f9d2aaf.svg                             229.14kb
dist/index.html                                                 0.47kb
dist/assets/About.17af8924.js                                   0.19kb / brotli: 0.14kb
dist/assets/index.e5d45779.js                                   3.63kb / brotli: 1.52kb
dist/assets/vendor.9f2b5e0c.js                                  90.90kb / brotli: 29.73kb
dist/assets/index.6f411dd0.css                                  226.74kb / brotli: 20.14kb
Done in 6.26s.

I can't find the relevant Vite options to generate a simple unified bundle:

.\dist\index.html

In the dev tools, you'll notice:

Access to script at 'file:///C:/assets/vendor.9f2b5e0c.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
vendor.9f2b5e0c.js:1 Failed to load resource: net::ERR_FAILED
index.html:1 Access to script at 'file:///C:/assets/index.e5d45779.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
index.e5d45779.js:1 Failed to load resource: net::ERR_FAILED
index.6f411dd0.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/C:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

Issue Resolution

See my answer on SO: https://stackoverflow.com/a/67031599/4636721