Related
I'm trying to install #mui/x-date-pickers to my project and I followed the instructions from their website, which you can find here. The problem is when i installed everything and added this code to my project
import React from 'react';
import { LocalizationProvider, TimePicker } from '#mui/x-date-pickers';
import { TextField } from '#mui/material';
import { AdapterMoment } from '#mui/x-date-pickers/AdapterMoment';
import moment from 'moment';
export const Blabla = () => {
const [value, setValue] = React.useState(moment('2014-08-18T21:11:54'));
const handleChange = (newValue: any) => {
setValue(newValue);
};
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<TimePicker
label="Time"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
};
I am getting this error
And this is how my dependencies look like in the package.json file
"dependencies": {
"#mui/x-date-pickers": "^5.0.11",
"auth0-js": "^9.13.2",
"axios": "^0.19.2",
"copy-webpack-plugin": "6",
"crossfilter": "^1.3.12",
"crossfilter2": "^1.5.4",
"cubejs": "^1.3.2",
"d3": "^6.2.0",
"dataloader": "^2.0.0",
"date-fns": "^2.14.0",
"emotion": "^10.0.27",
"emotion-theming": "^10.0.27",
"highcharts": "8.1.2",
"highcharts-custom-events": "3.0.9",
"highcharts-react-official": "3.0.0",
"html-to-image": "^1.10.8",
"i18next": "^19.4.4",
"js-sha256": "^0.9.0",
"json2mq": "^0.2.0",
"jspdf": "^2.5.1",
"jsverify": "^0.8.4",
"leaflet": "^1.7.1",
"mixpanel-browser": "2.41.0",
"moment": "^2.25.3",
"papaparse": "^5.3.0",
"patch-package": "^6.4.7",
"ramda": "^0.27.0",
"react": "^16.13.1",
"react-codemirror": "^1.0.0",
"react-copy-to-clipboard": "^5.0.2",
"react-csv": "^2.0.3",
"react-dates": "^21.8.0",
"react-datetime": "^3.0.4",
"react-dom": "^16.13.1",
"react-dropzone": "^12.0.1",
"react-email-editor": "^1.2.0",
"react-hot-loader": "^4.12.21",
"react-hot-toast": "^2.2.0",
"react-i18next": "^11.4.0",
"react-infinite-scroll-component": "^5.1.0",
"react-leaflet": "^2.7.0",
"react-material-ui-carousel": "^2.3.11",
"react-router-dom": "^5.2.0",
"react-slick": "^0.26.1",
"react-tooltip": "^4.2.11",
"rxjs": "^6.5.5",
"slick-carousel": "^1.8.1",
"topojson-client": "^3.1.0",
"urlencode": "^1.1.0",
"webpack": "^4.42.1"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.9.4",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"#babel/preset-typescript": "^7.9.0",
"#cubejs-client/core": "^0.25.0",
"#date-io/moment": "^2.16.1",
"#emotion/babel-plugin": "^11.7.2",
"#emotion/core": "10.1.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^10.0.27",
"#material-ui/core": "^4.9.11",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.53",
"#mui/material": "^5.11.1",
"#storybook/addon-actions": "^5.3.18",
"#storybook/addon-console": "^1.2.1",
"#storybook/addon-knobs": "^5.3.18",
"#storybook/addon-storyshots": "^5.3.18",
"#storybook/addon-viewport": "^5.3.18",
"#storybook/react": "^5.3.18",
"#svgr/webpack": "^5.3.1",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.4",
"#types/auth0-js": "^9.12.4",
"#types/d3": "^5.16.3",
"#types/geojson": "^7946.0.7",
"#types/jest": "25.2.1",
"#types/json2mq": "^0.2.0",
"#types/jspdf": "^1.3.3",
"#types/leaflet": "^1.5.17",
"#types/lodash": "4.14.151",
"#types/mixpanel-browser": "2.35.6",
"#types/node": "^17.0.17",
"#types/papaparse": "^5.2.5",
"#types/ramda": "0.27.6",
"#types/react": "^16.9.34",
"#types/react-codemirror": "^1.0.3",
"#types/react-copy-to-clipboard": "^4.3.0",
"#types/react-csv": "^1.1.1",
"#types/react-dates": "^17.1.10",
"#types/react-dom": "^16.9.6",
"#types/react-email-editor": "^1.1.1",
"#types/react-leaflet": "^2.5.2",
"#types/react-router-dom": "^5.1.5",
"#types/react-slick": "^0.23.4",
"#types/testing-library__react": "^10.0.1",
"#types/urlencode": "^1.1.2",
"#types/webpack-env": "^1.16.3",
"#typescript-eslint/eslint-plugin": "^5.33.1",
"#typescript-eslint/parser": "^5.33.1",
"autoprefixer": "^9.7.6",
"babel-eslint": "10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-emotion": "^10.0.33",
"babel-preset-react-app": "^9.1.2",
"css-loader": "^3.5.3",
"eslint": "7.1.0",
"eslint-config-prettier": "6.10.1",
"eslint-import-resolver-jest": "3.0.0",
"eslint-import-resolver-webpack": "0.12.1",
"eslint-plugin-import": "2.21.2",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "4.0.2",
"html-webpack-plugin": "^4.2.1",
"husky": "^7.0.4",
"jest": "25.2.1",
"jest-emotion": "^10.0.32",
"lint-staged": "^10.1.6",
"npx": "^10.2.2",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"react-test-renderer": "^16.13.1",
"storybook-addon-emotion-theme": "^2.1.1",
"storybook-addon-jsx": "^7.2.3",
"style-loader": "^1.2.1",
"ts-jest": "^25.4.0",
"typescript": "4.6",
"typescript-styled-plugin": "^0.15.0",
"url-loader": "^4.1.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
What am I doing wrong?
Am new to reactjs, and am working on a project built on "architectui-react-pro" ui.
The project is working good on my m1 macbook, but not working on my freelancers machines (Windows). I tried to load it on another intel based macbook and am getting this error.
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
| import History from '../../utils/History';
| var Login = lazy(function () {
> return import("../../Pages/Login");
| });
|
Following is my package.json file:
"name": "architectui-react-pro",
"version": "1.6.1",
"private": true,
"description": "Financial Assistance - MHB",
"author": "MatrixSoftwares.com",
"homepage": "",
"repository": {
"type": "git",
"url": "git+https://github.com/dpackdev/architectui-react-pro"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.4",
"#progress/kendo-react-pdf": "^4.7.0",
"#types/googlemaps": "^3.43.3",
"#types/markerclustererplus": "^2.1.33",
"#wojtekmaj/react-datetimerange-picker": "^2.3.0",
"animate-sass": "^0.8.2",
"apexcharts": "^3.27.1",
"aphrodite": "^2.4.0",
"availity-reactstrap-validation": "^2.7.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"chart.js": "^2.9.4",
"chartist": "^0.10.1",
"chroma-js": "^2.1.2",
"ckeditor4": "^4.16.1",
"ckeditor4-react": "^1.4.2",
"classnames": "^2.3.1",
"date-arithmetic": "^3.1.0",
"date-fns": "^1.30.1",
"dom-to-pdf": "^0.2.2",
"dropzone": "^5.9.2",
"fibers": "^4.0.2",
"globalize": "^1.4.2",
"google-map-react": "^1.1.5",
"hamburgers": "^0.8.1",
"html2canvas": "^1.0.0-rc.7",
"install": "^0.13.0",
"jquery": "^3.6.0",
"js-base64": "^3.7.2",
"js-md5": "^0.7.3",
"jspdf": "^2.3.1",
"jw-react-pagination": "^1.1.0",
"loaders.css": "^0.1.2",
"m-react-splitters": "^1.2.0",
"moment": "^2.24.0",
"namor": "^1.1.2",
"node-sass": "^4.13.0",
"number-to-words": "^1.2.4",
"pe7-icon": "^1.0.4",
"radium": "^0.26.0",
"rc-slider": "^8.7.1",
"rc-tabs": "^9.6.7",
"rc-tree": "^2.1.4",
"react": "^16.14.0",
"react-animations": "^1.0.0",
"react-anime": "^3.0.3",
"react-apexcharts": "^1.3.9",
"react-app-polyfill": "^1.0.4",
"react-big-calendar": "^0.20.4",
"react-bootstrap-sweetalert": "^4.4.1",
"react-bootstrap-table-next": "^3.2.0",
"react-bootstrap-table2-filter": "^1.2.0",
"react-bootstrap-typeahead": "^3.4.7",
"react-burgers": "^1.3.0",
"react-chartist": "^0.13.3",
"react-chartjs-2": "^2.11.2",
"react-circle": "^1.1.1",
"react-color": "^2.19.3",
"react-compound-slider": "^2.4.0",
"react-cookie": "^4.0.3",
"react-copy-to-clipboard": "^5.0.3",
"react-countup": "^4.2.2",
"react-cropper": "^1.3.0",
"react-datepicker": "^2.9.6",
"react-dates": "^20.3.0",
"react-dnd": "^7.7.0",
"react-dnd-html5-backend": "^7.7.0",
"react-dom": "^16.14.0",
"react-dropzone": "^10.1.9",
"react-flag-icon-css": "^1.0.25",
"react-flagkit": "^1.0.2",
"react-icons": "^3.8.0",
"react-image-crop": "^8.6.12",
"react-input-mask": "^2.0.4",
"react-js-pagination": "^3.0.2",
"react-ladda": "^6.0.0",
"react-liquid-gauge": "^1.2.4",
"react-loader": "^2.4.7",
"react-loader-advanced": "^1.7.1",
"react-loaders": "^3.0.1",
"react-loading-overlay": "^1.0.1",
"react-map-gl": "^5.3.16",
"react-metismenu": "^1.4.0",
"react-motion-drawer": "^3.1.0",
"react-nouislider": "^2.0.1",
"react-numeric-input": "^2.2.3",
"react-on-screen": "^2.1.1",
"react-pagify": "^2.4.0",
"react-paginate": "^6.3.0",
"react-pdf": "^5.3.0",
"react-perfect-scrollbar": "^1.5.3",
"react-popper": "^1.3.11",
"react-rating": "^1.7.2",
"react-redux": "^7.2.4",
"react-redux-form": "^1.16.14",
"react-resize-detector": "^4.2.1",
"react-responsive-tabs": "^3.3.0",
"react-router-dom": "^5.1.0",
"react-scripts": "3.0.0",
"react-scroll": "^1.8.2",
"react-select": "^2.4.4",
"react-simple-maps": "^0.12.1",
"react-sizeme": "^2.6.7",
"react-slick": "^0.26.1",
"react-sortable-tree": "^2.6.2",
"react-sortable-tree-theme-file-explorer": "^2.0.0",
"react-sparklines": "^1.7.0",
"react-sticky-el": "^1.0.20",
"react-stickynode": "^2.1.1",
"react-svg-gauge": "^1.0.10",
"react-sweet-progress": "^1.1.2",
"react-switch": "^4.1.0",
"react-syntax-highlighter": "^10.3.5",
"react-table": "^7.7.0",
"react-textarea-autosize": "^7.1.0",
"react-to-pdf": "0.0.14",
"react-toastify": "^5.4.0",
"react-transition-group": "^1.2.1",
"react-validation": "^3.0.7",
"react-vertical-timeline-component": "^2.5.0",
"react-visibility-sensor": "^5.1.1",
"react-widgets": "^4.6.1",
"react-widgets-globalize": "^5.0.23",
"react-widgets-moment": "^4.0.30",
"react-widgets-simple-number": "^4.1.26",
"reactour": "^1.18.4",
"reactstrap": "^8.9.0",
"recharts": "^1.8.5",
"redux": "^4.1.0",
"redux-form": "^8.3.7",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rodal": "^1.6.3",
"sass": "^1.35.1",
"slick-carousel": "^1.8.1",
"styled-components": "^4.4.0",
"sweetalert": "2.1.2",
"sweetalert-react": "^0.4.11",
"sweetalert2": "^11.4.0",
"typescript": "^3.9.10",
"validator": "^12.1.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
"build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"webpack": "^4.28.4"
}
}
And here is the code from "/src/Layout/AppMain/index.js"
import { Router, Route, Switch, Redirect, useLocation } from 'react-router-dom';
import React, { Suspense, lazy, Fragment, useEffect } from "react";
import Loader from "react-loaders";
import { ToastContainer } from "react-toastify";
import PrivateRoutes from '../../utils/PrivateRoute';
import History from '../../utils/History';
const Login = lazy(() => import("../../Pages/Login"));
const AppMain = () => {
const location = useLocation()
if(location.pathname === '/')
{
History.replace('/applicant/analytics')
return <Redirect to="/applicant/analytics"/>
}
const suspenseFallback = (
<div className="loader-container">
<div className="loader-container-inner">
<div className="text-center">
<Loader type="ball-pulse"/>
</div>
<h6 className="mt-3">
Please wait while we load all the Applications examples
<small>Because this is a demonstration we load at once all the Applications examples. This wouldn't happen in a real live app!</small>
</h6>
</div>
</div>
)
return (
<Fragment>
<Suspense fallback={suspenseFallback}>
<Router history={History}>
<Switch>
<Route path="/applicant/login" component={Login} exact/>
<Route path="/" component={PrivateRoutes} />
</Switch>
</Router>
</Suspense>
<ToastContainer/>
</Fragment>
)
};
export default AppMain;
Please help me with getting the project up and running. Thanks, Mustafa.
I'm trying to pass state through a <Link />, which I have been able to do in the past without typescript. However typescript is throwing an error I'm not sure how to fix...
This is my packages I'm using...
"dependencies": {
"#material-ui/core": "^4.12.3",
"#mdi/js": "^6.2.95",
"#mdi/react": "^1.5.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"#types/lodash.debounce": "^4.0.6",
"#react-google-maps/api": "^2.2.0",
"#types/md5": "^2.3.1",
"axios": "^0.21.1",
"axios-auth-refresh": "^3.2.1",
"eslint-plugin-prettier": "^3.4.0",
"lodash.debounce": "^4.0.8",
"formik": "^2.2.9",
"geolib": "^3.3.1",
"http-proxy-middleware": "^2.0.1",
"md5": "^2.3.0",
"node-sass": "^6.0.1",
"papaparse": "^5.3.0",
"prettier": "^2.3.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-code-input": "^3.10.1",
"react-collapse": "^5.1.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-media": "^1.10.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"web-vitals": "^1.1.2",
"yup": "^0.32.9"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/google.maps": "^3.45.6",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-collapse": "^5.0.1",
"#types/react-dom": "^17.0.0",
"#types/react-redux": "^7.1.18",
"#types/react-router-dom": "^5.1.8",
"#typescript-eslint/eslint-plugin": "4.0.1",
"#typescript-eslint/parser": "4.0.1",
"#types/redux": "^3.6.0",
"#types/redux-logger": "^3.0.9",
"#types/redux-thunk": "^2.1.0",
"eslint": "^7.3.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jsdoc": "^28.6.1",
"typescript": "^3.9.6"
},
Based on the docs, it looks like you have to pass Link a to object containing all the information:
<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>
So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!
I'm trying to insert AppBar into my component. While all other material-ui components work fine, this one causes the following error:
Uncaught Error: Invalid tag: /f7f7800bcef3562e6f4df1583b20797b.js
at invariant (bundle.js:724)
at validateDangerousTag (bundle.js:47303)
at new ReactDOMComponent (bundle.js:47330)
at Object.createInternalComponent (bundle.js:20522)
at instantiateReactComponent (bundle.js:21633)
at instantiateChild (bundle.js:46812)
at bundle.js:46839
at traverseAllChildrenImpl (bundle.js:21875)
at traverseAllChildrenImpl (bundle.js:21891)
at traverseAllChildrenImpl (bundle.js:21891)
That is a piece of code with AppBar:
import React, { Component } from 'react';
import { List, ListItem } from 'material-ui/List';
import AppBar from 'material-ui/AppBar';
class Contacts extends Component {
render() {
return (
<div>
<AppBar title="title"/>
<List>
<ListItem primaryText="text" secondaryText="text"/>
</List>
</div>
);
}
}
export default Contacts;
When i remove <AppBar ... /> everything works fine.
These are my dependecies:
"dependencies": {
"axios": "^0.15.3",
"events": "^1.1.1",
"font-awesome": "^4.7.0",
"material-design-icons": "^3.0.1",
"material-ui": "^0.17.0",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1",
"roboto-fontface": "^0.7.0",
"rxjs": "^5.1.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
The same error occurs when i try to use compoents from pre-built SVG Icon set.