0

I'm new to svelte and I'm trying to use it in my existing project following this tutorial. So in svelte's main.js I outputs css and js like this:

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: '/path/to/myapp/static/js/svelte-bundle.js'
    },
    plugins: [
        svelte({
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production
            }
        }),
        // we'll extract any component CSS out into
        // a separate file - better for performance
        css({
            output: '/path/to/myapp/static/css/svelte-bundle.css'
        }),

However after npm run dev I get this error:

[email protected] dev
rollup -c -w
rollup v2.56.3
bundles src/main.js → ../static/js/svelte-bundle.js...
[!] (plugin css) Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "/path/to/myapp/static/css/svelte-bundle.css".
Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "/path/to/myapp/static/css/svelte-bundle.css".
    at error (/path/to/myapp/svelte-components/node_modules/rollup/dist/shared/rollup.js:151:30)
    at FileEmitter.emitFile (/path/to/myapp/svelte-components/node_modules/rollup/dist/shared/rollup.js:13119:24)
    at Object.generateBundle (/path/to/myapp/svelte-components/node_modules/rollup-plugin-css-only/dist/index.cjs.js:84:12)
    at /path/to/myapp/svelte-components/node_modules/rollup/dist/shared/rollup.js:20218:25

I have also added the scripts to myapp's html:

<link href="/static/css/svelte-bundle.css" />
<script defer src="/static/js/svelte-bundle.js"></script>

Also in browser I get:

http://127.0.0.1:8080/static/svelte-bundle.js net::ERR_ABORTED 404 (Not Found)

Apprecite your help to fix this.

3
  • 1
    Try to use a relative filename for the css plugin like output: 'static/css/svelte-bundle.css'. Sep 10, 2021 at 14:35
  • This removes error, but now the bundes are created in /path/to/myapp/svelte-components/static/js instead of what I inteded which is /path/to/myapp/static/js and /path/to/myapp/static/css. How can I fix this?
    – MBH
    Sep 10, 2021 at 14:53
  • Weird I don't see any svelte-components in your rollup config. Do you have defined it somewhere in your code base? Sep 11, 2021 at 21:29

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.