tailwind-csssvelterollupparse-error

ParserError from `import type { User }` for Svelte app


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.


Solution

  • 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"
      },
    ...