Bug when using import ReactBlockly from 'react-blockly' bug and 'index-dev.js' as entry point

[OriAmir]

In the readme file wrote that:

Once you've done either of these, you should be able to import ReactBlockly from 'react-blockly'; in your code and use ReactBlockly as a component.

But, basically, it's not correct, I just try to use that like that but then it's throwing an exception:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
The workaround for that is just to use the component as is: <ReactBlockly.BlocklyEditor .... />

The first interesting point is that in webpack.config the entry point is './src/dev-index.jsx' and not src/index.js - is it mistake or something ?
The second point is that index.js export object and not a component and that's why we can't use that as component

Maybe a clarify will be good here!
@nbudin I could change it myself but first I need to understand exactly what happening here!
Thanks.

[Nat Budin]

You're right, and actually I'm not sure why I wrote the readme that way. Here's what's happening:

• dev-index.jsx is the entry point only for the built-in demo app that you get with yarn run start. It shouldn't be shipped with the actual npm package at all.
• index.js is the entry point for the npm package (you can see that it's true in package.json), and as you pointed out, it exports an object.

I think what index.js probably should be doing instead is exporting each of the things in that object as named exports, and exporting BlocklyEditor as the default export. I'm not sure why that isn't what it's doing, but the README clearly is written with the assumption that it is. This might be a case of past-me and present-me disagreeing about style 😅

Anyway, if you're willing to change it yourself, I'd be happy to accept a PR and do a release. This will probably be a major version bump since it is technically a breaking change. If not, I might be able to do it in a bit. Let me know either way, and thanks for pointing this out!

[OriAmir]

sure I will open PR soon ,tnx!

[OriAmir]

hi @nbudin
I create PR , waiting for your review

#35

tnx:)

[Nat Budin]

This is now shipped as version 6.0.0! Thanks for the PR.

[OriAmir]

hi ! @nbudin
I try to use version 6 but it looks like something wrong maybe with the publish?
I got this error: Module not found: Can't resolve 'react-blockly' in '/home/ori/Desktop/blockly-samples/examples/blockly-react/src'

and,if I go to node_modules/react-blockly I find 2 folders dist and dist-modules instead only dist.
the second thing is that dist not contains our 'main' file and that's why it's not working:
"main": "dist/react-blockly.js",

I see that your publish don't use webpack and use the only babel , this command not compress all files into one single file as webpack done :
` "prepublishOnly": "babel ./src --out-dir ./dist",
this command creates many files inside dist with index.js , I try to change our main file in package.json to index.js but it seems like the export from the babel build is still wrong because babel as I say not combine all of them together.

I think we should use webpack also for the publish, or you have another idea to achieve that with babel only? currently, it's broken and we should fix that fast... what do you think ?

[Nat Budin]

Yes, it's because that main is now pointing at the webpack.config.js output, but we don't use webpack to build the package. I've made a branch that fixes this, by:

• Changing to dist/index.js as the entrypoint
• Removing webpack.config.js and the build script after all, because they're confusing and never used

The branch is called fix-entrypoint; if you have time to try it out and let me know if it works that'd be helpful. Otherwise I will try to test it and release later today.

[OriAmir]

@nbudin I check your branch and it seems like it works for me! pls verify if you have time.

Just a question - why did you not create the published file using webpack into 1 bundled file? what the reason to use only babel and to keep all the files inside the dist folder?

thanks!

[Nat Budin]

Thanks for checking! This is now published as version 6.0.1.

To be honest, the main reason the build is the way it is is because that's the way we built it originally at PatientsLikeMe and I haven't wanted to mess with it. I don't claim that it is the best possible choice overall, just that with the minimal amount of time I have to give to this package I haven't wanted to risk breaking it by changing the build process.

One possible advantage of separate files is that if you only wanted to import one of the components, you could do it directly by path (e.g. import BlocklyToolbox from 'react-blockly/dist/BlocklyToolbox' or something like that), and then your bundle would be smaller than importing the whole thing. For this package, though, I can't see a big advantage to that, since I assume almost everyone would want the whole thing.

In any case, I basically just haven't wanted to risk breaking the build for everyone.