Question 15292 in Laravel Question posted in
The official Laravel Documentation can be found here.

laravel vite `npm run build` issue

I am working on a laravel10 / vue3 project. i use npm run dev to compile the assets and everything seems to work fine.
i tried to run npm run build for the first time and i got this error:

[vite]: Rollup failed to resolve import "/icons/coreui.svg" from "C:/xampp/htdocs/project/resources/js/layouts/Product/Update.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "/icons/coreui.svg" from "C:/xampp/htdocs/project/resources/js/layouts/Product/Create.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

when i run npm run dev i dont get this error and the icon get displayed correctly.

<svg class="me-1 mb-1" width="20" height="20">
    <use xlink:href="/icons/coreui.svg#cil-save"></use>
</svg>

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';


export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/sass/style.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});

Edit:
the icon is located in the public laravel directory public/icons/coreui.svg

Tags:

2

Answers


  1. 0

    Since the coreui.svg file is located in the public/icons/ directory. When you import the file in your Vue components, you should use a relative path like
    ../public/icons/coreui.svg

    <svg class="me-1 mb-1" width="20" height="20">
  <use xlink:href="../public/icons/coreui.svg#cil-save"></use>
</svg>
    Login or Signup to reply.
  2. 0

    You can resolve the issue by changing vite.config js. When you config vue template compiler in vite.config.js, Please try to add the option "transformAssetUrls".

    This option is used to configure how the compiler handles URLs in the templates.

    For example, like this:

    vue({
   template: {
       transformAssetUrls: {
           base: null,
           includeAbsolute: false,
       },
   },
}),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search