Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot import moule. #651

Open
intelloid opened this issue Nov 15, 2021 · 3 comments
Open

Cannot import moule. #651

intelloid opened this issue Nov 15, 2021 · 3 comments

Comments

@intelloid
Copy link

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
Copy link
Owner

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
Copy link
Author

intelloid commented Nov 15, 2021

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
Copy link
Owner

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants