frankcollins3 / fill_container

codecamp team project updated with new icon screen menu + puppeteer icon search, GraphQL, redux, relational psql !mongo, and accuweatherAPI
1 stars 0 forks source link

puppeteer issues with its own dependencies: [6:03am] #256

Closed frankcollins3 closed 1 year ago

frankcollins3 commented 1 year ago

attempting to do: deploy app. webpack and routes and puppeteer are starting to collide. Most routes fixed now since setting up webpack.

error: puppeteer apparently depends on such libraries as: url, assert, child_process, browserify, os-stream, etc

Since webpacks installation: Have been serving this app with 109 webpack issues 9 warnings everything compiles okay and correctly but with an iterm2 webpack error:

proposed approach: 👍 now down to 43 issues 9 warnings

also part of the problem is chatGPT is somewhat having "no clue" and has needed sense talking into it.

frankcollins3 commented 1 year ago

regarding chatGPT: " I apologize for the confusion earlier. You're correct that setting child_process to false in the resolve fallback configuration won't work because child_process is a core Node.js module and cannot be resolved in the browser environment.

The error you're seeing indicates that the @puppeteer/browsers package is trying to import the child_process module, which is not available in the browser.

To resolve this issue, you can consider using a different package or library that provides browser-compatible functionality similar to puppeteer but without the reliance on child_process. One such alternative is playwright, which is a browser automation library that supports multiple browsers and doesn't require the use of child_process. You can find more information about playwright here: https://playwright.dev/

Alternatively, if you specifically need to use puppeteer and cannot switch to another library, you may need to explore different build tools or environments that support running Node.js code in the browser, such as using tools like browserify or webpack with server-side rendering. These tools can help bundle and transform the code to make it compatible with the browser environment.

Please note that using Node.js-specific modules like child_process in a browser environment can be challenging, and it's important to consider the limitations and requirements of the packages you're using. "

doing the opposite of what it says to do which is to NOT install the libraries since they come with node is whats brought down the errors with webpack down from 90 to 40

frankcollins3 commented 1 year ago

coming out in the rinse during build && deployment [10:34pm]

frankcollins3 commented 1 year ago

https://stackoverflow.com/questions/54459442/module-not-found-error-cant-resolve-child-process-how-to-fix

{
  "name": "fill_cont",
  "version": "1.0.0",
  "description": "Water App",
  "main": "index.js",
  "browser": {
    "child_process": false
  },

[11:04am]

frankcollins3 commented 1 year ago
const path = require('path');
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');

module.exports = {
  entry: './server/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new Dotenv(),
    new webpack.IgnorePlugin({
      resourceRegExp: /^child_process$/,
    }),
  ],
  resolve: {
    fallback: {
      fs: false, // Disable resolving 'fs' module
      stream: require.resolve('stream-browserify'), // Resolve 'stream' module using 'stream-browserify' package
      https: require.resolve('https-browserify'),
      http: require.resolve('stream-http'),
      querystring: require.resolve('querystring-es3'), // Add fallback for 'querystring' module
      crypto: require.resolve('crypto-browserify'), // Add fallback for 'crypto' module
      constants: require.resolve('constants-browserify'), // Add fallback for 'constants' module
      module: require.resolve('module'), // Add fallback for 'module' module
      url: require.resolve('url/'),
      zlib: require.resolve('browserify-zlib'),
      os: require.resolve('os-browserify/browser'),
      assert: require.resolve('assert/'),
      './zlib_bindings': require.resolve('browserify-zlib/lib/binding'),
    },
  },
};