fluent-ffmpeg / node-fluent-ffmpeg

A fluent API to FFMPEG (http://www.ffmpeg.org)
MIT License
7.63k stars 873 forks source link

resolve unable some modules: "./lib-cov/fluent-ffmpeg" in vite #1210

Open PDKSophia opened 1 year ago

PDKSophia commented 1 year ago

I also have the same problem. According to everyone's solutions, I have not solved it.

I use React+Vite+Electron. I will share some of my knowledge

when i downloaded fluent-ffmpeg,i want to import it,but i got error

then i went to the node_modules/fluent-ffmpeg folder to see its source code,the process.env.FLUENTFFMPEG_COV may be an error value.

module.exports = process.env.FLUENTFFMPEG_COV ? require('./lib-cov/fluent-ffmpeg') : require('./lib/fluent-ffmpeg');

in vite docs , we can be configured through the define attribute, so i go to configure value

// vite.config.js
export default defineConfig({
  // ...
  define: {
    'process.env.FLUENTFFMPEG_COV': false,
  },
}

And added two lines of code to the source code, print process.env.FLUENTFFMPEG_COV value

// node_modules/fluent-ffmpeg
console.log('[fluent-ffmpeg]', process.env.FLUENTFFMPEG_COV);
console.log('[fluent-ffmpeg]', typeof process.env.FLUENTFFMPEG_COV);

module.exports = process.env.FLUENTFFMPEG_COV ? require('./lib-cov/fluent-ffmpeg') : require('./lib/fluent-ffmpeg');

we expect it to be a boolean, but it's actually a string !!!

try again, this time we change it to undefined, same result !


No matter what value is configured, it is of string type and will meet the condition of true, so i try to configure as an empty string

Error , I don't know why, so hard !

The solution is to copy the fluent-ffmpeg folder, change the source code, but this is not what I expected !

when i'm depressed, i was surprised to find that the vite startup electron plugin I wrote can inject environment variables, below is my code:

import { Plugin } from 'vite';
import { buildMain, mainOutPath } from '../scripts/build.main';

export const devMainPlugin = (): Plugin => {
  return {
    name: 'vite-plugin-dev-main',
    configureServer(server) {
      buildMain();
      server.httpServer?.once('listening', () => {
        const { spawn } = require('child_process');
        const electronProcess = spawn(require('electron').toString(), [mainOutPath, '--inspect=9229', '--remote-debugging-port=9222', '--env=dev'], {
          cwd: process.cwd(),
          stdio: 'inherit',
          env: {
            FLUENTFFMPEG_COV: '',
          },
        });
        electronProcess.on('close', () => {
          server.close();
          process.exit();
        });
        server.httpServer?.once('close', () => {
          electronProcess.close();
          process.exit();
        });
      });
    },
  };
};

this way solved my problem !

Originally posted by @PDKSophia in https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/issues/573#issuecomment-1578026754

LinDaiDai commented 1 year ago

ai, but...

Geo25rey commented 1 year ago

For those using vite-plugin-electron in their vite.config.ts

Note: I assume that you aren't using ffmpeg in your preload script. If you do, just copy over the vite property from the main entrypoint section.

import { defineConfig } from 'vite';
import electron from 'vite-plugin-electron';

export default defineConfig({
  plugins: [
    electron([
      {
        entry: "src/electron/node/main.ts", // wherever your main entrypoint 
        vite: {
          build: {
            rollupOptions: {
              plugins: [
                alias({
                  entries: [
                    {
                      find: "./lib-cov/fluent-ffmpeg",
                      replacement: "./lib/fluent-ffmpeg",
                    },
                  ],
                }),
              ],
            },
          },
        },
      },
      {
        entry: "src/electron/node/preload.ts", // wherever your preload entrypoint 
        onstart(options) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          options.reload();
        },
      },
    ]),
  ]
});