Using lib produces render error

[galfaroth]

Hey,
Repro steps scenario #1 (repo+example):
If you change the line in StoryEditor.js in example
import DragDropContainer from "../../dist/container"
to
import DragDropContainer from "slate-react-dnd-plugin"
the editor doesn't work.

Anytime I want to import the plugin to any of my project I have exact the same error. Somehow only the example works if you build the library one dir higher. But when it wants to use the actual npm package it is not working. Nor is the package working in any of my projects.

Am I doing something wrong or there is some configuration problem?

Repro steps scenario #2 (fresh react project):
Please try to create a simple react app anywhere, just use npm install slate-react-dnd-plugin --save and copy/paste App.js and StoryEditor.js. Change imports to 'slate-react-dnd-plugin' and you will see it doesn't work throwing render null errors. Here is the minified App.js that works in example folder (if lib is built one dir higher):

import React, { Component } from 'react';
import { Editor } from 'slate-react'
import { Value } from 'slate'

import DragDropContainer from "slate-react-dnd-plugin"
import { inject } from "slate-react-dnd-plugin"

const initialValue = Value.fromJSON({
    document: {
        nodes: [
            {
                object: 'block',
                type: 'paragraph',
                nodes: [
                    {
                        object: 'text',
                        leaves: [
                            {
                                text: 'A line of text in a paragraph.'
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

class ParagraphNode extends React.Component {
    render() {
        return (<p {...this.props.attributes} >{this.props.children}</p>)
    }
}

ParagraphNode.PLUGIN_DEFAULT_TEMPLATE = {
}

const blockStyle = {
    backgroundColor: 'white',
    cursor: 'move',
    opacity: 1
};

const renderNode = (props) => {
    switch (props.node.type) {
        case 'paragraph':
            return <ParagraphNode {...props} />;
        default:
            return null;
    }
  }
  const renderBlock = (isDragging, children) => {
    return <div style={blockStyle}>{children}</div>
  }

class StoryEditor extends React.Component {

    state = {
        value: initialValue
    };

    onChange({ value }) {
        this.setState({ value })
    }
    plugins = inject([{renderNode}],{renderBlock});
    render() {
        return (
            <Editor
                value={this.state.value}
                plugins={this.plugins}
                onChange={this.onChange.bind(this)} />
        )
    }
}

class App extends Component {
  render() {
    return (
        <DragDropContainer>
                <StoryEditor/>
        </DragDropContainer>
    );
  }
}

export default App;

Here's the stack trace:

index.js:2178 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:81.
    in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
createElementWithValidation @ react.development.js:1243
render @ App.js:80
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap d13401ee605a32928799:678
fn @ bootstrap d13401ee605a32928799:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap d13401ee605a32928799:678
(anonymous) @ bootstrap d13401ee605a32928799:724
(anonymous) @ bootstrap d13401ee605a32928799:724
invariant.js:42 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    at invariant (http://localhost:3000/static/js/bundle.js:4611:15)
    at createFiberFromElement (http://localhost:3000/static/js/bundle.js:31284:5)
    at reconcileSingleElement (http://localhost:3000/static/js/bundle.js:33062:23)
    at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:33166:35)
    at reconcileChildrenAtExpirationTime (http://localhost:3000/static/js/bundle.js:33287:30)
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:33278:5)
    at finishClassComponent (http://localhost:3000/static/js/bundle.js:33412:5)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:33381:12)
    at beginWork (http://localhost:3000/static/js/bundle.js:33756:16)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35755:16)
    at workLoop (http://localhost:3000/static/js/bundle.js:35819:26)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:26073:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:26112:16)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:25969:27)
    at renderRoot (http://localhost:3000/static/js/bundle.js:35897:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:36545:24)
    at performWork (http://localhost:3000/static/js/bundle.js:36498:7)
    at requestWork (http://localhost:3000/static/js/bundle.js:36409:7)
    at scheduleWorkImpl (http://localhost:3000/static/js/bundle.js:36263:11)
    at scheduleWork (http://localhost:3000/static/js/bundle.js:36220:12)
    at scheduleTopLevelUpdate (http://localhost:3000/static/js/bundle.js:36724:5)
    at Object.updateContainer (http://localhost:3000/static/js/bundle.js:36762:7)
    at http://localhost:3000/static/js/bundle.js:40757:19
    at Object.unbatchedUpdates (http://localhost:3000/static/js/bundle.js:36633:12)
    at renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:40756:17)
    at Object.render (http://localhost:3000/static/js/bundle.js:40821:12)
    at Object../src/index.js (http://localhost:3000/static/js/bundle.js:77760:51)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:679:30)
    at fn (http://localhost:3000/static/js/bundle.js:89:20)
    at Object.0 (http://localhost:3000/static/js/bundle.js:77906:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:679:30)
    at http://localhost:3000/static/js/bundle.js:725:37
    at http://localhost:3000/static/js/bundle.js:728:10
invariant @ invariant.js:42
createFiberFromElement @ react-dom.development.js:5753
reconcileSingleElement @ react-dom.development.js:7531
reconcileChildFibers @ react-dom.development.js:7635
reconcileChildrenAtExpirationTime @ react-dom.development.js:7756
reconcileChildren @ react-dom.development.js:7747
finishClassComponent @ react-dom.development.js:7881
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap d13401ee605a32928799:678
fn @ bootstrap d13401ee605a32928799:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap d13401ee605a32928799:678
(anonymous) @ bootstrap d13401ee605a32928799:724
(anonymous) @ bootstrap d13401ee605a32928799:724
index.js:2178 The above error occurred in the <App> component:
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap d13401ee605a32928799:678
fn @ bootstrap d13401ee605a32928799:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap d13401ee605a32928799:678
(anonymous) @ bootstrap d13401ee605a32928799:724
(anonymous) @ bootstrap d13401ee605a32928799:724
invariant.js:42 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    at invariant (http://localhost:3000/static/js/bundle.js:4611:15)
    at createFiberFromElement (http://localhost:3000/static/js/bundle.js:31284:5)
    at reconcileSingleElement (http://localhost:3000/static/js/bundle.js:33062:23)
    at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:33166:35)
    at reconcileChildrenAtExpirationTime (http://localhost:3000/static/js/bundle.js:33287:30)
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:33278:5)
    at finishClassComponent (http://localhost:3000/static/js/bundle.js:33412:5)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:33381:12)
    at beginWork (http://localhost:3000/static/js/bundle.js:33756:16)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35755:16)
    at workLoop (http://localhost:3000/static/js/bundle.js:35819:26)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:26073:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:26112:16)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:25969:27)
    at renderRoot (http://localhost:3000/static/js/bundle.js:35897:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:36545:24)
    at performWork (http://localhost:3000/static/js/bundle.js:36498:7)
    at requestWork (http://localhost:3000/static/js/bundle.js:36409:7)
    at scheduleWorkImpl (http://localhost:3000/static/js/bundle.js:36263:11)
    at scheduleWork (http://localhost:3000/static/js/bundle.js:36220:12)
    at scheduleTopLevelUpdate (http://localhost:3000/static/js/bundle.js:36724:5)
    at Object.updateContainer (http://localhost:3000/static/js/bundle.js:36762:7)
    at http://localhost:3000/static/js/bundle.js:40757:19
    at Object.unbatchedUpdates (http://localhost:3000/static/js/bundle.js:36633:12)
    at renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:40756:17)
    at Object.render (http://localhost:3000/static/js/bundle.js:40821:12)
    at Object../src/index.js (http://localhost:3000/static/js/bundle.js:77760:51)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:679:30)
    at fn (http://localhost:3000/static/js/bundle.js:89:20)
    at Object.0 (http://localhost:3000/static/js/bundle.js:77906:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:679:30)
    at http://localhost:3000/static/js/bundle.js:725:37
    at http://localhost:3000/static/js/bundle.js:728:10

[galfaroth]

Okay I figured out if my project already had a newest slate, this package newer got built well. Can you update to a newest slate-react?

[jensneuse]

I'll look into this.

[jensneuse]

To be honest, this repo unfortunately wasn't maintained well after its initially been published. I currently don't have the time to fix the compilation errors. It seems we need to update several dependencies and fix breaking changes. Help/PR's are welcomed! I'm really sorry but there seems no quick fix to me. If you could fix the bugs I'm able to publish the updated version to npm.

[beorn]

Just wondering how feasible it is to make this work with the latest react, slatejs, and react-dnd? 🙁