Webpack error: Can't resolve '@vaadin/flow-frontend/flow-component-renderer

Hi,

I have a Vaadin 14 app, and I keep getting the following error when deploying my app in wildfly:

ERROR in …/target/frontend/generated-flow-imports.js
Module not found: Error: Can’t resolve ‘@vaadin/flow-frontend/flow-component-renderer.js’ in ‘g:\proj\myproject\campaigns2\target\frontend’
@ …/target/frontend/generated-flow-imports.js 14:0-58
i 「wdm」: Failed to compile.

But every so often I build and the error goes away, but its there 99% of the time. I have no idea where to start looking for this error in the parallel world of the strange webpack build process.

Can anyone point me in the right direction please.

It looks like this is a random error.
It’s very hard to say what’s going on there in such cases.
It might be that this is just because of some env related issues.

flow-component-renderer.js should be copied into node_modules/@vaadin/flow-frontend inside your project root folder.
You may check whether it’s there if you see this error.
May be you need to do a full cleanup.

But if you get the error again : check that flow-component-renderer.js is inside node_modules/@vaadin/flow-frontend or not.
If it’s not then please create a ticket (and provide the steps to reproduce whenever it’s possible).

Hi Denis.

Thanks for the pointing me in the right direction. This new parallel build universe it very strange to me still. The node_modules directory is only created at run time!?! I assume this is not the case if you build under the maven production profile?

Anyway it turns out that if manually delete all the node_modules directories, and I build and deploy the war file, then the flow-component-renderer.js file is indeed in the directory you mention.

However, if I put the war file into an ear file and deploy that then the node_modules/@vaadin/flow-frontend directory is empty. I have no clue if this will be the case for production mode as well as I have not yet tried that. I will submit a ticket for this.

I suspect the intermittent behavior has to do with the build/run order.

Do you have any ideas for a workaround?

Looks like a mixture of two things:

  • dev mode when you build your project locally during development
  • production mode when you deploy your project.

When you build and develop your project locally you are using dev mode.
In this mode all files are on your local FS and when I say that node_modules/@vaadin/flow-frontend should contain the file I mean the dev mode only.

You are talking about deployment into an ear file.
In this case dev mode can’t be just used at all.
In this case your local FS files are not included at all in the resulting WAR.
What you do before deployment is : use maven plugin to build a WAR in production mode.
It will use files on your local FS (and yes node_modules/@vaadin/flow-frontend shoud contain it when you build it: during ht build).
The result is WAR file which doesn’t depend anymore on any FS files and it doesn’t even contain them.
It contains compiled bundle file stored inside it and no any file like flow-component-renderer.js is needed.
So when you deploy something the error about flow-component-renderer.js can’t just happen.

I use vaadin flow 14 with JavaEE and wildfly.
I have almost the same situation with following error.

ERROR in ../target/frontend/generated-flow-imports.js
12:33:15,863 ERROR [dev-webpack]
 (webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/comboBoxConnector-es6.js' in 'C:\Development\workspace\soft\bas-web\target\frontend'
12:33:15,864 ERROR [dev-webpack]
 (webpack)  @ ../target/frontend/generated-flow-imports.js 6:0-56

In my project i see @vaadin/flow-frontend is empty.
what should I do?

Hi Ali,

From what I figured out, if you are using an ear file with packaged war files, you have to use Vaadin 14 in production mode.

Hope this helps,
Franz

Franz Schöning:
Hi Ali,

From what I figured out, if you are using an ear file with packaged war files, you have to use Vaadin 14 in production mode.

Hope this helps,
Franz

I do not use ear. I use just war.

Denis Anisimov:
It looks like this is a random error.
It’s very hard to say what’s going on there in such cases.
It might be that this is just because of some env related issues.

flow-component-renderer.js should be copied into node_modules/@vaadin/flow-frontend inside your project root folder.
You may check whether it’s there if you see this error.
May be you need to do a full cleanup.

But if you get the error again : check that flow-component-renderer.js is inside node_modules/@vaadin/flow-frontend or not.
If it’s not then please create a ticket (and provide the steps to reproduce whenever it’s possible).

Hello Denis. for the issue above, should we delete the flow-component-renderer from the target directory?

Full clean up should delete target directory.
But technically everything in target is rewritten on re-build.
node_modules is the directory which is not normally removed.
In case there are frontend issues with build it’s always good to try to remove node_modules and do a full project clean up.