JonasKruckenberg / imagetools

Load and transform images using a toolbox :toolbox: of custom import directives!
MIT License
947 stars 59 forks source link

Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax #709

Closed Etheryte closed 8 months ago

Etheryte commented 8 months ago

This is not an issue with imagetools itself, but as they say, a problem between the keyboard and the chair.

You might run into the following error when trying to use vite-imagetools:

Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .JPG file format, or if it's an asset, add "**/*.JPG" to assetsInclude in your configuration.

The problem stems from the fact that the file extension is uppercase (.JPG) as opposed to lowercase (.jpg). I'm leaving this here for posterity in case anyone else steps onto the same problem.

How to fix the problem

Either a) rename your files so that the extensions are lowercase, or b) update your assetsInclude configuration to include uppercase extensions for assets:

export default defineConfig({
  assetsInclude: ['**/*.(jpg|jpeg|JPG|JPEG)'], // Etc for other formats you use
});

Since most tooling in this space relies on lowercase extensions, it's preferable to just rename the files.