Vite doenst found images and libraries in production,but works fine in dev #19149

ejgutierrez74 · 2025-01-06T21:23:25Z

Describe the bug

My structure of project:

So everything works fine in dev, static images, and libraries js also static working fine. In production gives errors.
for example p5 library not found, when you go in dev it loads and works fine...i had to install p2 library via npm install p5

But im facing this error:


Oops! 
error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 693, … }

bubbles: false

cancelBubble: false

cancelable: false

composed: false

currentTarget: null

defaultPrevented: false

eventPhase: 0

explicitOriginalTarget: <img crossorigin="Anonymous" src="/img/roca.png">

accessKey: ""

accessKeyLabel: ""

align: ""

alt: ""

ariaAtomic: null

ariaAutoComplete: null

ariaBrailleLabel: null

ariaBrailleRoleDescription: null

ariaBusy: null

ariaChecked: null

ariaColCount: null

ariaColIndex: null

ariaColIndexText: null

ariaColSpan: null

ariaCurrent: null

ariaDescription: null

ariaDisabled: null

ariaExpanded: null

ariaHasPopup: null

ariaHidden: null

ariaInvalid: null

ariaKeyShortcuts: null

ariaLabel: null

ariaLevel: null

ariaLive: null

ariaModal: null

ariaMultiLine: null

ariaMultiSelectable: null

ariaOrientation: null

ariaPlaceholder: null

ariaPosInSet: null

ariaPressed: null

ariaReadOnly: null

ariaRelevant: null

ariaRequired: null

ariaRoleDescription: null

ariaRowCount: null

ariaRowIndex: null

ariaRowIndexText: null

ariaRowSpan: null

ariaSelected: null

ariaSetSize: null

ariaSort: null

ariaValueMax: null

ariaValueMin: null

ariaValueNow: null

ariaValueText: null

assignedSlot: null

attributes: NamedNodeMap [ crossorigin="Anonymous", src="/img/roca.png" ]

autocapitalize: ""

autofocus: false

baseURI: "http://localhost:4173/"

border: ""

childElementCount: 0

childNodes: NodeList []

children: HTMLCollection { length: 0 }

length: 0

<prototype>: HTMLCollectionPrototype { item: item(), namedItem: namedItem(), length: Getter, … }

classList: DOMTokenList []

length: 0

value: ""

<prototype>: DOMTokenListPrototype { item: item(), contains: contains(), add: add(), … }

add: function add()

constructor: function DOMTokenList()

contains: function contains()

entries: function entries()

forEach: function forEach()

item: function item()

keys: function keys()

length: 

remove: function remove()

replace: function replace()

supports: function supports()

toString: function toString()

toggle: function toggle()

value: 

values: function values()

Symbol(Symbol.iterator): function values()

Symbol(Symbol.toStringTag): "DOMTokenList"

<get length()>: function length()

<get value()>: function value()

<set value()>: function value()

<prototype>: Object { … }

className: ""

clientHeight: 0

clientLeft: 0

clientTop: 0

clientWidth: 0

complete: true

contentEditable: "inherit"

crossOrigin: "anonymous"

currentCSSZoom: 1

currentSrc: "http://localhost:4173/img/roca.png"

dataset: DOMStringMap(0)

decoding: "auto"

dir: ""

draggable: true

enterKeyHint: ""

fetchPriority: "auto"

firstChild: null

firstElementChild: null

height: 0

hidden: false

hspace: 0

id: ""

inert: false

innerHTML: ""

innerText: ""

inputMode: ""

isConnected: false

isContentEditable: false

isMap: false

lang: ""

lastChild: null

lastElementChild: null

loading: "eager"

localName: "img"

longDesc: ""

lowsrc: ""

name: ""

namespaceURI: "http://www.w3.org/1999/xhtml"

naturalHeight: 0

naturalWidth: 0

nextElementSibling: null

nextSibling: null

nodeName: "IMG"

nodeType: 1

nodeValue: null

nonce: ""

offsetHeight: 0

offsetLeft: 0

offsetParent: null

offsetTop: 0

offsetWidth: 0

onabort: null

onanimationcancel: null

onanimationend: null

onanimationiteration: null

onanimationstart: null

onauxclick: null

onbeforeinput: null

onbeforetoggle: null

onblur: null

oncancel: null

oncanplay: null

oncanplaythrough: null

onchange: null

onclick: null

onclose: null

oncontentvisibilityautostatechange: null

oncontextlost: null

oncontextmenu: null

oncontextrestored: null

oncopy: null

oncuechange: null

oncut: null

ondblclick: null

ondrag: null

ondragend: null

ondragenter: null

ondragexit: null

ondragleave: null

ondragover: null

ondragstart: null

ondrop: null

ondurationchange: null

onemptied: null

onended: null

onerror: function onerror(T)

onfocus: null

onformdata: null

onfullscreenchange: null

onfullscreenerror: null

ongotpointercapture: null

oninput: null

oninvalid: null

onkeydown: null

onkeypress: null

onkeyup: null

onload: function ()

onloadeddata: null

onloadedmetadata: null

onloadstart: null

onlostpointercapture: null

onmousedown: null

onmousemove: null

onmouseout: null

onmouseover: null

onmouseup: null

onpaste: null

onpause: null

onplay: null

onplaying: null

onpointercancel: null

onpointerdown: null

onpointerenter: null

onpointerleave: null

onpointermove: null

onpointerout: null

onpointerover: null

onpointerup: null

onprogress: null

onratechange: null

onreset: null

onresize: null

onscroll: null

onscrollend: null

onsecuritypolicyviolation: null

onseeked: null

onseeking: null

onselect: null

onselectionchange: null

onselectstart: null

onslotchange: null

onstalled: null

onsubmit: null

onsuspend: null

ontimeupdate: null

ontoggle: null

ontransitioncancel: null

ontransitionend: null

ontransitionrun: null

ontransitionstart: null

onvolumechange: null

onwaiting: null

onwebkitanimationend: null

onwebkitanimationiteration: null

onwebkitanimationstart: null

onwebkittransitionend: null

onwheel: null

outerHTML: '<img crossorigin="Anonymous" src="/img/roca.png">'

outerText: ""

ownerDocument: HTMLDocument http://localhost:4173/

parentElement: null

parentNode: null

part: DOMTokenList []

popover: null

prefix: null

previousElementSibling: null

previousSibling: null

referrerPolicy: ""

role: null

scrollHeight: 0

scrollLeft: 0

scrollLeftMax: 0

scrollTop: 0

scrollTopMax: 0

scrollWidth: 0

shadowRoot: null

sizes: ""

slot: ""

spellcheck: false

src: "http://localhost:4173/img/roca.png"

srcset: ""

style: CSS2Properties(0)

tabIndex: -1

tagName: "IMG"

textContent: ""

title: ""

translate: true

useMap: ""

vspace: 0

width: 0

x: 0

y: 0

<prototype>: HTMLImageElementPrototype { decode: decode(), alt: Getter & Setter, src: Getter & Setter, … }

isTrusted: true

originalTarget: <img crossorigin="Anonymous" src="/img/roca.png">

returnValue: true

srcElement: <img crossorigin="Anonymous" src="/img/roca.png">

target: <img crossorigin="Anonymous" src="/img/roca.png">

accessKey: ""

accessKeyLabel: ""

align: ""

alt: ""

ariaAtomic: null

ariaAutoComplete: null

ariaBrailleLabel: null

ariaBrailleRoleDescription: null

ariaBusy: null

ariaChecked: null

ariaColCount: null

ariaColIndex: null

ariaColIndexText: null

ariaColSpan: null

ariaCurrent: null

ariaDescription: null

ariaDisabled: null

ariaExpanded: null

ariaHasPopup: null

ariaHidden: null

ariaInvalid: null

ariaKeyShortcuts: null

ariaLabel: null

ariaLevel: null

ariaLive: null

ariaModal: null

ariaMultiLine: null

ariaMultiSelectable: null

ariaOrientation: null

ariaPlaceholder: null

ariaPosInSet: null

ariaPressed: null

ariaReadOnly: null

ariaRelevant: null

ariaRequired: null

ariaRoleDescription: null

ariaRowCount: null

ariaRowIndex: null

ariaRowIndexText: null

ariaRowSpan: null

ariaSelected: null

ariaSetSize: null

ariaSort: null

ariaValueMax: null

ariaValueMin: null

ariaValueNow: null

ariaValueText: null

assignedSlot: null

attributes: NamedNodeMap [ crossorigin="Anonymous", src="/img/roca.png" ]

autocapitalize: ""

autofocus: false

baseURI: "http://localhost:4173/"

border: ""

childElementCount: 0

childNodes: NodeList []

children: HTMLCollection { length: 0 }

classList: DOMTokenList []

className: ""

clientHeight: 0

clientLeft: 0

clientTop: 0

clientWidth: 0

complete: true

contentEditable: "inherit"

crossOrigin: "anonymous"

currentCSSZoom: 1

currentSrc: "http://localhost:4173/img/roca.png"

dataset: DOMStringMap(0)

decoding: "auto"

dir: ""

draggable: true

enterKeyHint: ""

fetchPriority: "auto"

firstChild: null

firstElementChild: null

height: 0

hidden: false

hspace: 0

id: ""

inert: false

innerHTML: ""

innerText: ""

inputMode: ""

isConnected: false

isContentEditable: false

isMap: false

lang: ""

lastChild: null

lastElementChild: null

loading: "eager"

localName: "img"

longDesc: ""

lowsrc: ""

name: ""

namespaceURI: "http://www.w3.org/1999/xhtml"

naturalHeight: 0

naturalWidth: 0

nextElementSibling: null

nextSibling: null

nodeName: "IMG"

nodeType: 1

nodeValue: null

nonce: ""

offsetHeight: 0

offsetLeft: 0

offsetParent: null

offsetTop: 0

offsetWidth: 0

onabort: null

onanimationcancel: null

onanimationend: null

onanimationiteration: null

onanimationstart: null

onauxclick: null

onbeforeinput: null

onbeforetoggle: null

onblur: null

oncancel: null

oncanplay: null

oncanplaythrough: null

onchange: null

onclick: null

onclose: null

oncontentvisibilityautostatechange: null

oncontextlost: null

oncontextmenu: null

oncontextrestored: null

oncopy: null

oncuechange: null

oncut: null

ondblclick: null

ondrag: null

ondragend: null

ondragenter: null

ondragexit: null

ondragleave: null

ondragover: null

ondragstart: null

ondrop: null

ondurationchange: null

onemptied: null

onended: null

onerror: function onerror(T)

onfocus: null

onformdata: null

onfullscreenchange: null

onfullscreenerror: null

ongotpointercapture: null

oninput: null

oninvalid: null

onkeydown: null

onkeypress: null

onkeyup: null

onload: function ()

onloadeddata: null

onloadedmetadata: null

onloadstart: null

onlostpointercapture: null

onmousedown: null

onmousemove: null

onmouseout: null

onmouseover: null

onmouseup: null

onpaste: null

onpause: null

onplay: null

onplaying: null

onpointercancel: null

onpointerdown: null

onpointerenter: null

onpointerleave: null

onpointermove: null

onpointerout: null

onpointerover: null

onpointerup: null

onprogress: null

onratechange: null

onreset: null

onresize: null

onscroll: null

onscrollend: null

onsecuritypolicyviolation: null

onseeked: null

onseeking: null

onselect: null

onselectionchange: null

onselectstart: null

onslotchange: null

onstalled: null

onsubmit: null

onsuspend: null

ontimeupdate: null

ontoggle: null

ontransitioncancel: null

ontransitionend: null

ontransitionrun: null

ontransitionstart: null

onvolumechange: null

onwaiting: null

onwebkitanimationend: null

onwebkitanimationiteration: null

onwebkitanimationstart: null

onwebkittransitionend: null

onwheel: null

outerHTML: '<img crossorigin="Anonymous" src="/img/roca.png">'

outerText: ""

ownerDocument: HTMLDocument http://localhost:4173/

parentElement: null

parentNode: null

part: DOMTokenList []

popover: null

prefix: null

previousElementSibling: null

previousSibling: null

referrerPolicy: ""

role: null

scrollHeight: 0

scrollLeft: 0

scrollLeftMax: 0

scrollTop: 0

scrollTopMax: 0

scrollWidth: 0

shadowRoot: null

sizes: ""

slot: ""

spellcheck: false

src: "http://localhost:4173/img/roca.png"

srcset: ""

style: CSS2Properties(0)

tabIndex: -1

tagName: "IMG"

textContent: ""

title: ""

translate: true

useMap: ""

vspace: 0

width: 0

x: 0

y: 0

<prototype>: HTMLImageElementPrototype { decode: decode(), alt: Getter & Setter, src: Getter & Setter, … }

timeStamp: 693

type: "error"

<get isTrusted()>: function isTrusted()

<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }
[index-Cbhj6MZa.js:1776:35661](http://localhost:4173/assets/index-Cbhj6MZa.js)
    Hl http://localhost:4173/assets/index-Cbhj6MZa.js:1776
    onerror http://localhost:4173/assets/index-Cbhj6MZa.js:15

I think is only because is the first image, the rest images of icons are not whown properly...

Example with preview build:

Exmaple in dev:

Also i added some kind of configurations to let Vite show files and folders outside the public directory:
The main problem is that Vite is not working well with setup of files outside the folder public.
Id like as a educational purpose to maintein the structure of the project, and not creating a public folder and move libraries of js and images to it...

Also tried tweking vite.config.js and also adding a new plugin-- viteStaticPlugin


import { defineConfig } from 'vite';
import viteStaticPlugin from 'vite-plugin-static';

export default defineConfig({
    plugins: [
        viteStaticPlugin({
            dir: 'js/libraries',
            base: '/js/libraries/',
        }),
        viteStaticPlugin({
            dir: 'img/chatbot/assistanticons',
            base: '/img/chatbot/assistanticons/',
        }),
        viteStaticPlugin({
            dir: 'img/chatbot/usericons',
            base: '/img/chatbot/usericons/',
        }),
        viteStaticPlugin({
            dir: 'img/chatbot',
            base: '/img/chatbot/',
        }),
    ],
});

Reproduction

meu-pacman-chatbot-pzn3moxhz-ejgutierrez74s-projects.vercel.app

Steps to reproduce

Run pnpm build and pnpm serve

Images and libraries outside the public folder doenst shown
Links and code should be ok as in dev mode is working all fine.

System Info

Ubuntu 24.04
Firefox latest version
Vite 6.0.6

Used Package Manager

pnpm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

github-actions · 2025-01-06T23:50:46Z

Hello @ejgutierrez74. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

ejgutierrez74 · 2025-01-07T11:17:37Z

https://github.com/ejgutierrez74/pacman-chatbot

Is a private repository if anybody needs access let me know ( im a teacher and students can get a copy of the code and thats not nice ;) )

Also tried with vite.config.js

export default defineConfig({
  base: '/',
});

ejgutierrez74 added the pending triage label Jan 6, 2025

hi-ogawa added the needs reproduction label Jan 6, 2025

github-actions bot removed the pending triage label Jan 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite doenst found images and libraries in production,but works fine in dev #19149

Vite doenst found images and libraries in production,but works fine in dev #19149

ejgutierrez74 commented Jan 6, 2025 •

edited

Loading

github-actions bot commented Jan 6, 2025

ejgutierrez74 commented Jan 7, 2025 •

edited

Loading

Vite doenst found images and libraries in production,but works fine in dev #19149

Vite doenst found images and libraries in production,but works fine in dev #19149

Comments

ejgutierrez74 commented Jan 6, 2025 • edited Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

github-actions bot commented Jan 6, 2025

ejgutierrez74 commented Jan 7, 2025 • edited Loading

ejgutierrez74 commented Jan 6, 2025 •

edited

Loading

ejgutierrez74 commented Jan 7, 2025 •

edited

Loading