Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected token error with latest svelte-preprocess v5 #178

Closed
ginpei opened this issue Apr 10, 2023 · 2 comments
Closed

Unexpected token error with latest svelte-preprocess v5 #178

ginpei opened this issue Apr 10, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@ginpei
Copy link

ginpei commented Apr 10, 2023

Describe the bug
esbuild-svelte started throwing errors after upgrading svelte-preprocess and TypeScript (I upgraded both for peer deps conflict)

$ node build.js 
✘ [ERROR] Unexpected token [plugin esbuild-svelte]

    MyComponent.svelte:2:13:
      2 │ 1: <script type="typescript">
        ╵              ^

2:   import type { Foo } from './foo';
                 ^
3: 
4:   const foo: Foo = 'bar';

  The plugin "esbuild-svelte" was triggered by this import

    index.ts:1:24:
      1 │ import MyComponent from './MyComponent.svelte';
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~

To Reproduce

Run the build script where the followings are installed

package.json

{
  "private": true,
  "dependencies": {
    "esbuild": "^0.17.16",
    "esbuild-svelte": "^0.7.3",
    "svelte": "^3.58.0",
    "svelte-preprocess": "^5.0.3",
    "typescript": "^5.0.4"
  }
}

(I confirmed the lock file tells the save versions.)

build.js

const esbuild = require('esbuild');
const esbuildSvelte = require('esbuild-svelte');
const path = require('path');
const sveltePreprocess = require('svelte-preprocess');

esbuild
  .build({
    entryPoints: [path.resolve(__dirname, './index.ts')],
    mainFields: ['svelte', 'browser', 'module', 'main'],
    bundle: true,
    outdir: path.resolve(__dirname, './dist'),
    plugins: [
      esbuildSvelte({
        preprocess: sveltePreprocess(),
      }),
    ],
  })
  .catch(() => process.exit(1));

MyComponent.svelte

<script type="typescript">
  import type { Foo } from './foo';

Expected behavior

Compile them as well as recent versions

Screenshots

N/A

Environment (please complete the following information):

  • esbuild-svelte version: 0.7.3
  • esbuild version: 0.17.16
  • Svelte preprocessors used (if any): 5.0.3

Additional context

  • It works with previous versions: svelte-preprocess v4.10.7 and TypeScript v4.9.5
  • Importing values works. Only type seems problematic
  • Tried on Node.js v16.19.1, v18.15.0
@ginpei ginpei added the bug Something isn't working label Apr 10, 2023
@EMH333
Copy link
Owner

EMH333 commented Apr 10, 2023

Please note the svelte-preprocess release notes for version 5.0.0. The most relevant change is:

Cannot use "type" attribute to identify the language of a style or script tag anymore. Use lang instead

@EMH333 EMH333 closed this as not planned Won't fix, can't repro, duplicate, stale Apr 10, 2023
@ginpei
Copy link
Author

ginpei commented Apr 10, 2023

Perfect. Thank you!

-<script type="typescript">
+<script lang="typescript">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants