How can I change the directory of package.json/node_modules?

Hi,
I have a couple of reasons for wanting to move the Node aspect of our Vaadin application into a sub-directory (which I’ve named .vaadin hoping that this directory is set as alternativeDir, having looked at the code that loads node_modules at runtime).

Stack (based on Vaadin start configuration):

  • Maven produces a war
  • Jakarta CDI
  • Running in Tomee

I found <configuration><npmFolder/></configuration> in vaadin-maven-plugin.

Customising this works in Maven until deployment when I get:

[webpack]
 ERROR dev-webpack - ERROR in Entry module not found: Error: Can't resolve '/Users/DJM6/Code/blah/target/frontend/generated-flow-imports.js' in '/Users/DJM6/Code/blah/frontend'
[webpack]
 ERROR dev-webpack - ℹ 「wdm」: Failed to compile.
[webpack]
 ERROR dev-webpack -

In production mode, this fails with:

[INFO]
 Running webpack ...

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 9dd5f27ce2ce4997a7d0
Version: webpack 4.42.0
Time: 112ms
Built at: 08/06/2020 12:04:58 PM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/usr/src/app'

It seems that setting npmFolder also changes where target/frontend/generated-flow-imports.js is output, explaining the development mode error, but I couldn’t find an option to control this.

Thanks for any help you can offer.
Dan.

I have a couple of reasons for wanting to move the Node aspect of our Vaadin application into a sub-directory

If your reason is that you want to optimize the hard drive usage by not having per project node_modules, but rather having a global cache where local node_module just symlinks, then there is already a solution in the latest version of the framework. You can configure it to use pnpm instead of npm.

See: https://vaadin.com/docs/v14/flow/advanced/tutorial-switch-npm-pnpm.html

Thanks Tatu,

Does switching to pNPM include the change to a global scope you mention?

Disk space isn’t my primary concern. We run a number of development tools on our codebase and the prescense of these Node files is generating a lot of noise when they work and some tools even fail :frowning:

I noticed the diff in the webpack.js file:

diff --git a/webpack.generated.js b/webpack.generated.js
index 1a30c18..4180c1d 100644
--- a/webpack.generated.js
+++ b/webpack.generated.js
@@ -12,10 +12,10 @@ const {BabelMultiTargetPlugin} = require('webpack-babel-multi-target-plugin');
 const path = require('path');
 const baseDir = path.resolve(__dirname);
 // the folder of app resources (main.js and flow templates)
-const frontendFolder = require('path').resolve(__dirname, 'frontend');
+const frontendFolder = require('path').resolve(__dirname, '../frontend');

-const fileNameOfTheFlowGeneratedMainEntryPoint = require('path').resolve(__dirname, 'target/frontend/generated-flow-imports.js');
-const mavenOutputFolderForFlowBundledFiles = require('path').resolve(__dirname, 'target/classes/META-INF/VAADIN');
+const fileNameOfTheFlowGeneratedMainEntryPoint = require('path').resolve(__dirname, '../target/frontend/generated-flow-imports.js');
+const mavenOutputFolderForFlowBundledFiles = require('path').resolve(__dirname, '../target/classes/META-INF/VAADIN');

 // public path for resources, must match Flow VAADIN_BUILD
 const build = 'build';

This seems correct, as it should be looking for the generated-flow-imports.js file up a level relatively, but the vaadin-maven-plugin is incorrectly (I think) also changing the output location of this file to .vaadin/target instead of leaving it in target.