migrating CRA reveals JS files with disallowed MIME types

[joepagan]

Error in browser from an CRA that worked previously, page doesn't load properly, console reveals:

Loading module from “http://localhost:8080/_dist_/views/Components/components/Header/Header.js” was blocked because of a disallowed MIME type (“”).localhost:8080

I presume this is because snowpack doesn't support jsx inside .js files as stated here:

Note: Snowpack’s default build does not support JSX in .js/.ts files. You’ll need to define your own build script to support this. You can define your own JSX->JavaScript build step via a Build Script integration.

When trying the recommended method to handle this with babel CLI setup:

{
  "scripts": {
    "build:js,jsx": "babel --filename $FILE",
  }
}

On a build I get the following error:

[error]: Multiple "scripts" match the ".js" file extension.
Currently, only one script per file type is supported.

Am I following these steps correctly? What am I doing wrong here?

[FredKSchott]

Bah, sorry about that. Are you using Create Snowpack App? In that case, Babel is already set to build your JavaScript, which is where that error is coming from.

If you load http://localhost:8080/_dist_/views/Components/components/Header/Header.js directly in the browser, what do you see? Is there any error output when you do?

Also fyi, Snowpack v2.7.0 is about to be released which may have a bug fix for this, you can try it with npm install snowpack@next.

[joepagan]

Hey

Thanks for getting back so quick!

I am using the Create Snowpack App with the@snowpack/app-template-react template.

When trying the babel cli method from the docs as I linked above with snowpack@next I get the same result.

When reverting the setup back to @snowpack/app-template-react (using the built in babel):

• Making a request in browser to http://localhost:8080/_dist_/views/Components/components/Header/Header.js actually 404s!
• snowpack@next behaves the same here as latest release
• console for the build process actually returns errors (removed other identical errors for other files for readability):

Snowpack

  http://localhost:8080 • http://192.168.86.140:8080 • http://10.7.0.2:8080
  Server started in 29ms.


▼ Console

  [error] [404] /_dist_/views/Components/components/Header/Header.js
    ✘ /Users/joe/var/www/create-snowpack-app-react/public/_dist_/views/Components/components/Header/Header.js
    ✘ /Users/joe/var/www/create-snowpack-app-react/public/_dist_/views/Components/components/Header/Header.mjs
    ✘ /Users/joe/var/www/create-snowpack-app-react/public/_dist_/views/Components/components/Header/Header.jsx
    ✘ /Users/joe/var/www/create-snowpack-app-react/public/_dist_/views/Components/components/Header/Header.ts
    ✘ /Users/joe/var/www/create-snowpack-app-react/public/_dist_/views/Components/components/Header/Header.tsx
    ✘ /Users/joe/var/www/create-snowpack-app-react/src/views/Components/components/Header/Header.js
    ✘ /Users/joe/var/www/create-snowpack-app-react/src/views/Components/components/Header/Header.mjs
    ✘ /Users/joe/var/www/create-snowpack-app-react/src/views/Components/components/Header/Header.jsx
    ✘ /Users/joe/var/www/create-snowpack-app-react/src/views/Components/components/Header/Header.ts
    ✘ /Users/joe/var/www/create-snowpack-app-react/src/views/Components/components/Header/Header.tsx

[joepagan]

@FredKSchott figured it out... another classic case of PLBKAC

Since migrating to snowpack my relative paths are now not working, I did a quick find & replace for components/Header/Header.js to be ./components/Header/Header.js however, in this theme I've used (not my own design), that folder is actually the level above 🤦

Hopefully here is a way to mimic that behaviour in snowpack without further find & replaces.

Thanks for trying to help.

[FredKSchott]

Great! We're launching 2.7 today which comes with much better "import aliasing" support to solve this exact situation. You can see the draft here: https://snowpack-git-plugin-docs.pikapkg.vercel.app/#import-aliases and can try it out now with npm install snowpack@next.

[joepagan]

Great will give that a shot, thanks for your help, and best of luck for the future. Hope the release goes well.