Using Kekule npm module with Webpack does not load Kekule properly. #36
Comments
|
Updated the PR to contain steps for potential fixes |
|
Hi @AaronLlanos, I myself have tested for several days but still haven't found an elegant solution. However, the JavaScript files inside kekule/dist directory have already been compressed (with kekule.min.js, which packed all common modules in one file), and it is not quite necessary to pack them with webpack again. Maybe webpack.IgnorePlugin can be used in project to explicitly bypass all files in Kekule directory? |
|
Webpack itself does not break. It will actually bundle all of the necessary files, but the problem is that when Doing so does two things for us. First, it would make this compatible with more node environments. Second, it also opens up compatibility for running this lib more friendly with major frameworks that build with webpack. i.e. React, Angular, Vue, etc... |
|
I'm having the same problem, and kekule can't add to the vue app. |
|
@gywgithub I have a webpack abled fork here: https://github.com/AaronLlanos/Kekule.js/tree/webpack-kekule I currently use this in a React project of mine and it works with the latest frontend libs such as webpack, react, vue, etc.. |
|
@AaronLlanos Great work, thanks, :). |
|
@AaronLlanos Well done, Thank you very much. |
|
Any chance to merge @AaronLlanos fork? Maybe have two variants of what is now |
|
My fork still uses the kekule.min.js but it utilizes webpack to generate out the minified file. My fork also makes assumptions about inchi, indigo, and openbabel that are not supported of the way @partridgejiang I'm sure would like to go. |
|
Alright. I found sort of a workaround for my requirements. Thanks all for your work on this. |
|
@AaronLlanos Yes of course. Would you please pull the fork to this repository? Thanks a lot. |
|
@AaronLlanos would love this in here as well |
|
@AaronLlanos have been playing around with your fork, mostly working but noticing I get Also apologies for following up on this issue but your fork doesn't have an issues tab :( Update: got it working on moldraw-master :) |
|
@robertf224 My apologies for my lack of participation here. I figured I'd still post the info just in case anyone else is wondering. The workflow I am using and will keep as a convention in my forked repo is:
|
|
I tryed to use Kekule in an angular app and didn't manage to make it work. Starting with https://github.com/AaronLlanos/Kekule.js/ master is not working import { Kekule } from 'kekule';
console.log(Kekule); // undefinedkekule-master seems to work but style are not loaded Is there any solution to load and use Kekule in an angular application ? Is there a particular commit I have to reference to make it work ? Thank you [EDIT] I also found in dist/kekule.webpack.dev.js the following : require("../src/widgets/themes/default/kekule.css");But cannot use it too as this file does not exists |
|
@mpomet Just try using the master branch of https://github.com/partridgejiang/Kekule.js? In our own test, the following code works well with webpack and the style sheet can be properly loaded: const Kekule = require('kekule');
console.log(Kekule);By the way, some special function parameters should not be mangled in the compression process of webpack, for exmaple, in the webpack.config.js: optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
mangle: {
reserved: ['$super', '$origin']
},
},
}),
],
} |
|
@partridgejiang thank you, I manage to get it works with master indeed. For anyone trying to use this lib with angular (v2 to 8+) that's what i did: // import { Kekule } from 'kekule'; doesn't work
// const Kekule = require('kekule'); doesn't work neither
// import * as Kekule from 'kekule'; // that works but some errors happens while running
// typings.d.ts
declare var Kekule: any; // Global typing works
// Now we can use kekule
const viewer = new Kekule.ChemWidget.Viewer(...);Then you have to load styles (angular.json): |
|
Unfortunately with the current master (Dec 26, 2019): importing using all three methods described by @mpomet above produce the following error for me: This error seems to be coming from the loading of the kekule webpack dist file. This wasn't happening with (Oct 12, 2019): |
|
@robotoer I've updated my last answer as it wasn't correct. |
|
So I'm not the most experience programmer but I've spent the majority of a couple days dealing with this and would appreciate any tips and assistance Currently trying to find a working solution on React I'm only getting this issue when in production, when I'm in my development build everything is working smoothly I've tried countless other things and would be happy to post the errors they give me here. Tried to use the typescript solution above |
|
@amitsetty, could any demo files be provided here? Otherwise the problem may not be easily figured out from the error stack. |
|
@partridgejiang There's also a branch with the webpack'd version Feel free to see the error and all in action by just cloning and running I can also demo anything else you'd like just let me know what will help you. Thanks for your help so much - you're saving my project :) |
|
@amitsetty, the problem is caused by the js minification process in build. You have to manually set the some mangle configs for webpack. In the node_modules/react-scripts/config/webpack.config.js, please add a line of code in after line 234: optimization: {
...
minimizer: [
...
new TerserPlugin({
...
mangle: {
safari10: true, // line 234
reserved: ['$super', '$origin'] // add this line of code
}
...
})
...
]
...
}After that, the build should be OK. Another approach is to use react-app-rewired to overwrite this configs rather than directly modifying it. Please refer to https://github.com/timarney/react-app-rewired. |
|
@partridgejiang thank you so much for your help. I just implemented this and it works great however I think it increased the loading time of the website by about 10s. Does this make sense? Is there any way around it? |
|
@amitsetty The change of webpack.config.js just tells webpack not to mangle some special function parameters to a short variable name such as e and does nothing else. So in my consideration the loading time should not be slowed down so much. In my own test your demo file can be loaded and parsed in less than 700ms in my computer. |
|
Hey there @partridgejiang , so far this has been working great. We've been using the molecule editor and now tried to incorporate a 3D molecule viewer. Is this supported in React? I seem to be getting an error that Feel free to check out my setup , I reproduced the error here |
|
Hi @amitsetty, the 3D rendering functions of Kekule.js requires a thrid-party library: Three.js. You have to import it in your code, something like: import * as THREE from 'three'; // supposing the Three.js has been installed by npm
window.THREE = THREE; // A trick, make Kekule.js know the exists of Three.js
const Kekule = require('kekule'); // use require instead of import here, since import can not be after a normal statement
// ...Some discussions at issue #33 (comment)_ and #161 (comment) may also be helpful. |
|
Great, that's somewhat working now. However, the molecule being rendered is displaying in the 3D viewer but as a flat molecule - without being 3d. Any idea how i go about fixing this? Thanks |
|
@amitsetty, it depends on the coordinates of the molecule source file. Most molecule files only include 2D coordinates of atoms illustrating the basic constitutions. Kekule.js does not have the ability to calculate out the 3D conformations from 2D coordinates (it is fairly a complex or time consuming job). In other words , files with real 3D coordinates should be provided to 3D viewer to display a proper 3D model. Here are some 3D source file examples: |
@partridgejiang Thanks so much for your solution, you saved my a**! |
I been facing many import issues and as been treated in this thread I was suspecting some kind of trouble during minification proccess. Hope this help anyone with the same issue. |
Uh oh!
There was an error while loading. Please reload this page.
References: #32
Steps to duplicate:
Begin any project with webpack base.
In a js file you import from index.html:
Now run webpack to minify your project and open the output file and receive:
In this particular case, we see that
documentis undefined. In #32 we see that passing the window object works for the webpack compiler but when the script is trying to load in the browser we get errors that it cannot find the proper files. This is because webpack did not see explicit requires of those files and loses them in the build process.Potential Fixes:
vm.runInThisContext.kekule.jsmust now be imported and exported appropriately for webpack and nodevm.runInThisContextdoes for node.The text was updated successfully, but these errors were encountered: