Can't resolve fs, child_process

[arcovoltaico]

Hi, On my yt-dl branch on my forked https://github.com/arcovoltaico/angular-electron after npm install I will get errors from dependencies (look at the end of this text)

Adding this to the angular root "package.json" file has no effect. "browser": { "fs": false, "path": false, "os": false} I am only successful when I add it, straight into the dependency's own package.json : On fluent-ffmpeg-corrected "browser": { "fs": false, "child_process": false }, and this on isexe: "browser": { "fs": false, }, (edited)

Obviously editing a downloaded dependency is not a good practice. Is there another way to fix it within our code? Thanks a lot

Errors:

Compiled with problems:X

ERROR in ./node_modules/fluent-ffmpeg-corrected/lib/capabilities.js 4:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/fluent-ffmpeg-corrected/lib'


ERROR in ./node_modules/fluent-ffmpeg-corrected/lib/ffprobe.js 4:12-42

Module not found: Error: Can't resolve 'child_process' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/fluent-ffmpeg-corrected/lib'


ERROR in ./node_modules/fluent-ffmpeg-corrected/lib/processor.js 4:12-42

Module not found: Error: Can't resolve 'child_process' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/fluent-ffmpeg-corrected/lib'


ERROR in ./node_modules/fluent-ffmpeg-corrected/lib/processor.js 8:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/fluent-ffmpeg-corrected/lib'


ERROR in ./node_modules/fluent-ffmpeg-corrected/lib/recipes.js 4:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/fluent-ffmpeg-corrected/lib'


ERROR in ./node_modules/fluent-ffmpeg-corrected/lib/utils.js 4:11-40

Module not found: Error: Can't resolve 'child_process' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/fluent-ffmpeg-corrected/lib'


ERROR in ./node_modules/isexe/index.js 1:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/isexe'


ERROR in ./node_modules/isexe/mode.js 4:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/isexe'


ERROR in ./node_modules/isexe/windows.js 4:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/jordi.alhambraherraiz/MyRepos/U-Vox/angular-electron/node_modules/isexe'

[itmor]

resolve: { fallback: { fs: false, child_process: false, }, },

add fallback to angular.webpack.js

[nikita-fuchs]

resolve: { fallback: { fs: false, child_process: false, }, },

add fallback to angular.webpack.js

@itmor doing this leads to this error:

./src/main.ts:3:0-45 - Error: Module not found: Error: Can't resolve './app/app.module' in '/Users/xxx/Documents/angular-electron/src'

./src/main.ts:4:0-56 - Error: Module not found: Error: Can't resolve './environments/environment' in '/Users/xxx/Documents/angular-electron/src'

here is my full angular.webpack.js:

//Polyfill Node.js core modules in Webpack. This module is only needed for webpack 5+.
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

/**
 * Custom angular webpack configuration
 */
module.exports = (config, options) => {
    config.target = 'electron-renderer';

    if (options.fileReplacements) {
        for(let fileReplacement of options.fileReplacements) {
            if (fileReplacement.replace !== 'src/environments/environment.ts') {
                continue;
            }

            let fileReplacementParts = fileReplacement['with'].split('.');
            if (fileReplacementParts.length > 1 && ['web'].indexOf(fileReplacementParts[1]) >= 0) {
                config.target = 'web';
            }
            break;
        }
    }

    config.plugins = [
        ...config.plugins,
        new NodePolyfillPlugin({
			  excludeAliases: ["console"]
		})
    ];
    
    config.resolve = {
        fallback: {
            "fs": false,
            "child_process": false,
        }
    }

    return config;
}

[itmor]

@nikita-fuchs иди нахуй, ты с рашки) Тебе помогать я не буду

[nikita-fuchs]

Thanks to google translator I can assure you I'm living in Germany and definitely no Putin supporter whatsoever. 🙄 Слава Україні btw !

[itmor]

@nikita-fuchs Героям Слава!

[itmor]

@nikita-fuchs can you show me your module? './app/app.module'

[itmor]

@nikita-fuchs and show env congif dev/prod

[arcovoltaico]

Funnily enough, my project now works without any addition to package or angular. webpack. Probably something is being cached or pre built.

[nikita-fuchs]

I think I resolved my issue. It was mostly due to be trying to run code that was supposed to run in node wrongly and at a wrong spot. I was fooled by the imports in https://github.com/nikita-fuchs/devmode-ui/blob/continueOnAngular14/src/app/core/services/electron/electron.service.ts#L4 , and didn't notice that proper usage of these node-only libraries require precautions, like

this.shell = window.require('electron').shell;
this.fs = window.require('fs');

etc.

Looks like I'm good for now, thanks a lot.