search

chrisguttandin / extendable-media-recorder

An extendable drop-in replacement for the native MediaRecorder.
MIT License
258 stars 13 forks source link

Cannot import moule. #651

Open intelloid opened 2 years ago

intelloid commented 2 years ago

I want to test the module on web browser(chrome 95 desktop), but i cannot import it.

I've installed npm install extendable-media-recorder and npm install extendable-media-recorder-wav-encoder

index.html : ... ...

main.js : import { MediaRecorder, register } from './node_modules/extendable-media-recorder/build/es5/bundle.js'; import { connect } from './node_modules/extendable-media-recorder-wav-encoder/build/es5/bundle.js';

When browser loads index.html,

chrome console shows: Uncaught SyntaxError: The requested module './node_modules/extendable-media-recorder/build/es5/bundle.js' does not provide an export named 'MediaRecorder'

(import MediaRecorder : error) (import register : OK) (import connect : error)

Do i need some builder or additional process? Thank you.

chrisguttandin commented 2 years ago

Yes, you currently need a bundler like webpack or Rollup.js to use the ESM code in a browser.

But you can also use a service like jspm which might be a good alternative for building a quick prototype.

<script type="module">
    import { MediaRecoder, register } from 'https://dev.jspm.io/npm:extendable-media-recorder';
    import { connect } from 'https://dev.jspm.io/npm:extendable-media-recorder-wav-encoder';

    // ...
</script>
intelloid commented 2 years ago

Thank you very much for your response. Please forgive my rudeness.

For a quick prototype, I tried using jspm, But same error. (only module .js url changed)

index.html :

<!DOCTYPE html>
<html>
    <head>
<script type="module">
    import { MediaRecoder, register } from 'https://dev.jspm.io/npm:extendable-media-recorder';
    import { connect } from 'https://dev.jspm.io/npm:extendable-media-recorder-wav-encoder';
    // ...
</script>
</head>
    <body>
    </body>
</html>

Uncaught SyntaxError: The requested module 'https://dev.jspm.io/npm:extendable-media-recorder' does not provide an export named 'MediaRecoder'

chrisguttandin commented 2 years ago

Oh sorry, there is a typo in the snippet that I posted. It should be MediaRecorder and not MediaRecoder.

<script type="module">
    import { MediaRecorder, register } from 'https://dev.jspm.io/npm:extendable-media-recorder';
    import { connect } from 'https://dev.jspm.io/npm:extendable-media-recorder-wav-encoder';

    // ...
</script>