Cannot find module

Question

so I'm developing an Electron application using Angular, but I'm facing some problems importing a new dependency (electron-regedit) to my main.js (where I put the Electron app, BrowserWindow, ipcMain, etc). When I try to package the application and try to open I receive the following message:

I searched a lot but anything that I tried works, I use electron-packager and webpack to package my application. One thing that I noticed is that the problem occurs with any dependency that I try to import in the main.js file, I tried it with the dependency "electron-log". Another things I tried to do was change the dependency from "dependencies" to "devDependencies" in package.json, reset node_modules and installed it again, but I wasn't successful.

I will share my webpack file, I believe my problem is in here or in electron-packager itself. This is my webpack file:

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');
const webpack = require('webpack');

const projectRoot = __dirname || process.cwd();
const isDevelopment = process.env.NODE_ENV === 'development';

const nodeModules = path.join(projectRoot, 'node_modules');
const sourceFolder = path.join(projectRoot, 'src');
const outputFolder = path.join(projectRoot, 'dist');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const rxPaths = require('rxjs/_esm5/path-mapping');

module.exports = {
  target: isDevelopment ? 'web' : 'electron-renderer',
  //devtool: isDevelopment ? 'source-map' : 'source-map',
  entry: {
    main: [path.join(sourceFolder, 'main.ts')],
  },
  module: {
    rules: [
      {
        // include fonts inline in css
        test: /\.(eot|ttf|otf|woff|woff2|svg)$/,
        type: 'asset/inline',
        include: nodeModules,
      },
      {
        test: /\.(svg|cur|jpg|png|ani|gif|webp)$/,
        type: 'asset/resource',
        exclude: nodeModules,
        generator: {
          filename: 'static/images/[name].[contenthash:20][ext][query]',
        },
      },
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        loader: '@ngtools/webpack',
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            // Translates CSS into CommonJS
            loader: 'css-loader',
            options: {
              sourceMap: true,
              //importLoaders: 1,
              //modules: true
              //url:false
            },
          },
          /*
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          */
          {
            // rewrites relative paths in url() statements based on the original source file, used for awesome font urls rewrite
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true,
              //debug: true,
            },
          },
          {
            // Compiles Sass to CSS
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                //includePaths: ['node_modules']
              },
            },
          },
        ],
      },
    ],
  },
  output: {
    clean: true, // Clean the output directory before emit.
    path: outputFolder,
    filename: 'static/js/[name].[contenthash:20].bundle.js',
    sourceMapFilename: 'static/js/[name].[contenthash:20].source.map',
    chunkFilename: 'static/js/[id].[contenthash:20].chunk.js',
    pathinfo: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: isDevelopment ? '[name].css' : '[name].[hash].css',
    }),
    new HtmlWebpackPlugin({
      template: path.join(sourceFolder, 'index.html'),
      filename: 'index.html',
      hash: false,
      inject: true,
      favicon: false,
      minify: isDevelopment ? false : true,
      cache: true,
      showErrors: true,
      title: 'project',
    }),
    new AngularCompilerPlugin({
      tsConfigPath: 'src/tsconfig.app.json',
      mainPath: 'main.ts',
      sourceMap: true,
      hostReplacementPaths: {
        'environments/environment.ts': isDevelopment
          ? 'environments/environment.ts'
          : 'environments/environment.prod.ts',
      },
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          context: 'src',
          to: '',
          from: 'assets/**/*',
          globOptions: {
            dot: true,
            gitignore: true,
            ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'],
          },
        },
      ],
    }),
  ],
  node: {
    global: true,
    __filename: true,
    __dirname: true,
  },
  resolve: {
    extensions: ['.ts', '.js', '.scss', '.css', '.html'],
    symlinks: true,
    modules: [sourceFolder, nodeModules],
    fallback: {
      fs: false,
      tls: false,
      net: false,
      os: false,
      zlib: false,
      child_process: false,
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      process: require.resolve('process/browser'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      assert: require.resolve('assert/'),
      path: require.resolve('path-browserify'),
      util: require.resolve('util/'),
      buffer: require.resolve('buffer/'),
    },
  },
};

And here is the npm spripts that I use to bundle the application (I use bundle:windows)

"copy": "copyfiles main.js package.json menu/* resources/* dist",
"build:prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
"package:windows": "node package --platform=win32 --arch=ia32",
"bundle:windows": "npm-run-all -s build:prod copy package:windows",

I hope someone can help me. Thanks.

Answer 1

Apparently, the problem here is that my project uses the same package.json for the main.js electron file and for the angular "application". To fix this problem I had to refactor the entire project, basically separating the project into two package.json.

UPDATE I discovered that the node_modules folder wasn't been copied to the dist folder, so what I did was install the modules, that I want to import in main.js, in a separated folder and import them using its paths