Блог

Главная - Вопросы по программированию - Тип MIME не разрешен при импорте с абсолютным путем с помощью Vite React JS

Тип MIME не разрешен при импорте с абсолютным путем с помощью Vite React JS

#reactjs #vite

Вопрос:

Когда я настраиваю Vite для загрузки компонентов с использованием абсолютного пути, я получаю эту ошибку консоли типа MIME «недопустимо».

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 Container from '@/Components/UI/Container/Container';

ошибка консоли

Есть какое-нибудь решение?

Комментарии:

1. Я не могу воспроизвести проблему в этой демонстрации . Можете ли вы поделиться ссылкой на репродукцию?

2. Поскольку мы этого не видим, он также должен поделиться реализацией <script></script> тега в index.html файле, чтобы убедиться, что он не пропустил type атрибут из тега сценария.

3. @tony19 Я думаю, что проблема в NodeJS, потому что загрузил тест на GitHub и построил его с помощью Netlify, и это сработало. Я получаю ошибку только тогда, когда запускаю dev на локальном хосте.

Ответ №1:

Следующие конфигурации работали для меня. Он настроен для VueJS, но также хорошо работает с react

В vite.config.js

 import { defineConfig } from 'vite'

импорт реакции из «@vitejs/плагин-реакция»;
путь импорта из «пути»

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

В jsconfig.json

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

Конфигурации находятся отсюда

Метки: