Jhipster 7.1 with React Prod build fails with webpack error

[ashishkp]

Overview of the issue

1. Create a Monolith Application with React Frontend from https://start.jhipster.tech/.
2. Unzip content
3. ./gradlew -Pprod bootJar

Fails with below error (It's also reproducible with Maven build, same error).

node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js "--config" "webpack/webpack.prod.js" "--progress=profile" [webpack-cli] Failed to load '/home/ec2-user/environment/tripmgmt/webpack/webpack.prod.js' config [webpack-cli] Error: Cannot find module 'workbox-build/build/options/schema/webpack-generate-sw' Require stack:

• /home/ec2-user/environment/tripmgmt/node_modules/workbox-webpack-plugin/build/generate-sw.js
• /home/ec2-user/environment/tripmgmt/node_modules/workbox-webpack-plugin/build/index.js
• /home/ec2-user/environment/tripmgmt/webpack/webpack.prod.js
• /home/ec2-user/environment/tripmgmt/node_modules/webpack-cli/lib/webpack-cli.js
• /home/ec2-user/environment/tripmgmt/node_modules/webpack-cli/lib/bootstrap.js
• /home/ec2-user/environment/tripmgmt/node_modules/webpack-cli/bin/cli.js
• /home/ec2-user/environment/tripmgmt/node_modules/webpack/bin/webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (/home/ec2-user/environment/tripmgmt/node_modules/v8-compile-cache/v8-compile-cache.js:159:20) at Object. (/home/ec2-user/environment/tripmgmt/node_modules/workbox-webpack-plugin/build/generate-sw.js:20:33) at Module._compile (/home/ec2-user/environment/tripmgmt/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [ '/home/ec2-user/environment/tripmgmt/node_modules/workbox-webpack-plugin/build/generate-sw.js', '/home/ec2-user/environment/tripmgmt/node_modules/workbox-webpack-plugin/build/index.js', '/home/ec2-user/environment/tripmgmt/webpack/webpack.prod.js', '/home/ec2-user/environment/tripmgmt/node_modules/webpack-cli/lib/webpack-cli.js', '/home/ec2-user/environment/tripmgmt/node_modules/webpack-cli/lib/bootstrap.js', '/home/ec2-user/environment/tripmgmt/node_modules/webpack-cli/bin/cli.js', '/home/ec2-user/environment/tripmgmt/node_modules/webpack/bin/webpack.js' ] } FAILURE: Build failed with an exception.

4. ./gradlew is successful, means -Pdev mode is default and it works.

Motivation for or Use Case

React is one of the main frontend technology used by many developers and build with production tag failing is a bug.

Reproduce the error

1. Create a Monolith Application with React Frontend from https://start.jhipster.tech/.
2. Unzip content
3. ./gradlew -Pprod bootJar

JHipster Version(s)

https://start.jhipster.tech/.

JHipster configuration

{ "generator-jhipster": { "applicationType": "monolith", "gitCompany": "", "baseName": "tripmgmt", "packageName": "com.example.travel", "packageFolder": "com/example/travel", "serverPort": 8080, "serviceDiscoveryType": false, "authenticationType": "jwt", "cacheProvider": "no", "enableHibernateCache": false, "websocket": false, "databaseType": "sql", "devDatabaseType": "h2Disk", "prodDatabaseType": "mysql", "searchEngine": false, "enableSwaggerCodegen": false, "messageBroker": false, "buildTool": "gradle", "useSass": true, "clientPackageManager": "npm", "testFrameworks": [], "enableTranslation": false, "nativeLanguage": "en", "languages": ["en"], "clientFramework": "react", "jhiPrefix": "jhi", "withAdminUi": true, "jhipsterVersion": "7.1.0", "skipClient": false, "skipServer": false, "skipUserManagement": false, "skipCheckLengthOfIdentifier": false, "skipFakeData": false, "entitySuffix": "", "dtoSuffix": "DTO", "blueprints": [], "otherModules": [], "pages": [], "creationTimestamp": 1628273313548, "jwtSecretKey": "", "devServerPort": 9060, "clientTheme": "none", "clientThemeVariant": "", "reactive": false } }

Entity configuration(s) entityName.json files generated in the .jhipster directory

NA

Browsers and Operating System

OS: Amazon Linux 2 Browser: Mozilla #Firefox

• [ ] Checking this box is mandatory (this is just to show you read everything)

[mshima]

Nothing we can do about this https://github.com/GoogleChrome/workbox/issues/2904. Update your workbox-webpack-plugin dependency.

[ashishkp]

Thanks @mshima for pointing dependency.

As per the workaround mentioned, workbox-webpack-plugin v6.2.0 is not backward compatible and so fix should be applied in following files as "~6.0.2" instead of "6.2.0"

generators/client/templates/react/package.json generators/client/templates/vue/package.json

[Gowtham-GitHub]

Thanks @mshima for pointing dependency.

As per the workaround mentioned, workbox-webpack-plugin v6.2.0 is not backward compatible and so fix should be applied in following files as "~6.0.2" instead of "6.2.0"

generators/client/templates/react/package.json generators/client/templates/vue/package.json

Hi Ashish,

Since I'm a newbie, Can you please be more specific? Actually I was making changes to the following files

~/environment/tripmgmt/node_modules/generator-jhipster/generators/client/templates/react/package.json ~/environment/tripmgmt/node_modules/generator-jhipster/generators/client/templates/vue/package.json

for the line "file-loader" : "6.2.0" as "file-loader" : "~6.0.2"

the above not worked, so also changed line "workbox-webpack-plugin": "6.1.5" as "workbox-webpack-plugin": "~6.0.2"

still not worked. so help me resolve this

[mshima]

The workaround is: Generate the application using jhipster --skip-install. Update workbox npm install workbox-webpack-plugin@latest

[Gowtham-GitHub]

Thank you Marcelo, let me try that.

[binhtruongit]

The workaround is: Generate the application using jhipster --skip-install. Update workbox npm install workbox-webpack-plugin@latest

Thank bro!