export 'theme' (imported as 'theme') was not found in './theme' (possible exports: default)

Question

I am getting above error when trying to export theme from index.js file. Here is the source code of index.js file.

import { createTheme } from "@mui/material";
import shadows from "./shadows";
import typography from "./typography";

const theme = createTheme({
  palette: {
    background: {
      default: "#fff",
    },
    primary: {
      contrastText: "#ffffff",
      main: "#212a32",
      light: "#465867",
    },
    secondary: {
      contrastText: "#fff",
      main: "#ff7300",
    },
    text: {
      primary: "#172b4d",
      secondary: "#6b778c",
    },
    success: {
      contrastText: "#ffffff",
      main: "#05c46b",
    },
    disabled: {
      main: "rgba(0, 0, 0, 0.30)"
    }, 
    colors: {
      delete: "#F37878",
      white: "#FFF"
    } 
  },
  transitions: {
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      // most basic recommended timing
      standard: 300,
      // this is to be used in complex animations
      complex: 375,
      // recommended when something is entering screen
      enteringScreen: 225,
      // recommended when something is leaving screen
      leavingScreen: 195,
    },
    easing: {
      // This is the most common easing curve.
      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
      // Objects enter the screen at full velocity from off-screen and
      // slowly decelerate to a resting point.
      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
      // Objects leave the screen at full velocity. They do not decelerate when off-screen.
      easeIn: "cubic-bezier(0.4, 0, 1, 1)",
      // The sharp curve is used by objects that may return to the screen at any time.
      sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
    },
  },
  shadows,
  typography,
  components: {
    MuiCollapse: {
      styleOverrides: {
        wrapperInner: {
          width: "100%",
        },
      },
    },
  },
});

export default theme;

Here is how I have imported it.

import './App.css';
import Main from './component/Main';
import {BrowserRouter,Route,Routes} from "react-router-dom";
import { ThemeProvider } from 'styled-components';
import theme from "./theme";


function App() {
  return (
    <div className="App">
       <ThemeProvider theme={theme}>
        <BrowserRouter>
        <Routes>
        <Route path="/*" element={<Main/>}/> 
        </Routes> 
        </BrowserRouter>
        </ThemeProvider>
    </div>
  );
}

export default App;

How can I fix this?

The error is to do with where you’re importing theme. Not how it’s defined. You’re likely trying to import it as a named import instead of the default — evolutionxbox, Aug 25 '22 at 15:53
@evolutionxbox I edited the question, and included how I imported it. — shayanmalinda, Aug 25 '22 at 16:08

score 0 · Answer 1 · answered Aug 25 '22 at 17:15

0

You are saying you file name where you created 'theme' is index.js then you need to import from '/index.js' not from '/theme'.

And there is another way auto import extension id you are using vscode.

Select the theme(where you wrote import theme line no.5) press ctrl+shift. Then it will suggest you the correct path.

answered Aug 25 '22 at 17:15

MohdFaizan_06

52
3

_"from '/index.js' not from '/theme'"_ - I don't think so. By default, the module system will look for the index.js file inside a folder. Related: https://stackoverflow.com/questions/53384735/import-from-folder-through-index-js – evolutionxbox Aug 26 '22 at 08:00
yes its check the index.js file if you give only folder name. – MohdFaizan_06 Aug 26 '22 at 11:55

export 'theme' (imported as 'theme') was not found in './theme' (possible exports: default)

1 Answers1