0

Been trying to learn to code, and came up with a project to create a web app to capture images, resize, sort and save images to a google drive into sorted folders, to later be used to train an AI Image recognition model.

I've gotten to the point where I"m trying to deploy it locally to test it from my phone. But I keep getting the same errors no matter what I try.

I have repeatedly updated webpack.config.js and installed the necessary polyfill nodes but it still gives me the same fallback errors.

As the Error Log is too large, I have pasted into here.

And here is my current webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    fallback: {
      "os": require.resolve("os-browserify/browser"),
      "path": require.resolve("path-browserify"),
      "querystring": require.resolve("querystring-es3"),
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "url": require.resolve("url/"),
      "zlib": require.resolve("browserify-zlib"),
      "process": require.resolve("process/browser"),
      "fs": false,
      "child_process": false,
      "net": false,
      "tls": require.resolve('tls-browserify'),
      "zlib": require.resolve("browserify-zlib"),
      "https": require.resolve("https-browserify"),
      "http2": require.resolve('http2'),
      "assert": require.resolve("assert/")
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};
3
  • You try to run Node code in a browser. It doesn't work this way. Commented Apr 27, 2023 at 11:20
  • Isn't that why I am using webpack? so that I can bundle everything together to run it? Right now I'm trying to just deploy it to do a quick test, eventually I'd like to have it hosted through my personal domain. Commented Apr 27, 2023 at 19:15
  • No. Webpack runs in Node process to build browser code. You'd need two separate apps here, server-side (Node) and client-side (browser). Commented Apr 28, 2023 at 1:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.