No default export found in imported module "vite-plugin-svgr"

[vincerubinetti]

Getting a strange eslint warning in my vite.config.js of the svgr plugin import. The actual functionality of the plugin is working just fine.

import path from "path";
import { defineConfig, loadEnv } from "vite";
import svgr from "vite-plugin-svgr";
import react from "@vitejs/plugin-react";
import { createHtmlPlugin } from "vite-plugin-html";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    resolve: {
      alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
    },
    plugins: [react(), svgr(), createHtmlPlugin({ inject: { data: env } })],
  };
});

The package in node_modules clearly does have a default export, so not sure what's going on here.

My eslint config

{
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

My package.json

{
  "name": "simplex",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "@floating-ui/react-dom": "^1.2.0",
    "@floating-ui/react-dom-interactions": "^0.13.3",
    "@react-hook/resize-observer": "^1.2.6",
    "@stitches/react": "^1.2.8",
    "@tanstack/react-query": "^4.22.0",
    "@zxcvbn-ts/core": "^2.1.0",
    "@zxcvbn-ts/language-common": "^2.0.1",
    "@zxcvbn-ts/language-en": "^2.1.0",
    "html-react-parser": "^3.0.7",
    "javascript-time-ago": "^2.5.9",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router": "^6.6.2",
    "react-router-dom": "^6.6.2",
    "react-time-ago": "^7.2.1",
    "react-use": "^17.4.0",
    "react-wrap-balancer": "^0.3.0",
    "use-query-params": "^2.1.2"
  },
  "devDependencies": {
    "@simbathesailor/use-what-changed": "^2.0.0",
    "@tanstack/react-query-devtools": "^4.22.0",
    "@types/lodash": "^4.14.191",
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.48.1",
    "@typescript-eslint/parser": "^5.48.1",
    "@vitejs/plugin-react": "^3.0.1",
    "eslint": "^8.31.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-plugin-import": "^2.27.4",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "msw": "^0.49.2",
    "prettier": "^2.8.2",
    "typescript": "^4.9.4",
    "vite": "^4.0.4",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-svgr": "^2.4.0"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

Anyone know what could be wrong?

I've also tried clearing node_modules and yarn.lock, and restarting VS Code.

[panjiangyi]

see here 44

[vincerubinetti]

I think that issue and your comment are about importing the react component in each file where you want to use it.

This issue is about an eslint warning thrown in the vite configuration file, where the plugin itself is imported/defined.

[SouchetJulie]

This could be very well due to This rule currently does not interpret module.exports = ... as a default export, either, so such a situation will be reported in the importing module. (source)

I've given up and disabled the rule for this line for lack of a better solution.