When connect moment.js then catch "Failed to load module script"

[AndreiSoroka]

Describe the bug

When I connected moment.js

npm i moment

component:

<script lang="ts" setup>
import moment from "moment";

defineProps<{
  permissions: {
    name: string;
    end?: Date;
  }[];
}>();
</script>

<template>
  <div class="current-products">
    Your data plan:
    <div v-for="permission in permissions" :key="permission.name" class="current-products__product">
      <span class="font-bold">
        {{ permission.name }}
      </span>
      <span v-if="permission.end" v-tooltip="`until ${moment().format('DD.MM.YYYY HH:MM')}`">
        ({{ moment().to(permission.end, true) }} left)
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.current-products {
  height: 1rem;
  margin-bottom: 1rem;
}

.current-products__product {
  display: inline-block;
}
</style>

I got an error into production

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

On the server I have apache .htaccess

Options -Indexes

RewriteEngine On
# todo add reverse proxy
# RewriteRule ^info/(.*) http://.../$1 [P]

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Why does the MIME type change? Possible apache specific problem. Without moment.js all is fine

A lot of thanks

Reproduction

specific problem, easy to reproduce if you can run apache, just install and connect moment.js

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 556.14 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.18 - ~/.npm-global/bin/yarn
    npm: 8.6.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3 
    vite: ^2.9.12 => 2.9.13 

### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to [vuejs/core](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[AndreiSoroka]

very interesting, I disabled proxy (cache) in cloudflare.com, and the problem solved

[AndreiSoroka]

If somebody catches this error with Cloudflare, then you can use API for a clear cache

Create token: https://dash.cloudflare.com/profile/api-tokens with permissions Zone.Cache Purge

Example step in the pipeline (bitbucket):

      - step:
          name: Pure Cloudflare cache
          script:
            - |
              curl -X POST "https://api.cloudflare.com/client/v4/zones/$CLOUDFLARE_ZONE/purge_cache" \
              -H "Authorization: Bearer $CLOUDFLARE_CACHE_PURE_TOKEN" \
              -H "Content-Type: application/json" \
              --data '{"purge_everything":true}';