MIME type not allowed when importing with absolute path with Vite + React JS

Question

When I setup Vite to load components using absolute path I get this MIME type not allowed console error.

vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, '/src') }]
  }
});

jsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

import:

import Container from '@/Components/UI/Container/Container';

console error

Any solution?

I cannot reproduce the problem in this demo. Can you share a link to a reproduction? — tony19
– tony19, Commented Oct 11, 2021 at 6:06
As we can't see it, he should also share the implementation of the <script></script> tag in the index.html file to be sure that he is not missing the type attribute from the script tag. — flydev
– flydev, Commented Oct 11, 2021 at 8:35
@tony19 I think the problem is with NodeJS because uploaded a test to GitHub and built it with Netlify and it worked. I'm getting the error only when I run dev on localhost. — mellunar
– mellunar, Commented Oct 11, 2021 at 13:57

FemiHiro · Accepted Answer · 2021-12-04 11:34:20Z

2

The following configs worked for me. It is set for vueJs but also works well with react

In vite.config.js

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'; import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

In jsconfig.json

 {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

The configs are from here

answered Dec 4, 2021 at 11:34

FemiHiro

767 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MIME type not allowed when importing with absolute path with Vite + React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related