How can I use React proptypes with Fusebox?

[stijnvanlieshout]

I'm trying to start a new react Js project with material-ui Next.

I've installed all dependencies:

"dependencies": {
    "material-ui": "^1.0.0-beta.27",
    "material-ui-icons": "^1.0.0-beta.17",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "reflect-metadata": "^0.1.8"
}

But I keep seeing the error: "prop-types not found on request". The breakpoint is here:

var _propTypes = require('prop-types');

exports['default'] = {
  jss: (0, _propTypes.shape)({

Any idea what's causing this error?

My code

My App page mimics this Material ui sampe page structure.

import * as React from "react";
import PropTypes from 'prop-types'
import { Component } from "react";
import { render } from 'react-dom';
import { Button } from 'material-ui/Button';
import './App.css';

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: true
        };
    }

    render() {
        const { classes } = this.props;
        const { isAuthenticated } = this.state;
        return (
            <Button raised color="primary">
              Hello World
            </Button>
        );
    }
}

App.propTypes = {
  classes: PropTypes.object.isRequired
};

export default App;

This app component is rendered in my index file like this:

ReactDOM.render(<App />, document.getElementById('root'));

[nchanged]

I think that’s a common mistake, it’s all over the doc - explained :) import * as props from because that module doesn’t export default, read up on getting started please

[nchanged]

Sorry just checked your sample more carefull, sorry I am on mobile,you can try setting target browser for fusebox, if it won’t help please create a repo where that error can be reproduce do

[stijnvanlieshout]

I tried with both "browser" and "universal" target but both don't solve the error. I made a repo here: https://github.com/stijnvanlieshout/MUI-react-starter-project

[nchanged]

@stijnvanlieshout yep, like I thought

import * as PropTypes from 'prop-types'

that one fixes it, but yields another error, I think not related to fuse-box.

UPD. i guess you need to wrap your component the get properties filled in.

[stijnvanlieshout]

Aaah, now I see what you mean with "because that module doesn’t export default". Misunderstood that part, the issue is resolved now. Thanks a lot!

[nchanged]

you are welcome!

[camsjams]

Hmm the proper syntax is import PropTypes from 'prop-types'; according to https://reactjs.org/docs/typechecking-with-proptypes.html

When importing a library like Auth0 Lock, fuse-box throws this error.

[nchanged]

I believe this is resolved with next and alpha

[camsjams]

Ok - thanks! I was using fuse@3.7.x as version 4 wasn't working with local TLS or some of the fuse-box plugins.

I can confirm that Auth0 Lock does play nicely on fuse-box@next but unfortunately the removal of the local https server is preventing me from using it.

[nchanged]

I will make sure to include it!