Page blocked because of a disallowed MIME type (“text/html”) #13910

saram7619 · 2023-07-20T16:28:25Z

saram7619
Jul 20, 2023

I have been trying to fix this error
Loading module from “https://saram7619.github.io/assets/index-e92ae01e.js” was blocked because of a disallowed MIME type (“text/html”). deploying-vite-project-example.
When I click on view source to try and debug, I get this

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="[/vite.svg](view-source:https://saram7619.github.io/vite.svg)" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="[/assets/index-e92ae01e.js](view-source:https://saram7619.github.io/assets/index-e92ae01e.js)"></script>
    <link rel="stylesheet" href="[/assets/index-d526a0c5.css](view-source:https://saram7619.github.io/assets/index-d526a0c5.css)">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

What I have done
npm install create vite@latest
the folder is vite-demo - using react - typescript
cd vite-demo
npm install
npm run dev

I made a new github repository called deploying-vite-project-example
went through all the github steps
added th following to my vite config file
base: "/deploying-vite-project-example/",
added all files to my repository
took my dist files out of gitignore
npm run build
pushed to gh-pages.
all files are on my repository,
I click on the live website and I get a blank page.
My github repository is https://saram7619.github.io/deploying-vite-project-example/
How do I fix this issue.

Ahmeduddin · 2023-07-22T15:52:19Z

Ahmeduddin
Jul 22, 2023

any solution ?

0 replies

saram7619 · 2023-07-22T19:48:11Z

saram7619
Jul 22, 2023
Author

No, I ended up deleting the folder then reinstalling Vite and gh- pages. I now have a 404 page instead.SaraSent from my iPhoneOn 22 Jul 2023, at 16:52, Ahmeduddin ***@***.***> wrote: any solution ? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

temannin · 2023-08-27T01:50:33Z

temannin
Aug 27, 2023

Have you tried setting your base URL in your vite.config file to something like the below?

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "https://saram7619.github.io/deploying-vite-project-example/",
});

5 replies

oluwatobiss Oct 8, 2023

This solution works for me. Thanks, @temannin!

JayCox90 Feb 14, 2024

Thank you @temannin that solved my issue i was struggling with!

srikanth-rl Feb 17, 2024

Thanks @temannin ...
Me and my friend lost all our hope finally we found the best solution ..

Brendan-Leighton Apr 16, 2024

Solved my problem <3

Gaurang200 Jul 4, 2024

Thank you @temannin, that worked for me.

hannahf86 · 2023-09-12T20:22:33Z

hannahf86
Sep 12, 2023

Does anyone have a solution to this? I've had a problem with this on a few of my projects recently. TYIA

0 replies

saram7619 · 2023-09-12T20:39:51Z

saram7619
Sep 12, 2023
Author

I had the same thing with a couple of projects a couple of months ago. I deleted my project after copying my code into my notes app, started a new project and the mime type error went away. I think the error appears because you have 2 HTML files with one in the root folder and one in dist folder, but I fixed the error months ago with stack overflow but I can’t remember how I did it. Sorry I couldn’t be more helpful. Don’t move your HTML files, you will create more errors and problems.

0 replies

syahbes · 2023-09-17T11:19:13Z

syahbes
Sep 17, 2023

after doing all the above I manage to set my project up.
first in the vite.config
I added the /dist/ after the repo name in base my called "pages":

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/pages/dist/',
  plugins: [react()],
})

than I run :
npm build

and
git subtree push --prefix dist origin gh-pages

than I was able to access the project via :
https://syahbes.github.io/pages/dist/

1 reply

ghost Feb 8, 2024

Hey can you look into the issue once
iam facing similar issue

Loading module from “https://mdnihal005.github.io/assets/index-m_29T7Ax.js” was blocked because of a disallowed MIME type (“text/html”)

this is my repo https://github.com/MdNihal005/password-generator
and this is link https://mdnihal005.github.io/password-generator/

norwayinmay · 2023-12-27T21:36:38Z

norwayinmay
Dec 27, 2023

I had this problem, solved by following the static site publish here: https://vitejs.dev/guide/static-deploy.html#github-pages
which switches from the jekyll build that github pages uses by default to just publishing the built files.
If you don't want to publish the whole repo, update the generated workflow file to point to just your /dist dir (example here: https://github.com/norwayinmay/food/blob/bab0479135ddf5b20b90d80d8180d191ad17841a/.github/workflows/static.yml#L40).

1 reply

Cole-Hartman Oct 31, 2024

This worked for me, thanks.

zeddspear · 2024-02-06T01:57:37Z

zeddspear
Feb 6, 2024

I fixed the issue by adding base as "./" in vite.config file
by this in build index.html all the files will be linked to html with the path starting "./"

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  assetsInclude: ["**/*.JPG"],
  base: "./",
});

1 reply

LucaDonadello Jun 11, 2024

This solution worked for me, thank you!

ghost · 2024-02-08T03:58:49Z

ghost
Feb 8, 2024

Loading module from “https://mdnihal005.github.io/assets/index-m_29T7Ax.js” was blocked because of a disallowed MIME type (“text/html”)

this is my repo https://github.com/MdNihal005/password-generator
and this is link https://mdnihal005.github.io/password-generator/
can someone help me with this

0 replies

hannahf86 · 2024-02-08T06:22:06Z

hannahf86
Feb 8, 2024

What I do now is simply not run build. I let vercel hosting do it for me through my git repo.

…

On Thu, 8 Feb 2024, 03:59 MdNihal005, ***@***.***> wrote: Loading module from “https://mdnihal005.github.io/assets/index-m_29T7Ax.js” was blocked because of a disallowed MIME type (“text/html”) this is my repo https://github.com/MdNihal005/password-generator and this is link https://mdnihal005.github.io/password-generator/ can someone help me with this — Reply to this email directly, view it on GitHub <#13910 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7NKW3FD4IKO3DATHLMZYDDYSREQLAVCNFSM6AAAAAA2RVYZG2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIMBTGAZTQ> . You are receiving this because you commented.Message ID: ***@***.***>

3 replies

ghost Feb 8, 2024

hey thanks for the reply
is it free to host my websites (obviously not large scale , like small projects )
and how can i use vercel i don't know about it -> ( any suggestions will helpful , like if you have any hosted websites using this so that i can have a look )
although i knew about netlify but github has a feature to host so tried this
thanks again

zeddspear Feb 11, 2024

Just sign up on vercel through github create new project and import one you want to deploy because all of your github projects will show on vercel as you are connected/signed through github, also while deploying single page website you do not have to define scripts as vercel will get them for you by default and just deploy the repo vercel will build your project on their machine and make it live. For more check vercel docs Deploying a git repo

Garcluca Mar 8, 2024

one comment let me deploy my project and probably saved me hours of work. I used vercel just worked after just configuring the build settings. I had to work through obfuscated byte code on my project and wasted like 16 hours of work trying to get it running locally and github pages was NOT having it. This was literally the only easy step in the process so far and it was completely free for a basic host. It works great with my site's assets and physics library.

zeeshananjumjunaidi · 2024-02-11T10:36:46Z

zeeshananjumjunaidi
Feb 11, 2024

I set my base to /v7/portfolio/dist/ and v7 is a directory on the root.

1 reply

ghost Feb 11, 2024

should I add dist folder to my repo ?
I haven't added you can see my repo link
https://github.com/MdNihal005/password-generator

hannahf86 · 2024-02-11T11:40:04Z

hannahf86
Feb 11, 2024

It is free to host. Domains etc cost money obviously

…

On Sun, 11 Feb 2024, 11:24 MdNihal005, ***@***.***> wrote: should add dist folder to my repo ? — Reply to this email directly, view it on GitHub <#13910 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7NKW3F2RL2K6BHIBDPWF7LYTCTARAVCNFSM6AAAAAA2RVYZG2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIMZSGI2TQ> . You are receiving this because you commented.Message ID: ***@***.***>

0 replies

hannahf86 · 2024-02-11T11:40:57Z

hannahf86
Feb 11, 2024

I don't. I literally just upload the project to GitHub through VS code, then as I say, host through vercel. No building at all

…

On Sun, 11 Feb 2024, 11:24 MdNihal005, ***@***.***> wrote: should add dist folder to my repo ? — Reply to this email directly, view it on GitHub <#13910 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7NKW3F2RL2K6BHIBDPWF7LYTCTARAVCNFSM6AAAAAA2RVYZG2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIMZSGI2TQ> . You are receiving this because you commented.Message ID: ***@***.***>

1 reply

MdNihal05 Feb 11, 2024

Thanks I will try vercel...
And nice portfolio

hannahf86 · 2024-02-11T11:55:20Z

hannahf86
Feb 11, 2024

Oh thank you! Netlify also works but I found vercel a little more reliable and easy to use for domain transfer when I did move everything over to vercel. Also, if you've not seen it, if you're making a project in Next.js Vercel do a nice package for contact forms with Resend, they're all made by the same folks ofc. May be worth a look at

…

On Sun, 11 Feb 2024, 11:53 MdNihal05, ***@***.***> wrote: Thanks I will try vercel... And nice portfolio — Reply to this email directly, view it on GitHub <#13910 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7NKW3HSMAJA7HR7YZZQO5DYTCWLHAVCNFSM6AAAAAA2RVYZG2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIMZSGM4TA> . You are receiving this because you commented.Message ID: ***@***.***>

0 replies

Akhilbisht798 · 2024-07-01T17:26:24Z

Akhilbisht798
Jul 1, 2024

I have tried most of this solution but now i am getting.
Unexpected Application Error! 404 Not Found

0 replies

JustPkDev · 2024-07-02T11:56:18Z

JustPkDev
Jul 2, 2024

I also faced this problem. in html file: link href or script src
use '/file path'. if this works then reply me.

0 replies

Arctomachine · 2024-08-12T23:07:08Z

Arctomachine
Aug 12, 2024

I encountered this error.
When running normally, it worked fine. When running in docker, it gave error.
So I had to set base path to / for app in flat project (not monorepo, package.json and config and dist are in project root)

0 replies

champion410 · 2024-11-14T21:35:56Z

champion410
Nov 14, 2024

Hi to everyone,

I could resolve the error of : Page blocked because of a disallowed MIME type (“text/html”)

After running the npm run dev command we get the dist folder, inside this folder there are a folder assets and index.html file.
The index.html file tries to access to files which are inside the assets folder. But the index.html has

link rel="stylesheet" crossorigin href="/assets/index.css"

This path is not working, a dot is missing, it should be like this:

link rel="stylesheet" crossorigin href="./assets/index.css"

So by adding a dot to the path, the problem is resolved. The page is accessible with : github.io/RepoName/dist/index.html

0 replies

conterio · 2024-12-28T09:27:31Z

conterio
Dec 28, 2024

i'm using aws s3 static websites and I can't figure this out, i've tried the ./ and the / nothing is working

0 replies

champion410 · 2024-12-28T13:47:07Z

champion410
Dec 28, 2024

Hi, I try to see your code, which repository is it ? Could you share the code and the build code. Thank you

…

On Saturday, December 28th, 2024 at 10:27 AM, Jeremy Conterio ***@***.***> wrote: i'm using aws s3 static websites and I can't figure this out, i've tried the ./ and the / nothing is working — Reply to this email directly, [view it on GitHub](#13910 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/BFEHHX7NAZYWTIFMHSMSXGL2HZVJTAVCNFSM6AAAAAA2RVYZG2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNRYGM3DQOA). You are receiving this because you commented.Message ID: ***@***.***>

0 replies

forresthopkinsa · 2025-01-11T03:01:59Z

forresthopkinsa
Jan 11, 2025

Really, you should not be configuring the base url in your vite config directly, because then it makes your repository non-portable. e.g. if someone forks it, or you rename it, it will break.

Instead, it's very easy to just pass the base url to Vite programmatically, e.g.:

name: Deploy Vite build to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - master
  # Allow running workflow manually from the Actions tab
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 21
          cache: npm

      - name: Install dependencies
        run: npm ci

      # This enables Pages and gives us the base path we need for the Vite build
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4

      # See: https://vite.dev/guide/build.html#public-base-path
      - name: Build with Vite
        run: npm run build -- --base "${{ steps.pages.outputs.base_path }}"

      - name: Upload production build
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

You can see this working live in this repo: forresthopkinsa/LineGame.js

0 replies

storenth · 2025-01-21T15:31:03Z

storenth
Jan 21, 2025

Clear cache resolve the issue look at #17738

0 replies

Page blocked because of a disallowed MIME type (“text/html”) #13910

Replies: 22 comments · 13 replies

saram7619 Jul 22, 2023 Author

saram7619 Sep 12, 2023 Author

Replies: 22 comments 13 replies

saram7619
Jul 22, 2023
Author

saram7619
Sep 12, 2023
Author