Material-ui: Export useScrollTrigger and useMediaQuery

[Ganjdast]

Hi,
I am getting 'Module not found' error when using useScrollTrigger . and I am also not able to find the directory in node modules. I reinstalled material UI but still not fixed the problem.
thanks for your help in advance

[joshwooding]

Can you provide your package.json or a reproducible example? A codesandbox or git repository will do :)

[jbntlff]

Experiencing the same problem...

[Ganjdast]

Can you provide your package.json or a reproducible example? A codesandbox or git repository will do :)

sure

{
"name": "test-project",
"version": "0.0.9",
"private": true,
"dependencies": {
"@material-ui/core": "^3.9.2",
"bootstrap": "^4.1.1",
"es6-set": "^0.1.5",
"font-awesome": "^4.7.0",
"glyphicons-only-bootstrap": "^1.0.1",
"keycloak-js": "^5.0.0",
"promise-polyfill": "^8.1.0",
"react": "^16.7.0",
"react-app-polyfill": "^0.2.2",
"react-dom": "^16.7.0"
"react-scripts": "2.1.3",
"react-select": "^2.3.0",
"react-swipeable-views": "^0.13.3",
"rtl-bootstrap": "0.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"homepage": "./",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie < 11",
"not op_mini all"
],
"devDependencies": {
"redux": "^4.0.1"
}
}

[oliviertassinari]

Could it be because we don't expose it from the barrel? https://codesandbox.io/s/material-demo-xtk8f

import { useScrollTrigger } from "@material-ui/core";

=> TypeError (0 , _core.useScrollTrigger) is not a function

[joshwooding]

useScrollTrigger was added in v4.0.0-beta.1 make sure you are using a higher version when trying to use it.

[oliviertassinari]

@joshwooding Regarding the index.js, do you confirm that an export is missing?

[joshwooding]

@oliviertassinari yep and so is useMediaQuery from the looks of it

[oliviertassinari]

@joshwooding Well spotted!

Does anyone want to give it a shot? I believe we need a change close to this:

diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 825bb713d..6c386b268 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -178,6 +178,8 @@ export { default as TextField } from './TextField';
 export { default as Toolbar } from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Typography } from './Typography';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as useScrollTrigger } from './useScrollTrigger';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
 export { default as Zoom } from './Zoom';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 8fd41202c..8b5b2dce3 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -117,6 +117,8 @@ export { default as TextField } from './TextField';
 export { default as Toolbar } from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Typography } from './Typography';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as useScrollTrigger } from './useScrollTrigger';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
 export { default as Zoom } from './Zoom';

[Ganjdast]

useScrollTrigger was added in v4.0.0-beta.1 make sure you are using a higher version when trying to use it.

thanks it just fixed that. this link might also be helpful :
https://material-ui.com/guides/migration-v3/

[adeelibr]

If no one is working on this can I?

[oliviertassinari]

@adeelibr Sure :)