Error when trying to import npm package (easyMDE) in application.js - (Uncaught ReferenceError: EasyMDE is not defined) - ruby-on-rails

Question

Im trying to include easyMDE in my rails 6 project. I was including it from an external source before and that worked (via unpkg.com). To improve loading times I wanted to include it into my project via yarn.
I did the following steps:
yarn add easymde --save
In application.js:
require("easymde");
But when reloading the page I get the following error:
Uncaught ReferenceError: EasyMDE is not defined
When I run webpack-dev-server I see that easymde.js gets compiled:
Built at: 08/11/2020 3:16:09 PM
Asset Size Chunks Chunk Names
js/application-caadc00338c3578fee39.js 1.2 MiB application [emitted] [immutable] application
js/application-caadc00338c3578fee39.js.map 1.39 MiB application [emitted] [dev] application
js/easymde-1f6737d8a160c1180536.js 872 KiB easymde [immutable] easymde
js/easymde-1f6737d8a160c1180536.js.map 805 KiB easymde [dev] easymde
manifest.json 675 bytes [emitted]
ℹ ｢wdm｣: Compiled successfully.
application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
require("easymde")
package.json:
{
"name": "logbook_v2",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"easymde": "^2.11.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.0"
}
}
Let me know if you need any more code. :-)
Update
Here is the file where I use the editor:
<%= render "components/sidebar" %>
<div class="form-wrapper post-form-wrapper">
<%= form_with model: #post, class: 'form post-form' do |f| %>
<%= f.text_field :name, placeholder: 'title', class: 'field post-field' %>
<%= f.text_area :content, id: 'mde' %>
<%= f.submit 'create post', class: 'form-button post-form-button' %>
<%end%>
</div>
<script type="text/javascript" charset="utf-8">
var easyMDE = new EasyMDE({
element: document.getElementById("mde"),
placeholder: "Write your post here...",
autosave: {
enabled: true,
uniqueId: <%= current_user.id %>
},
blockStyles: {
code: "~~~"
},
minHeight: "calc(100vh - 320px)",
renderingConfig: {
codeSyntaxHighlighting: true
},
promptURLs: true,
toolbar: ["bold", "italic", "strikethrough", "heading", "|", "code", "quote", "clean-block", "|", "link", "image", "|", "unordered-list", "ordered-list", "|", "preview", "side-by-side", "fullscreen", "|", "guide"]
});
</script>
If I put in import * as EasyMDE from 'easymde'; (suggested by #Ninh Le) at the beginning of the script I get this error: Uncaught SyntaxError: import declarations may only appear at top level of a module

Answer 1

Easymde using module.exports, you can find it here
So to use it in with yarn and rails 6 I think the way is in js file:
import * as EasyMDE from 'easymde';
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
Edit: To make it can call globally, call this in application.js file
import * as EasyMDE from 'easymde';
window.EasyMDE = EasyMDE;