"Uncaught (in promise) Invariant Violation" When adding Select/TextField

[PirateNick]

My dependencies:

{
  "name": "xxxxxxxxxx",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/react": "16.8.13",
    "@types/react-dom": "^16.0.7",
    "@types/react-hot-loader": "3.0.3",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/webpack-env": "1.13.0",
    "@types/react-modal": "^3.2.1",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "css-loader": "0.28.4",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-hot-loader": "3.0.0-beta.7",
    "react-router-dom": "4.1.1",
    "style-loader": "0.18.2",
    "typescript": "^3.0.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "moment": "^2.22.2",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "interactjs": "^1.3.4",
    "react-modal": "^3.5.1",
    "@material-ui/core": "^3.2.0",
    "@material-ui/icons": "^3.0.1"
  }
}

error:

Client code:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Grid, Typography, TextField, Button } from '@material-ui/core';

import Dispatcher from '../../components/dispatcher/dispatcher';
import { ChangeEvent } from 'react';

interface Skill {
    id: number;
    name: string;
}

interface State {
    skills: Skill[];
    selectedSkillIndex: number;
    loading: boolean;
    skillLevelRequirement: string;
}

interface Props {

}

export class RecipeUploader extends React.Component<RouteComponentProps<Props>, State> {

    constructor(props: RouteComponentProps<Props>) {
        super(props);

        this.state = {
            skills: [],
            selectedSkillIndex: -1,
            skillLevelRequirement: '1',
            loading: true
        }
    }

    componentWillMount() {
        this.loadData();
    }

    async loadData() {
        var data = await Dispatcher.dispatch<any, any>("/RecipeUpload/GetCreateRecipeData", {});

        this.setState({
            skills: data.skills,
            selectedSkillIndex: 0,
            loading: false
        });
    }

    render() {
        if (this.state.loading) return <div />;

        return <Grid container spacing={16} direction="column" justify="center" alignItems="center">
            <Grid item>
                <Typography variant="h3">Add Recipe</Typography>
            </Grid>
            <Grid item>
            </Grid>
            <Grid item>
                <Grid container spacing={8} alignContent="center" justify="center">
                    <Grid item>
                        <Typography variant="h5">Level requirement</Typography>
                    </Grid>
                    <Grid item>
                        <TextField
                                id="standard-number" 
                                label="Number"
                                onChange={(e: ChangeEvent<HTMLSelectElement>) => { this.setState({ skillLevelRequirement: e.target.value }) }}
                                type="number"
                            />
                    </Grid>
                </Grid>
            </Grid>
            <Grid item>
                <Button variant="contained">Add Recipe to database</Button>
            </Grid>
        </Grid>;
    }
}

import * as React from 'react';
import { Route } from 'react-router-dom';

import { BaseLayout } from './components/ui/base-layout/base-layout';

import { RecipeUploader } from './pages/recipe-uploader/recipe-uploader'; 

export const routes = <BaseLayout>
    <Route exact path='/recipe-uploader' component={RecipeUploader as any} />
</BaseLayout>;

I've copied the react and material UI versions from my package file of a previous project, where I'm sure everything works fine. Any idea's?

[joshwooding]

This looks like a support question. We would need to see more of your code. Otherwise it’s just guesswork especially on bundled code.

[PirateNick]

I added all the code. Is there anything more you require?

[eps1lon]

You should strip this down to a minimal example with only material-ui and react dependencies. ComponenWillUnmount and react-hot-loader lead me to suspect that this is not an issue with our components. Could you post the exact versions you're using

[PirateNick]

After losing all hope and a stressful 2 days of googling, I fixed my problem.

I set up my project using asp .net core 2 is Visual Studio. Visual Studio generates your output scripts into wwwroot/dist folder. I simply had to delete that folder and rebuild my project.

The error above was a cached problem of incompatible Node Package Modules (NPM) and Visual Studio did not completely overwrite my dist folder. Why? No idea.

[joshwooding]

Glad to hear you fixed it.