Building with the node adapater fails

[trex0r]

When trying to build the project for production, using the node adapter, I get an error.

Steps to reproduce:

git clone https://github.com/akiarostami/sveltekit-tailwind-blog-starter
cd sveltekit-tailwind-blog-starter
npm install
npm i -D @sveltejs/adapter-node
# use import adapter from '@sveltejs/adapter-node'; in svelte.config.js instead of adapter-auto
npm run build

This results in the following error part way through the build process:

> Using @sveltejs/adapter-node
error during build:
RollupError: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
    at error (file:///home/user/Code/sveltekit/sveltekit-tailwind-blog-starter/node_modules/rollup/dist/es/shared/rollup.js:1967:30)
    at Module.error (file:///home/user/Code/sveltekit/sveltekit-tailwind-blog-starter/node_modules/rollup/dist/es/shared/rollup.js:12962:16)
    at Module.tryParse (file:///home/user/Code/sveltekit/sveltekit-tailwind-blog-starter/node_modules/rollup/dist/es/shared/rollup.js:13356:25)
    at Module.setSource (file:///home/user/Code/sveltekit/sveltekit-tailwind-blog-starter/node_modules/rollup/dist/es/shared/rollup.js:13247:39)
    at ModuleLoader.addModuleSource (file:///home/user/Code/sveltekit/sveltekit-tailwind-blog-starter/node_modules/rollup/dist/es/shared/rollup.js:22888:20)

If you are able to assist with this, I would really appreciate it. This project is great and has helped me a lot. Thanks for all the work you have put into it!

[akiarostami]

Hi @trex0r,

I've never used the node adapter, so I'm afraid I can't help you much. This code is supposed to be used as a reference, not actual code, since everyone's need and style is different.

Looking at the error, this seems to be a rollup setting issue, and (hopefully) not a code issue, so I'll move this to Discussion. I hope you can figure it out!

[trex0r]

Thanks for replying. I managed to narrow down the issue after a lot of trial and error! It seems that it is caused by the Resvg library. When commenting out import { Resvg } from '@resvg/resvg-js'; in src/routes/og/+server.js, the build succeeds! Since I don't need to use this library, I won't be investigating it further.

[akiarostami]

@trex0r,

Thank for pointing this out! After I made this template, I learned that I don't even need that package to use SVG files in Sveltekit. I can simply rename the svg file to svelte, and start using them! (I also had to remove the <?xml> tag).

I updated the code (and made a couple of other minor improvements) and removed the '@resvg/resvg-js' dependency, so you should be fine now.

[bartosjiri]

For anyone having this issue with the library while using the @sveltejs/adapter-node adapter in Svelte(Kit):

• Make sure to have the @resvg/resvg-js library installed as a dependency (not devDependency); package.json:

  {
    "scripts": {
      "build": "vite build",
    },
    "devDependencies": {
      "@sveltejs/adapter-node": "^1.2.3",
      "vite": "^4.2.0"
    },
    "dependencies": {
      "@resvg/resvg-js": "^2.4.1"
    },
    "type": "module"
  }

• Specify the @resvg/resvg-js library as external dependency in the vite.config.(js|ts) file:

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [
      sveltekit()
    ],
    build: {
      rollupOptions: {
        external: ['@resvg/resvg-js'],
      }
    }
  });

[akiarostami]

Thank you!
Since I made this, I've actually learned that there's actually a better way of using svg files in Svelte projects. Just rename the files from .svg to .svelte, and include them in your file. There's no need to resvg-js.

[bartosjiri]

Definitely, this was more aimed at the implementation of dynamically generated SVGs, e.g. when generating OG images (ref).

By the way, there's even easier solution for using regular SVGs in Svelte, without converting them into .svelte components:

<script>
  import {IconName} from "./path/to/source/file.svg?raw";
</script>

<div>
  {@html IconName}
</div>

The important part is adding ?raw at the end of the import path, that's it basically!