[BUG] sowpack bundle build generate import statement for images and json files

[wighawag]

Bug Report Quick Checklist

• [x] I am on the latest version of Snowpack & all plugins.
• [x] I use package manager yarn
• [x] I run Snowpack on OS Windows
• [x] I run Snowpack on Node.js v12+

Describe the bug

[BUG] sowpack build generate import statement for json file and image

This result in error loading it in browser :

for images :

Failed to load module script: The server responded with a non-JavaScript MIME type of "image/png". Strict MIME type checking is enforced for module scripts per HTML spec.

for json files:

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec

To Reproduce

Reproduction repo : https://github.com/bug-reproduction/snowpack-import-files

1. yarn && yarn build && yarn serve
2. navigate to http://localhost:8080
3. See error!

Expected behavior

Expect to be able to load image and json when imported in source.

This work in dev mode,

[BogdanDarius]

You can wrap your json object into a .ts or .js file. Instead of a json file:

{
    "foo": "bar"
}

Use a .ts/.js file with export:

export default {
    "foo": "bar"
}

[wighawag]

@BogdanDarius Note that as mentioned the issue is also with image

Both were working in previous version of snowpack actually

[BogdanDarius]

@BogdanDarius Note that as mentioned the issue is also with image

Both were working in previous version of snowpack actually

Yes I know. It was just a quick workaround. There is an issue.

[cain-wang]

Thanks for reporting. Also seeing similar issues with json and images. Hopefully we'll find a fix soon!

With previous version (3.0.11), it retains the construct of svg.proxy.js for images in the bundled builds similar to dev.

// dist/logo.svg.proxy.js
var logo_svg_proxy_default = "/dist/logo.svg";

In 3.2.2, the images are being imported directly in the built js files.

// build/components/Logo.js
import logo from "../img/logo.svg";

[cain-wang]

As this is the last blocker for our migration, I spent sometime digging this. I left a comment at this refactor to point to a config change that skips proxy imports for bundled builds.

The following refactor also suspected this regression (I left a comment at the particular line):

Refactor the build to improve reusability

[cain-wang]

One work around is to create a Snowpack plugin that reset the resolveProxyImports in a JS task:

module.exports = function config() {
  return {
    name: 'snowpack-config-resolveProxyImports-plugin',
    config(config) {
      setTimeout(() => {
        config.buildOptions.resolveProxyImports = true
      })
    },
  };
}

Will also propose a quick pull request to fix this.

[drwpow]

Thanks for raising. Thanks to the wonderful @lukejacksonn, he recently updated our Snowpack test suite and it is much, much easier to write tests for! 🎉

If someone on this issue can open a PR with a failing test that captures the behavior, I’d be happy to suggest a fix for it.

[cain-wang]

Hi @drwpow, thanks for looking into this. This can be reproduced with a basic snowpack template app.

npx create-snowpack-app test-image-import --template @snowpack/app-template-react-typescript

If you turn on optimize.bundle to true in snowpack.config.js, and try to open build/index.html in the browser (I use http-server to serve the build directory, but any web server works)

npx http-server build

you should be able to see the error:

Failed to load module script: The server responded with a non-JavaScript MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

[azuline]

Any update? I am stuck on Snowpack 3.0.13 because of this bug and am unable to upgrade.

[Levminer]

Any update? Still can't import any JSON file.

[TJBlackman]

Experienced this issue in 3.8.8 when importing .json|.png files. Downgraded snowpack to 3.0.11 for a temporary fix.

[KyranRana]

Any update on this?