react - not able to import object from another js file

Question

responsive.js

import { useMediaQuery } from "react-responsive";

export default {
  sm: useMediaQuery({ maxWidth: 768 }),
  md: useMediaQuery({ minWidth: 769, maxWidth: 1024 }),
  lg: useMediaQuery({ minWidth: 1025 }),
};

When I tried to import it in App.js

import {sm,md,lg} from "../../responsive"

error occurs:

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

What's wrong?

update

I find that there is another error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476)
    at Object.useContext (react.development.js:1484)
    at useDevice (react-responsive.js:57)
    at useMediaQuery (react-responsive.js:95)
    at Module../src/responsive.js (responsive.js:3)

After I change to below

import { useMediaQuery } from "react-responsive";

const sm = useMediaQuery({ maxWidth: 768 });
const md = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
const lg = useMediaQuery({ minWidth: 1025 });

export { sm, md, lg };

Answer 1

You can either use a default export or a named export.

Using the default export, which is what you have in your question.

import responsive from '../../responsive';

console.log(responsive.sm);

Alternatively you could use a named export.

export const sm = "foo";
export const md = "bar";
export const lg = "baz";

And import them via:

import { sm, md, lg } from '../../responsive';

---

The issue you're encountering about using a hook outside of a React component is because you are using useMediaQuery (a hook) outside of a component, it can be easily remedied by creating a custom, reusable hook.

const useMeasurements = () => {
  return {
    sm: useMediaQuery({ maxWidth: 768 }),
    md: useMediaQuery({ minWidth: 769, maxWidth: 1024 }),
    lg: useMediaQuery({ minWidth: 1025 })
  }
};

Inside of your component you can use it like so:

const MyComponent = () => {
  const { sm, md, lg } = useMeasurements();
};

Answer 2

You must import default export as below:

import sm,md,lg from "../../responsive";

Answer 3

Both of these alternatives should work: import responsive from '../../responsive';

import { useMediaQuery } from "react-responsive";

const sm = useMediaQuery({ maxWidth: 768 });
const md = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
const lg = useMediaQuery({ minWidth: 1025 });

export { sm, md, lg };

Regarding the hook errors, here you have the same issue, with answers: Invalid hook call. Hooks can only be called inside of the body of a function component

Answer 4

You are calling useMediaQuery hook outside of the function, which is agains the React Hook rule.

So you can achieve this by creating another custom hook and wrap with it.

// useGrid.js
import { useMediaQuery } from "react-responsive";

const useGrid = () => {
    const sm = useMediaQuery({ maxWidth: 768 });
    const md = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
    const lg = useMediaQuery({ minWidth: 1025 });
    return { sm, md, lg }
}
export { useGrid }

Now in your file you can simply use it:

// component.js
import { useGrid } from "./useGrid"

const CustomComponent = () => {
    const { sm, md, lg } = useGrid();
  };