Question 364199 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Vite can't resolve export {default as component}

I have such a problem. I installed a plugin that adds a react component to vs code and does default things like import react, etc.

so this plugin generates a folder with a component and an index.js in which the public export writes like this:

export {default as  CreateArticlePage} from './CreateArticlePage';

at first I thought it was some kind of strange syntax, but after Googling I realized that this thing is in the interop and should be handled normally in

but in the console and during the build, he writes errors in the style

error example

at the same time, not all components that were declared that way

I am writing on the react template in vite

Please help me solve and understand what the problem is.

Configs:

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  ssr: false,
});

package.json

{
  "name": "social-network",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.4",
    "styled-components": "^6.1.8"
  },
  "devDependencies": {
    "@babel/plugin-proposal-export-default-from": "^7.24.1",
    "@babel/preset-react": "^7.24.1",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "prettier": "^3.2.5",
    "vite": "^5.1.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "vitest"
    ]
  }
}

there are no other confics like babel

Tags:

2

Answers


  1. 0

    The error is telling you in App.jsx you need to import a named export, because no default export exists:

    import { CreateArticlePage } from './pages/CreateArticlePage'

    This index.js file:

    export {default as  CreateArticlePage} from './CreateArticlePage';

    Does not export a default. It re-exports the default export from CreateArticlePage as a named export – CreateArticlePage

    Login or Signup to reply.
  2. 0

    You’ve exported the default as a named constant.
    You just need to import as such

    import {CreateArticlePage} from '../pages/CreateArticlePage'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search