How to use Puppeteer in a JHipster Monolithic application?

Question

I have created new simple project using jhipster 7.9.4 with the below jdl configs.

I need to have the Puppeteer (or any similar automation API) to open certain links. The links are provided in the entity let’s call it ‘nodes’. The same entity will provide the credentials (username/password) to be automatically filled and click the login button.

Here is the sample application config.

application {
  config {
    applicationType monolith
    authenticationType jwt
    baseName myapp
    blueprints []
    buildTool maven
    cacheProvider ehcache
    clientFramework angularX
    clientPackageManager npm
    clientTheme slate
    clientThemeVariant dark
    databaseType mongodb
    devDatabaseType mongodb
    dtoSuffix DTO
    enableGradleEnterprise false
    enableHibernateCache false
    enableSwaggerCodegen false
    enableTranslation false
    jhiPrefix jhi
    jhipsterVersion "7.9.4"
    languages [en]
    messageBroker false
    nativeLanguage en
    packageName com.mycompany.myapp
    prodDatabaseType mongodb
    reactive false
    searchEngine false
    serverPort 8080
    serviceDiscoveryType false
    skipClient false
    skipServer false
    skipUserManagement false
    testFrameworks [cypress]
    websocket spring-websocket
    withAdminUi true
  }
}

I have this sample code from puppeteer’s web site https://pptr.dev/:

const puppeteer = require('puppeteer');

async fillAndSubmitLoginForm() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to the login page
  await page.goto('https://local_ip/login');

  // Fill in the username and password fields
  await page.type('#username', 'your_username');
  await page.type('#password', 'your_password');

  // Click the login button
  await page.click('#login-button');

  // Wait for the login to complete (replace with an appropriate selector or condition)
  await page.waitForNavigation();

  // Take a screenshot after login (optional)
  await page.screenshot({ path: 'after-login.png' });

  // Close the browser
  await browser.close();
}

The problem is the whole project is not compiling leading to a very nasty error! Seems to be missing to configure the webpack.

Error!

....very long part....
./node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:20:0-28 - Error: Module not found: Error: Can't resolve 'path' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

./node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node/ScreenRecorder.js:82:0-49 - Error: Module not found: Error: Can't resolve 'child_process' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node'

./node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node/ScreenRecorder.js:83:0-37 - Error: Module not found: Error: Can't resolve 'stream' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

./node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node/util/fs.js:18:0-20 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/puppeteer/node_modules/puppeteer-core/lib/esm/puppeteer/node/util'
Did you mean './fs'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (/Users/tomcat/IdeaProjects/mobily/7.9.4/src/main/webapp, node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

./node_modules/yargs-parser/build/lib/index.js:12:0-42 - Error: Module not found: Error: Can't resolve 'path' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/yargs-parser/build/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

./node_modules/yargs-parser/build/lib/index.js:15:0-34 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/yargs-parser/build/lib'

./node_modules/y18n/build/lib/platform-shims/node.js:1:0-55 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/y18n/build/lib/platform-shims'

./node_modules/y18n/build/lib/platform-shims/node.js:3:0-31 - Error: Module not found: Error: Can't resolve 'path' in '/Users/tomcat/IdeaProjects/mobily/7.9.4/node_modules/y18n/build/lib/platform-shims'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.
[Browsersync] Proxying: http://localhost:4200
[Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:9000
    External: http://192.168.178.235:9000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------

I tried to configure the webpack but in vain. All I need to have a very simple jhipster app using the puppeteer API or any similar API.

Leave a Comment Cancel reply