3

I'm trying to get webpack to ignore an import, so that its imported by the browser using a native ES6 import statement, not webpack. I'm trying to get ffmpeg.js to import directly as it crashes webpack when it tries to bundle it, as the files are too large.

Following the answer here (How to exclude a module from webpack, and instead import it using es6), I have my code in the local tree as /ffmpeg/ffmpeg-mpeg.js and verified my dev server can access as http://localhost:8080/ffmpeg/ffmpeg-webm.js

I then import via:

  import ffmpeg from '/ffmpeg/ffmpeg-webm.js';

And add that to the externals section of my webpack config:

  externals: {
    '/ffmpeg/ffmpeg-webm.js': 'ffmpeg',
  },

The result is an link that looks like this

webpack:///external "ffmpeg"

containing:

module.exports = ffmpeg;

Which then fails with "Uncaught Error: Cannot find module ?" (In fact that error is hardcoded in the generated file)

So that seems to assume there is a global ffmpeg option and then maps that module to that, but instead I want it leave the line completely untouched by webpack and leave it to the browser.

Whats the correct way to do that? The exclude rule thats downvoted on that page doesn't work either.

griffin2000
  • 709
  • 9
  • 26
  • if it's global, ie on the `global` or `window` object you should be able to access it directly without importing it. eg `if (!window.ffmpeg) { /* do some fallback logic */ }` – Derek Apr 05 '20 at 23:17
  • I think that's the issue, ffmpeg isn't a global, it doesn't exist until the module is loaded via the import statement. In fact if I'm reading the generated code right, it looks like it will ALWAYS get that error as it hasn't found the global module at build time. – griffin2000 Apr 06 '20 at 15:40
  • I forgot to ask the obvious.. Did you include the external script in your app's html? You need to. (Eg: ``) – Tofandel Apr 08 '20 at 15:31

1 Answers1

2

Edit:

You can use this:

import(/* webpackIgnore: true */'/ffmpeg/ffmpeg-webm.js').then(({default: ffmpeg}) => {
  //Do what you want to do with ffmpeg
});

Which will prevent webpack from compiling the import (so it will be a regular ES6 import)

Original answer:

You forgot to include the external script in your page.

Also since you pointed out that your file is very big, I'd recommend to include it defered

So you need to add

<script src="/ffmpeg/ffmpeg-webm.js" defer></script>

To the head of your app and you would then import it slightly differently using the import function with a callback

import('/ffmpeg/ffmpeg-webm.js').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

Small note: the externals key does not need to be the path of your file, it's just the name you will use when importing, so rename it if you are getting confused with the path

module.export = {
  //...
  externals: {
    "ffmpeg-webm": "ffmpeg"
  }
}
//Then import
import('ffmpeg-webm').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

Alternatively for node js, instead of using externals you could use

const ffmpeg = __non_webpack_require__('/ffmpeg/ffmpeg-webm.js')

Just keep in mind that this will transform it as a normal require that only works with node js

Tofandel
  • 3,006
  • 1
  • 29
  • 48
  • 1
    But if I wanted to import via script tag I wouldn't need the import statement, If remove webpack from the equation ES6 can import that module fine. I just need to tell webpack to ignore that import statement and pass it through unaltered to the generated code and everything will work fine (and without trying to bundle it) – griffin2000 Apr 09 '20 at 14:43
  • Yes but what you don't get is that excluding it from the bundle means you need to include it in your html page for webpack to load it as an external dependency and then be able to import it.. There is no way around that one.. Did you at least try? – Tofandel Apr 09 '20 at 14:54
  • Its available at /ffmpeg/ffmpeg-webm.js. So without webpack code that import statement will work fine, without any additional script tags, the browser will find the import statement and load /ffmpeg/ffmpeg-webm.js (I've verified that in a small non-webpack example). If I wanted to add it as a script component, rather than a module, I wouldn't need the import statement – griffin2000 Apr 09 '20 at 15:23
  • Yes you do... If you want to import it as an external webpack module that's the whole point, you're confusing webpack import with es6, from the moment you declare a script as external you have to include it in some way for webpack to use it in your webpack app, that way is to have it load on the page and webpack reference it as a module that it can import, you can't have both it excluded from a bundle and imoorted – Tofandel Apr 09 '20 at 17:15
  • I was looking back at this and updated it with a real solution to your problem as `__non_webpack_require__` is node js only – Tofandel Mar 31 '22 at 19:40