Webpack compile error using VanillaJS

[pablosoci]

I'm trying to use the package using VanillaJS and when trying to load it I get the following error:

Uncaught (in promise) Error: Cannot find module 'canvas' at webpackMissingModule

After adding the canvas package I get: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Digging through the package code it looks like that “canvas” package that is being used is a dev-dependency of one of the dependencies, I tried adding it but then I get the other “node” issue I also noticed that its coming from index-node.js file but there is also an index.js file that is in the same directory and has essentially the same code but without the canvas package. There might be a node version of that tool and our code is trying to use that instead of the web version, it might be something implicit that is trying to guess whether to use node or web and its choosing the “node” version because we use commonjs in our project instead of ESM.

By hacking around a bit the konva/package.json and changing the “main” to use the “browser” file instead I no longer got the “canvas” issue though I still get some CSS errors

[AhmeeedMostafa]

The plugin is only for frontend usage not backend, canvas by default is a feature in the browser, per your error I see that canvas doesn't exist which means you are trying to use the plugin on the server side and this is not applicable.

[pablosoci]

@AhmeeedMostafa this is actually for frontend use which is actually why it's very strange that we're getting this error

[gk1041]

@AhmeeedMostafa our project is a web app, uses webpack with target: 'web' but we aren't using ESM or React.

Since we aren't using ESM I was able to get FilerobotImageEditor with dynamic import() like:

const FilerobotImageEditor = (await import('filerobot-image-editor')).default;

I was also able to get rid of the above error message by doing some hacky stuff with webpack like:

new webpack.NormalModuleReplacementPlugin(
    /konva\/lib\/index-node.js/,
    path.resolve(__dirname, '../node_modules/konva/lib/index.js')
),

This obviously isn't a proper solution but I'm trying to troubleshoot what is going on.

At this point I'm able to step through with debugger and see that we get all the way to the filerobotImageEditor.render() step without errors but when I try to let it finish I get a bunch of React errors.

[AhmeeedMostafa]

@pablosoci @gk1041 Hey, I couldn't investigate your issue unless of enough info and checking your project's configurations although what you mentioned is useful but still not enough for me to check.

so the best scenario is to include some codesandbox that contains your implementation and issue producible there and in that case I'd be able to help you for sure.

cause till now, it looks like you are not using the lib. for its intended use-case