'Invalid Character' error about esbuild-svelte HOT 14 CLOSED

Fixed as a part of v0.6.0 🎉

from esbuild-svelte.

@EMH333 I'm using svelte-preprocess like this:

{
	preprocess: sveltePreprocess({
		defaults: {
			script: 'ts',
			style: 'postcss',
		},
		sourceMap: !production,
		scss: {},
		typescript: {},
		postcss: true,
	}),
	compilerOptions: {
		// enable run-time checks when not in production
		dev: !production,
	},
}

and I get the error with production = false (ie. no source maps) as well. Same if I turn off source maps in the esbuild build arguments.

This esbuild-svelte plugin is the only plugin I'm using.

from esbuild-svelte.

Thank you @EMH333!

from esbuild-svelte.

Thanks for the report, is there any additional information you can give me? Right now I don't have a lot to go on to find the source.

Can you please list the preprocessors you are using, whether this still exists when you downgrade esbuild-svelte to 0.5.6 and anything else special about your environment?

Appears to be related to sveltejs/svelte#6714 which isn't a problem with esbuild-svelte specifically

from esbuild-svelte.

Version 0.5.6 working good. Just updated today to 0.5.7 & build is broken…🤷🏻‍♂️
Preprocessing only scss

from esbuild-svelte.

Alright, thank you. Does the issue linked above seem relevant to your setup (do you have any non-ASCII characters)?

from esbuild-svelte.

You can check this repo https://github.com/Valexr/Svectre

from esbuild-svelte.

I can get it to compile with the following patch:

diff --git a/src/App.svelte b/src/App.svelte
index a963753..8e3ef45 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -190,7 +190,7 @@
 </main>
 <footer class="container navbar py-2 depth depth-underground">
     <section class="navbar-section flex-centered">
-        <h5>© {new Date().getFullYear()} {name}</h5>
+        <h5> {new Date().getFullYear()} {name}</h5>
     </section>
 </footer>
 
@@ -257,7 +257,7 @@
         display: block;
         padding: var(--s1);
         border-width: var(--border-thin);
-        /* ↓ For high contrast mode */
+        /*  For high contrast mode */
         outline: var(--border-thin) solid;
         outline-offset: calc(var(--border-thin) * -1);
         color: currentColor;
diff --git a/src/Text.svelte b/src/Text.svelte
index 3e09d0a..f51690e 100644
--- a/src/Text.svelte
+++ b/src/Text.svelte
@@ -39,8 +39,8 @@
     </div>
     <div class="column col-6 col-xs-12">
         <ruby
-            >漢
-            <rt>kan</rt>字
+            >
+            <rt>kan</rt>
             <rt>ji</rt>
         </ruby><code class="ml-2">ruby</code>
     </div>

however I'm unable to replicate this on a new project (and have added tests to make sure esbuild-svelte can deal with non-ASCII characters)

from esbuild-svelte.

But in 0.5.6 it's compiling ok 🤷🏻‍♂️

from esbuild-svelte.

Hey, I run into the same issue on node 16 (but not node 14). I tried 0.5.6 and 0.5.7 and have the same issue on both.
The file that fails has no non-ASCII characters (in fact, none of the .svelte files have any non-ASCII characters)...unfortunately I can't post a full repro case, all I can do is add a data point at the moment.

 > src/components/checkout/Services.svelte:38:29: error: [plugin: esbuild-svelte] Invalid character
    38 │ import TransportSection from './TransportSection.svelte';
       ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error
/Users/tylerboyd/work/spurchases/node_modules/esbuild/lib/main.js:1493
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
src/components/checkout/Services.svelte:38:29: error: [plugin: esbuild-svelte] Invalid character
    at failureErrorWithLog (/Users/tylerboyd/work/spurchases/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/tylerboyd/work/spurchases/node_modules/esbuild/lib/main.js:1151:28
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 29,
        file: 'src/components/checkout/Services.svelte',
        length: 27,
        line: 38,
        lineText: "import TransportSection from './TransportSection.svelte';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: 'esbuild-svelte',
      text: 'Invalid character'
    }
  ],
  warnings: []
}

I'd love to be able to at least get a proper stack trace to isolate the issue.

from esbuild-svelte.

That is helpful to see that it is reproducible on a different code base (and with different versions of node/esbuild-svelte). Are you using any preprocessors @tyler-boyd ?

If I had to guess, that is where this issue originates, more specifically dealing with preprocessor sourcemaps. If I can get a reproduction on my end, it will make it a lot easier to troubleshoot at what point in the stack is causing a problem.

from esbuild-svelte.

I also get this error with 0.5.7, with 0.5.6 it works just fine, maybe this helps to reproduce it on your end: https://github.com/beancount/fava/tree/test-esbuild-057/frontend (The build can be started with npm run build in that directory or by running make in the root of the repository).

• npm run build disables sourcemaps (see build.ts - dev is false in that case), npm run dev enables them, but I get the same errors in both cases.
• Fava uses Typescript and plain CSS
• It seems to happen both with svelte-preprocess-esbuild, which is currently used, but I could also reproduce it with svelte-preprocess
• The files that it errors on all contain non-ASCII (whether in the CSS, TS or the template seems to make no difference), without those it works.

Removing the following line from esbuild-svelte also fixed the build, but I haven't really been able to debug this any further:

from esbuild-svelte.

Thanks @yagebu and @tyler-boyd for your additional info. I was able to get a reproduction and track this down. This looks to be related to issue sveltejs/svelte#6714
or more specifically this line of svelte

https://github.com/sveltejs/svelte/blob/4ca2af41df436ef97cd1953eb67c2c4922a8257b/src/compiler/utils/mapped_code.ts#L263

I'm not really sure how this hasn't come up more often, but I'll look at making a patch upstream to get this fixed.

from esbuild-svelte.

Additionally it looks like Node v16 is a culprit as well as it adds btoa and atob as globals

(SEMVER-MAJOR) buffer: expose btoa and atob as globals (James M Snell) #37786

which is what causes this issue

from esbuild-svelte.