search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.43k stars 32.16k forks source link

Unhandled Rejection (TypeError): Object(...) is not a function #20969

Closed tschirmer closed 4 years ago

tschirmer commented 4 years ago 
Unhandled Rejection (TypeError): Object(...) is not a function
Module../node_modules/@material-ui/lab/esm/internal/svg-icons/FirstPage.js
D:/Dev/react-materialui-scaffolding/node_modules/@material-ui/lab/esm/internal/svg-icons/FirstPage.js:7
__webpack_require__
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:769
  766 | };
  767 | 
  768 | // Execute the module function
> 769 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  770 | 
  771 | // Flag the module as loaded
  772 | module.l = true;

Current Behavior 😯

when using:

import Pagination from '@material-ui/lab/Pagination';

The following error occurs

Unhandled Rejection (TypeError): Object(...) is not a function
Module../node_modules/@material-ui/lab/esm/internal/svg-icons/FirstPage.js
D:/Dev/react-materialui-scaffolding/node_modules/@material-ui/lab/esm/internal/svg-icons/FirstPage.js:7
__webpack_require__
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:769
  766 | };
  767 | 
  768 | // Execute the module function
> 769 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  770 | 
  771 | // Flag the module as loaded
  772 | module.l = true;
View compiled
fn
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:129
  126 |         );
  127 |         hotCurrentParents = [];
  128 |     }
> 129 |     return __webpack_require__(request);
      | ^  130 | };
  131 | var ObjectFactory = function ObjectFactory(name) {
  132 |     return {
View compiled
Module../node_modules/@material-ui/lab/esm/PaginationItem/PaginationItem.js
D:/Dev/react-materialui-scaffolding/node_modules/@material-ui/lab/esm/PaginationItem/PaginationItem.js:1
__webpack_require__
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:769
  766 | };
  767 | 
  768 | // Execute the module function
> 769 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  770 | 
  771 | // Flag the module as loaded
  772 | module.l = true;
View compiled
fn
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:129
  126 |         );
  127 |         hotCurrentParents = [];
  128 |     }
> 129 |     return __webpack_require__(request);
      | ^  130 | };
  131 | var ObjectFactory = function ObjectFactory(name) {
  132 |     return {
View compiled
Module../node_modules/@material-ui/lab/esm/PaginationItem/index.js
D:/Dev/react-materialui-scaffolding/node_modules/@material-ui/lab/esm/PaginationItem/index.js:1
__webpack_require__
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:769
  766 | };
  767 | 
  768 | // Execute the module function
> 769 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  770 | 
  771 | // Flag the module as loaded
  772 | module.l = true;
View compiled
fn
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:129
  126 |         );
  127 |         hotCurrentParents = [];
  128 |     }
> 129 |     return __webpack_require__(request);
      | ^  130 | };
  131 | var ObjectFactory = function ObjectFactory(name) {
  132 |     return {
View compiled
Module../node_modules/@material-ui/lab/esm/Pagination/Pagination.js
D:/Dev/react-materialui-scaffolding/node_modules/@material-ui/lab/esm/Pagination/Pagination.js:1
__webpack_require__
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:769
  766 | };
  767 | 
  768 | // Execute the module function
> 769 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  770 | 
  771 | // Flag the module as loaded
  772 | module.l = true;
View compiled
fn
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:129
  126 |         );
  127 |         hotCurrentParents = [];
  128 |     }
> 129 |     return __webpack_require__(request);
      | ^  130 | };
  131 | var ObjectFactory = function ObjectFactory(name) {
  132 |     return {
View compiled
Module../node_modules/@material-ui/lab/esm/Pagination/index.js
D:/Dev/react-materialui-scaffolding/node_modules/@material-ui/lab/esm/Pagination/index.js:1
__webpack_require__
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:769
  766 | };
  767 | 
  768 | // Execute the module function
> 769 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  770 | 
  771 | // Flag the module as loaded
  772 | module.l = true;
View compiled
fn
D:/Dev/react-materialui-scaffolding/webpack/bootstrap:129
  126 |         );
  127 |         hotCurrentParents = [];
  128 |     }
> 129 |     return __webpack_require__(request);
      | ^  130 | };
  131 | var ObjectFactory = function ObjectFactory(name) {
  132 |     return {
View compiled

Expected Behavior 🤔

Pagination should be available within the file to use.

Steps to Reproduce 🕹

Steps:

  1. npm install @material-ui/labs
  2. try to use any of the material-ui labs exports
  3. doesn't compile as expected

Context 🔦

Your Environment 🌎

running dependancies:

 "dependencies": {
    "@material-ui/core": "^4.9.13",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.52",
    "autoprefixer": "^9.7.3",
    "babel-eslint": "^10.1.0",
    "babel-preset-react-app": "^9.1.2",
    "case-sensitive-paths-webpack-plugin": "^2.2.0",
    "chalk": "^3.0.0",
    "clsx": "^1.0.4",
    "css-loader": "^3.4.0",
    "deepmerge": "^4.2.2",
    "dygraphs": "^2.1.0",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-flowtype": "^4.5.2",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^5.0.2",
    "fs": "0.0.1-security",
    "lodash": "latest",
    "material-react-daterange-picker": "^1.0.14",
    "material-table": "^1.57.2",
    "postcss-loader": "^3.0.0",
    "promise": "^8.0.3",
    "prop-types": "latest",
    "react": "^16.13.1",
    "react-app": "^1.1.2",
    "react-datepicker": "^2.10.1",
    "react-dates": "^21.5.1",
    "react-dev-utils": "^10.2.1",
    "react-dom": "^16.13.1",
    "react-google-charts": "^3.0.15",
    "react-moment-proptypes": "latest",
    "react-router-dom": "^5.1.2",
    "sass": "^1.24.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.2.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0",
    "whatwg-fetch": "^3.0.0"
  },
eps1lon commented 4 years ago

@tschirmer Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template is a good starting point. Thank you!

himynameisdave commented 4 years ago

Same issue here, but I wasn't able to reproduce it on Codesandbox. I'm wondering if it has something to do with my transpiler/bundler.

tschirmer commented 4 years ago

yeah I ended up throwing out this whole codebase and starting from scratch in order to get it working. :/

himynameisdave commented 4 years ago

@tschirmer I just tried updating material core and that seemed to do the trick!

tschirmer commented 4 years ago

Oh great to hear! Yeah I did try that, it ended up being something with webpack that I couldn't resolve.