chrisguttandin/extendable-media-recorder

Cannot import moule.

Opened this issue · 3 comments

intelloid commented

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 :
... <script type="module" src="main.js"></script> ...

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

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

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

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>