An unhandled error occurred inside electron-rebuild ENOENT: no such file or directory, lstat

[fbaldo31]

Complete error message is :

Building native module electron-native-patch-loader...
✖ Rebuild Failed

An unhandled error occurred inside electron-rebuild
ENOENT: no such file or directory, lstat '/path/to/project/node_modules/electron-native-patch-loader/node_modules'

Environment: Ubuntu 16.04
Node 8.9.1
yarn 1.7.0
webpack 4.14.0

I may miss something in webpack.config.js, (a full working example would be appreciated :) ).

const dev = process.env.NODE_ENV === "dev";
const path = require('path');
const Webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const exec = require('child_process').exec;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ElectronNativePlugin = require("electron-native-plugin");

// Html-webpack-plugin configuration
const indexConfig = {
    template: './src/main.ts',
    excludeChunks: ['electron'],
    baseHref: dev ? '/' : './',
    chunksSortMode: (chunk1, chunk2) => {
        // Set the order of files injected (dependencies before app)
        // https://github.com/jantimon/html-webpack-plugin/issues/481
        let orders = ['corejs', 'zonejs', 'app'];
        return orders.indexOf(chunk1.names[0]) - orders.indexOf(chunk2.names[0]);
    }
};

// Clean-webpack-plugin configuration
const pathsToClean = [
    './dist/css',
    './dist/assets',
    './dist/templates'
];

let webpackConfig = {
    mode: 'none',
    // How source maps are generated : style of source mapping
    devtool: dev ? 'eval-cheap-module-source-map' : false,
    // Development server configuration
    devServer: {
        historyApiFallback: true,
        // Execute custom middleware after all other middleware internally within the server
        after() {
            // Fix whitescreen bug on build with Electron BrowserWindow
            exec('electron . --dev');
        }
    },
    // Where webpack looks to start building the bundle
    entry: {
        'electron': './main', // Electron entry point
        'corejs': 'core-js/client/shim', // Angular dependency
        'zonejs': 'zone.js/dist/zone', // Angular dependency
        'app': './src/main.ts' // App entry point
    },
    // How the different types of modules within a project will be treated
    module: {
        rules: [
            {
                // All files with a '.ts' extension will be handled by ts-loader
                test: /\.ts$/,
                use: [
                    //'ts-loader',
                    "electron-native-patch-loader",
                    {
                        loader: "electron-native-loader",
                        options: {
                            files: ["/src/**/*.ts"],
                            outputPath: path.resolve('./dist')  // Set here your defined path 
                                                    // for the output bundles, e.g. "./dist"
                        }
                    }
                ],
                exclude: /node_modules/
            }, 
            {
                // All files with a '.scss' extension will be handled by sass-loader
                test: /\.s?css$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash:10].css'
                    }
                },
                    'extract-loader',
                {
                    loader: 'css-loader',
                    options: {
                        minimize: !dev
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: dev
                    }
                },
                    'resolve-url-loader',
                    'sass-loader'
                ],
            }, 
            {
                // All files with a '.html' extension will be handled by html-loader and save into external file
                test: /\.html$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash:10].html',
                    }
                },
                    'extract-loader',
                    'html-loader'
                ]
            }, 
            {
                // All images and fonts will be optimized and their paths will be solved
                enforce: 'pre',
                test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf|wav)(\?.*)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[name].[hash:10].[ext]',
                        limit: 8192
                    }
                }, {
                    loader: 'img-loader'
                }],
            }, 
            // {
            //     test: /\.js$/,
            //     use: 
            //     [
            //         "electron-native-patch-loader",
            //         {
            //             loader: "electron-native-loader",
            //             options: {
            //                 files: ["/src/**/*.ts"],
            //                 outputPath: path.resolve('./dist')  // Set here your defined path 
            //                                         // for the output bundles, e.g. "./dist"
            //             }
            //         }
            //     ]
            // },
            { 
                test: /\.node$/, 
                use: "electron-native-loader" 
            },
            // Ignore warnings about System.import in Angular
            { 
                test: /[\/\\]@angular[\/\\].+\.js$/, 
                parser: { 
                    system: true 
                }
            }
        ]
    },
    // Configure how modules are resolved
    resolve: {
        extensions: [".ts", ".js"]
    },
    // How and where webpack should output bundles, assets and anything else
    output: {
        path: path.resolve('./dist'),
        filename: '[name].js'
    },
    // What bundle information gets displayed
    stats: {
        warnings: false
    },
    // Target a specific environment (cf. doc)
    target: 'electron-main',
    // Configure whether to polyfill or mock certain Node.js globals and modules
    node: {
        __dirname: true,
        fs: 'empty',
        'font-awesome': 'empty'
    },
    // Customize the webpack build process with additionals plugins
    plugins: [
        new HtmlWebpackPlugin(indexConfig),
        new Webpack.ContextReplacementPlugin(/angular([\\\/])core([\\\/])/, path.resolve(__dirname, './src')),
        new CopyWebpackPlugin(['./package.json']),
        new ElectronNativePlugin({
            forceRebuild: false,
            outputPath: "./electron/native-modules/", // a default relative output path for all native modules
            userModules: 
            [
                // "./cc/bb/aa",   // path to the binding.gyp file 
                // { 
                //     source: "./native-module/",     // path to the binding.gyp file
                //     debugBuild: false,              // we are overriding the default debugBuild settings
                //     outputPath: "./greeting-module/" // this is a relative path to the path of output bundles, 
                //                                      // we override the default
                // }
            ],
            debugBuild: true        // yes, do debug builds
        }),
        new Webpack.IgnorePlugin(/node-gyp/),
        new Webpack.IgnorePlugin(/electron-native-patch-loader/)
    ],
};

// UglifyJs and clean output folder only for prod
if (!dev) {
    webpackConfig.plugins.push(new CleanWebpackPlugin(pathsToClean));
    webpackConfig.plugins.push(new UglifyJsPlugin());
}

// Export the config
module.exports = webpackConfig;

[evonox]

Hi @fbaldo31,
sorry for the late answer. The source of problem is that the plugin itself is interpreting as a native module and is trying to use Electron Rebuild on one of its loaders. I will try to reproduce this strange behavior with your configuration and reply as soon as possible. I am also going to prepare a simple working "Hello, world" example, too.

[evonox]

Hi @fbaldo31
as I have promised I have prepared a quick sample which can be found at https://github.com/evonox/electron-native-plugin-samples/tree/master/hello-world

[stowns]

I am having a similar issue but with sqlite3

Have tried several different configurations but can't seem to get this right. No matter what I do it appears the rebuild is looking for a node_modules dir that isn't there

[0] Rebuilding native module sqlite3...
[0]
[0] An unhandled error occurred inside electron-rebuild
[0] ENOENT: no such file or directory, lstat '/my-project-path/node_modules/sqlite3/node_modules'

webpack.js

const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ElectronNativePlugin = require("electron-native-plugin");

const outputPath = path.resolve(__dirname, '../app/build');
module.exports = {
  mode: 'development',
  context: path.join(__dirname, '../app'),
  devtool: 'inline-source-map',
  entry: {
    app: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:9000',
        'webpack/hot/only-dev-server',
        './src/main/components/index.tsx',
    ],
  },
  output: {
    path: outputPath,
    filename: 'app.bundle.js',
    publicPath: 'http://localhost:9000/',
  },
  resolve: {
    // changed from extensions: [".js", ".jsx"]
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  devServer: {
    hot: true,
    publicPath: 'http://localhost:9000/',
    historyApiFallback: true,
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'awesome-typescript-loader',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: [
          { 
            loader: "electron-native-patch-loader",
            options: {
                custom: {
                  "sqlite3": {
                      "test": "sqlite3\\.js$",
                      "patches": [
                          {
                              "find": "var binding_path = binary.find(path.resolve(path.join(__dirname,'../package.json')));",
                              "isFindRegExp": false,
                              "replace": ""
                          },
                          {
                              "find": "require(binding_path);",
                              "isFindRegExp": false,
                              "replace": "require('./binding/node-v57-win32-x64/node_sqlite3.node')"
                          }
                      ]
                  }
              }
            }
         },
         {
          loader: "electron-native-loader",
            options: {
                outputPath: outputPath  // Set here your defined path for the output bundles, e.g. "./dist"
            }
          }
        ]
      },
      { 
        test: /\.node$/, 
        use: "electron-native-loader" 
      },
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   use: {
      //     loader: 'babel-loader',
      //   },
      // },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'file-loader',
          options: {},
        }],
      },
      { 
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
        exclude: /node_modules/
      }
    ],
  },
  plugins: [
    new ElectronNativePlugin(),
    new webpack.IgnorePlugin(/node-gyp/),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new CopyWebpackPlugin([{
      from: './src/main/app.js',
    },
    {
      from: './src/main/index.html',
    },
    ]),
  ],
  node: {
    fs: 'empty'
  }
};

[evonox]

Hi @stowns,
thanks for reporting the issue. I would ask you for some more information:

1. What platform are you using? (For me to prepare as much compatible environment as possible).
2. What version of ElectronNativePlugin are you using? The latest is 0.3.
3. Currently I think the ElectronNativePlugin does not run when using devserver. Could you please try to build a release prototype in Electron? Or just tell me if you are trying to run it through devserver...

[evonox]

Dear @fbaldo31 , @stowns
I very apologize for not answering for long time. I have bad news in the sense that I am very busy with a different project for now. I have a request for a person who might be willing to take over the ElectronNativePlugin to continue its development. If you know about someone who might continue the development of this plugin, then I am ready to transfer the ownership of this project.