react-page / react-page

Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.

Home Page:https://react-page.github.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't load node_modules/@react-page/editor/lib-es/core/Provider/CallbacksProvider.js, file missing

GiambaFr opened this issue · comments

Describe the bug
Can't load node_modules/@react-page/editor/lib-es/core/Provider/CallbacksProvider.js, file missing.

log:

oadable-components: failed to asynchronously load component ObjectchunkName: undefinederror: "Loading chunk vendors-node_modules_react-page_editor_lib-es_editor_EditableEditor_js failed.\n(missing: http://facture.local/build/vendors-node_modules_react-page_editor_lib-es_editor_EditableEditor_js.js)"fileName: undefined[[Prototype]]: Object
(anonymous) @ loadable.esm.js:146
loadable.esm.js:377 Uncaught ChunkLoadError: Loading chunk vendors-node_modules_react-page_editor_lib-es_editor_EditableEditor_js failed.
(missing: http://facture.local/build/vendors-node_modules_react-page_editor_lib-es_editor_EditableEditor_js.js)
    at __webpack_require__.f.j (jsonp chunk loading:27:1)
    at ensure chunk:6:1
    at Array.reduce (<anonymous>)
Uncaught (in promise) ChunkLoadError: Loading chunk vendors-node_modules_react-page_editor_lib-es_editor_EditableEditor_js failed.
(missing: http://facture.local/build/vendors-node_modules_react-page_editor_lib-es_editor_EditableEditor_js.js)
    at __webpack_require__.f.j (jsonp chunk loading:27:1)

The app crash.

To Reproduce
Symfony 5.4, Webpack 5, MUI 5, React_Page Beta, file created with 'yarn encore dev'

The code

import React, {Component} from 'react';
import { withStyles } from '@mui/styles';
import axios from 'axios';

import CircularProgress from '@mui/material/CircularProgress';
import RefreshIcon from '@mui/icons-material/Refresh';
import SaveIcon from '@mui/icons-material/Save';
import Button from '@mui/material/Button';

import '@react-page/editor/lib/index.css';

//import type { Value } from '@react-page/editor';
import Editor from '@react-page/editor';

// The rich text area plugin
import slate from '@react-page/plugins-slate';
// image
import image from '@react-page/plugins-image';

// Stylesheets for the rich text area plugin
import '@react-page/plugins-slate/lib/index.css';
//Stylesheets for the imagea plugin
import '@react-page/plugins-image/lib/index.css';


class CMS extends Component {

    static defaultProps = {
        pageId: null
    }


    state= {
        page: {
            name: null,
            path: null,
            templatePath: null,
            isIndex: false,
            content: null
        },
        loadingPage: true,
    }

    loadPage = () => {
        const { pageId } = this.props;
        this.setState({loadingPage: true});
        self = this;
        axios.get('api/page/'+pageId)
          .then(response => {
            console.log(response);
            return response.data;
          }).then( data => {
            console.log(data);
            const page = data.page;
            self.setState({ page: page, loadingPage: false });
          })
          .catch(function (error) {
            console.log(error);
            self.setState({ loadingPage: false });
          })

    }

    componentDidMount() {
        this.loadPage();
    }

    refreshPage = () => {
        this.loadPage();
    }

    handleChange = (event) => {
        this.setState({[event.target.name]: event.target.value});
    }
    
    handleSubmit = (event) => {
        alert('Le nom a été soumis : ' + this.state.page.name);
        event.preventDefault();
    }

    render() {
        const { page, loadingPage } = this.state
        return(
            <div>
                <Button variant="text" onClick={this.refreshPage}><RefreshIcon/></Button>
                <Button variant="text" onClick={this.save}><SaveIcon/></Button>
                {loadingPage && <CircularProgress/>}
                {page.name &&
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Nom :
                        <input name="name" type="text" value={page.name} onChange={this.handleChange} />
                    </label>
                    <label>
                        Url :
                        <input name="path" type="text" value={page.path} onChange={this.handleChange} />
                    </label>
                    <label>
                        Template :
                        <input name="templatePath" type="text" value={page.templatePath} onChange={this.handleChange} />
                    </label>
                    <label>
                        Page d'accueil :
                        <input name="isIndex" type="text" value={page.isIndex} onChange={this.handleChange} />
                    </label>
                    <label>
                        Contenu :
                        <div>
                            <Editor cellPlugins={[slate(), image]} />
                        </div>
                    </label>
                    <input type="submit" value="Envoyer" />
                </form>
                }
            </div>
        )
    }

}

const styles = theme => ({
    root: {
        height: 240,
        flexGrow: 1,
        maxWidth: 400,
        overflowY: 'auto'
    },
  });
    

export default withStyles(styles, {withTheme: true})(CMS);

Expected behavior
See the editor in the app

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • Chrome 103, Win 10, apache2 on unbuntu

Additional context
No typeScript

The file is loaded but not parsed

Not a bug, I have to use typeScript.