Can't import geojson file (SyntaxError: Unexpected token ':' ) in sveltekit

Question

I tried to implement geojson-vt in my sveltekit project, however, it stopped just when I wanted to load my geojson file.

+page.svelte:

<script>
    import geojsonfile from '$lib/some_file.geojson'

    console.log(geojsonfile)
</script>

Here I just want to load the file directly, and I get this error SyntaxError: Unexpected token ':', and nothing on console.log (which means it failed to import the file)

I already tested the very same geojson file on the geojson-vt debugger, and it shows no error, so I think it has nothing to do with the geojson file.

What did I do wrong while importing?

Peppe L-G · Accepted Answer · 2024-05-20 08:18:14Z

0

In JavaScript, the import statement can only import JS files (though JSON files are on their way), so it tries to read the content of the $lib/some_file.geojsonfile as JS code, which it isn't, and you get a syntax error.

To import other type of files, you must tell your bundler how to import the files based on their extensions. Your bundler has no idea of how to import a file with the extension geojson, so it assumes it's a JS files.

If you use Vite, then importing JSON files is supported by default, but they must have the extension json, so if you use Vite, one simple solution is to change the extension from geojson to just json.

answered May 20, 2024 at 8:18

Peppe L-G

8,4182 gold badges29 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

louislugas Over a year ago

just curious, if I change the extension from geojson to json, does it affect anything in the file?

Peppe L-G Over a year ago

The content in the file will still be the same, no matter which extension it has (i.e. text characters in this case). The extension of the file is used to let other programs and users know in which data format the data in the file has been written in. So, if one of your tools has hardcoded that the extension of the file has to be geojson, then that program will have difficulties reading the data from the file.

Collectives™ on Stack Overflow

Can't import geojson file (SyntaxError: Unexpected token ':' ) in sveltekit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related