ParserError从`import type { User }`针对Svelte应用程序发生。

huangapple go评论63阅读模式
英文:

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.

英文:

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.

答案1

得分: 0

问题在于我使用了 rollup 来构建应用程序,但我应该使用 tailwindcss

修复方法是更改 package.json 文件中的 scripts 命令,以反映需要使用 tailwindcss,如下所示:

// Package.json 文件
...
  "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"
  },
...
英文:

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

huangapple
  • 本文由 发表于 2023年5月21日 05:25:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76297404.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定