I'm running into the following ParseError: Unexpected token
error when trying to start up a Svelte application via the npm run dev
command:
$ npm run dev
> svelte-app@1.0.0 dev
> rollup -c -w
rollup v3.22.0
bundles src/main.js → public/build/bundle.js...
[!] (plugin svelte) ParseError: Unexpected token
src/App.svelte
4: import { supabase } from "$lib/db";
5: import Auth from "$lib/Auth.svelte";
6: import type { User } from "@supabase/supabase-js";
^
7: import Home from "$lib/Home.svelte";
Here is the package.json
file that I was using:
{
"name": "svelte-app",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^24.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
"@rollup/plugin-terser": "^0.4.0",
"@tsconfig/svelte": "^4.0.1",
"concurrently": "^8.0.1",
"rollup": "^3.15.0",
"rollup-plugin-css-only": "^4.3.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.1.2",
"svelte": "^3.59.1",
"svelte-check": "^3.3.2",
"svelte-hcaptcha": "^0.1.1",
"svelte-preprocess": "^5.0.3",
"tailwindcss": "^3.3.2",
"tslib": "^2.5.2",
"typescript": "^5.0.4",
"vite": "^4.3.8"
},
"dependencies": {
"@supabase/supabase-js": "^2.22.0",
"sirv-cli": "^2.0.0"
}
}
Please note that I've already found the root cause of the issue and resolved this error.
I will post the answer below in case it also helps anyone else who's running into a similar issue.
The problem was that I was using rollup
to build the application when I should have been using tailwindcss
.
The fix was to change the scripts
commands in the package.json
file to reflect the need to use tailwindcss
as shown below:
// Package.json file
...
"scripts": {
"dev": "concurrently \"npm run dev:css\" \"vite\"",
"dev:css": "tailwindcss -w -i ./src/tailwind.css -o src/assets/app.css",
"build": "npm run build:css && vite build",
"build:css": "tailwindcss -m -i ./src/tailwind.css -o src/app.css",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
...