'Uncaught TypeError when trying to import Material-UI DatePicker
Material-UI v5 Datepickers (MUI X)
When I attempt to add a basic date-picker from the example in the docs, I am met with the following error on page load and a blank screen. Any guidance on how to resolve this would be very appreciated!
Full stacktrace from consolewithWidth.js:149 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Object.require.1531.dup (withWidth.js:149:1)
at s (_prelude.js:1:1)
at _prelude.js:1:1
at Object.<anonymous> (withWidth.js:22:1)
at Object.require.1186.../styles/useTheme (withWidth.js:149:1)
at s (_prelude.js:1:1)
at _prelude.js:1:1
at Object.<anonymous> (HiddenJs.js:14:1)
at Object.require.1183.../styles/useTheme (HiddenJs.js:169:1)
at s (_prelude.js:1:1)
require.1531.dup @ withWidth.js:149
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ withWidth.js:22
require.1186.../styles/useTheme @ withWidth.js:149
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ HiddenJs.js:14
require.1183.../styles/useTheme @ HiddenJs.js:169
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ Hidden.js:18
require.1181../HiddenCss @ Hidden.js:177
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.1185../Hidden @ index.js:15
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.1445../Accordion @ index.js:1709
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.1657.../internals/components/PickersToolbar @ DatePickerToolbar.js:20
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ DesktopDatePicker.js:20
require.1660.../DatePicker/DatePickerToolbar @ DesktopDatePicker.js:465
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.1661../DesktopDatePicker @ index.js:13
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ DatePicker.js:22
require.1656.../DesktopDatePicker @ DatePicker.js:485
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.1658../DatePicker @ index.js:13
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.222.@mui/material/TextField @ MaterialDatePickerInput.jsx:5
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.540.../../../common/actions/AttachmentActions @ AddTask.jsx:8
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.544.../../../common/constants/ToastTypes.js @ TasksWidget.jsx:4
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.526.../../common/stores/SettingStore.js @ DashboardController.jsx:5
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
require.695.../dashboard/views/DashboardController.jsx @ dashboard.js:3
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1
Below, I am using the basic datepicker code example from the docs:
import * as React from "react";
import TextField from "@mui/material/TextField";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
const MaterialDatePickerInput = () => {
const [value, setValue] = React.useState(null);
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}/>
</LocalizationProvider>
);
};
module.exports = React.memo(MaterialDatePickerInput);
I'm not sure where things are going wrong here, but in chrome dev tools this is the last place in my code where the stacktrace hits: import { DatePicker } from "@mui/x-date-pickers/DatePicker";
Here are my relevant packages in package.json:
"dependencies": {
...
"@date-io/moment": "2.13.2",
"@emotion/react": "11.9.0",
"@emotion/styled": "11.8.1",
"@mui/material": "5.6.4",
"@mui/x-date-pickers": "^5.0.0-alpha.2",
"moment": "2.24.0",
"react": "17.0.2",
"react-dom": "17.0.2",
...
}
var babelify = require("babelify");
var fancyLog = require("fancy-log");
var glob = require("glob");
var gulp = require("gulp");
var gulpSass = require("gulp-sass");
var rename = require("gulp-rename");
var sass = require("sass");
var sourcemaps = require("gulp-sourcemaps");
var uglify = require("gulp-uglify");
var gwfb = require("gulp-watchify-factor-bundle");
var path = require("path");
var buffer = require("vinyl-buffer");
const { parallel } = require("gulp");
gulpSass.compiler = sass;
/*
* Common options and setup for the bundler
*/
function createBundler(debug, done) {
return gwfb.create({ cache: {}, debug: debug, packageCache: {} })
.transform("babelify", { presets: ["@babel/preset-env", "@babel/preset-react"] }) // JSX -> JS and ES6 -> ES5
.on("error", function(error) { fancyLog("Browserify Error"); fancyLog(error.message); done(); })
.on("log", fancyLog);
}
/*
* Write an individual bundle given a readable stream from the bundler
*/
function writeBundle(stream, outputDest, debug, done) {
stream = stream
.on("error", function(error) { fancyLog("Browserify Error"); fancyLog(error.message); })
.pipe(buffer());
if (debug) {
// Create sourcemaps for debugging as original files
stream = stream
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write("."));
} else {
// Minify for production
stream = stream
.pipe(uglify())
.on("error", function(error) { fancyLog("Uglify Error"); fancyLog(error.message); done(); });
}
// Rename to change "./main/file.js" to "file.js", then write to the output directory
return stream
.pipe(rename({ dirname: "./" }))
.pipe(gwfb.dest(outputDest));
}
function buildBundles(globPattern, watch, debug, done) {
glob(globPattern, function(error, files) {
if (error)
done(error);
var isPublic = globPattern.search("public") !== -1;
var outputDest = "./bundles";
if (isPublic) {
outputDest += "/public";
}
var outputs = files.map(function(file) {
return path.basename(file);
});
var bundleFunc = watch ? gwfb.watch : gwfb.bundle;
// factor-bundle returns a readable stream for the common.js bundle
// All the other bundles (after factoring) are written out to the specified outputs
var stream = gwfb.src(globPattern, { cwd: "./" })
.pipe(bundleFunc(createBundler(debug, done), { common: "common.js", outputs: outputs }));
// For one-time build, just write the stream
if (!watch)
return writeBundle(stream, outputDest, debug, done).on("end", done);
// Set up event listener for watch
return stream
.on("bundle", function(newStream) {
fancyLog("Rebundling " + (isPublic ? "public" : "internal") + "...");
// Write out common bundle
writeBundle(newStream, outputDest, debug, done);
});
});
}
/*
* Helper function with common functionality between watch and one-time build
*/
function bundle(watch, debug, done) {
// Make sure we only call the done() handler once
var bundlesLeft = 2;
function customDone(error) {
if (--bundlesLeft === 0) {
done();
}
}
// For security, the public bundles (e.g. login page) are built separately from the internal
// bundles. This leads to some extra overall data but allows us to only expose what we absolutely
// need to on public pages.
buildBundles("./main/public/*.js", watch, debug, customDone);
buildBundles("./main/*.js", watch, debug, customDone);
}
/*
* Helper tasks
*/
gulp.task("js-debug", function(done) {
bundle(false, true, done);
});
gulp.task("js-release", function(done) {
bundle(false, false, done);
});
gulp.task("sass", function() {
// We could minify the CSS with "compressed" instead of "expanded", but it only saves a couple
// dozen KB.
return gulp.src([ "../Css/**/*.scss", "!../Css/Sass/*.scss" ])
.pipe(gulpSass({ outputStyle: "expanded" }).on("error", gulpSass.logError))
.pipe(gulp.dest("../Css"));
});
gulp.task("sass-watch", function() {
gulp.watch([ "../Css/*.scss", "../Css/React/*.scss", "../Css/React/Material/*.scss", "!../Css/Sass/*.scss" ], gulp.series("sass"));
});
gulp.task("watch", function(done) {
bundle(true, true, done);
});
// For non-local builds, we need to run both JS transpile and SCSS compile
gulp.task("Debug", gulp.parallel("js-debug", "sass"));
gulp.task("QA", gulp.parallel("js-debug", "sass"));
gulp.task("Release", gulp.parallel("js-release", "sass"));
// For local development, SCSS compile is handled by the Rider File Watcher
gulp.task("default", gulp.series("watch"));
// For local development with SCSS compiler
gulp.task("dev", gulp.parallel("watch", "sass-watch"));
I'm unable to reproduce this in a sandbox environment currently. Which leads me to believe there is a package conflict of some kind going on and/or something odd with our bundling method (see gulpfile above).
Not sure if relevant either, but here is the theme file wrapping around the component from a parent. Though worth noting I still get the same error regardless.
import React from "react";
import StyledEngineProvider from "@mui/material/StyledEngineProvider";
import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
primary: {
main: "#3F8F24" // Colors.leaf
}
},
typography: {
fontFamily: 'Prompt, sans-serif'
}
});
const TestTheme = (props) => {
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
</StyledEngineProvider>
);
};
export default TestTheme;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|