Basics for using npm modules in Phoenix 1.4 application

Hello all,

I recently started experimenting with Phoenix for a personal project, and am loving it so far. However, I’ve gotten really stuck with Webpack and using node modules in my project. I don’t have any experience in front end development, and am in over my head with some of these topics.

I’m trying to use the node module simplemde to be able to turn a textarea into a markdown editor. While I was able to get it working by including the CDN in my html.eex file as follows:

<%= form_for @changeset, Routes.post_path(@conn, :create), fn f -> %>
  <%= label f, :title %>
  <%= text_input f, :title, required: true, placeholder: "Post Title" %>
  <%= error_tag f, :title %>

  <%= label f, :body %>
  <%= textarea f, :body, rows: 20, required: true, focusable: true, placeholder: "Post Body" %>
  <%= error_tag f, :body %>

  <div class="row">
    <div class="column">
      <%= submit "Publish" %>
    <div class="column column-50">
      <%= link "Save", class: "button button-outline", to: Routes.post_path(@conn, :index), data: [confirm: "Really discard all changes?"] %>
    <div class="column">
      <%= link "Discard", class: "button button-outline float-right", to: Routes.post_path(@conn, :index), data: [confirm: "Really discard all changes?"] %>
<% end %>

<link rel="stylesheet" href="">
<script src=""></script>
<script type="text/javascript">
  new SimpleMDE({
    element: document.getElementById('post_body'),
    spellChecker: true

I’ve been having great difficulty actually adding it to my project via webpack though. The steps I’ve taken have been:

Added to package.json and installed node modules

"simplemde": "^1.11.2"
npm install

Added the import to my app.js file:

import css from "../css/app.css"
import "phoenix_html"
import SimpleMDE from "simplemde"

Tried to use simplemde within a script tag of my html.eex file (for brevity, it is the same code as above, except I removed the stylesheet and script with the cdn src tag)

This resulted in the textarea returning to the plain html textarea, with no markdown controls, and an error that SimpleMDE is not defined in the browser console.

My next idea was to remove the script tag with the setup for simplemde from the html.eex file and move it to the app.js file. This worked, and the code is as follows:

import css from "../css/app.css"
import "phoenix_html"
import SimpleMDE from "simplemde"

new SimpleMDE({
  element: document.getElementById('post_body'),
  spellChecker: true

There seem to be two problems with this approach, however. 1) the formatting of the textarea isn’t correct. I believe I still need to import or include the stylesheet. 2) this solution applies to all of the pages across my application, because it is in the app.js file. So, when I go to any other page, I get console error messages that say SimpleMDE: Error. No element was found (like it should, since there is no element with id post_body on those pages).

So, from this I have several questions:
How do I share the modules that have been imported to the scripts within my html files?
What is the best practice for using javascript in my application - does it make more sense to always create a javascript file instead of embedding it into a script tag? (is that more maintainable?)
I’m quite certain that the CSS file for simplemde can be imported as well - how do I go about that, and in the future how do I figure out what the names of importable objects are?

I appreciate the help! Cheers

  1. In your app.css, add
@import "simplemde";
  1. In your app.js, check if #post_body exists:
var postBody = document.getElementById('post_body');

if (postBody) {
  new SimpleMDE({
    element: postBody,
    spellChecker: true

Welcome to elixir forum.

Did you manually add that?

Cause npm install --save "yourpackagename" will add it to your package.json file.

As for SimpleMDE I believe, correct me if I’m wrong, you need to tell webpack that it’s global. Check your javascript console if it’s complaining about SimpleMDE not being found.

-  9 module.exports = (env, options) => ({
+ 10   optimization: {...}
+ 27   entry: {...}
+ 30   output: {...}
+ 34   module: {...}
| 63   plugins: [
| 64     new MiniCssExtractPlugin({ filename: '../css/app.css' }),
| 65     new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
- 66     new Webpack.ProvidePlugin({ // inject ES5 modules as global vars
2 67       $: 'jquery',
2 68       jQuery: 'jquery', 'window.jQuery': 'jquery',
2 69       Popper: ['popper.js', 'default'],
2 70       Fuse: 'fuse.js',
2 71     }),
| 72   ],
| 73 });

So line 66, you can put SimpleMDE: 'simplemde' like I did with $: 'jquery',. Making it global so all other javascript can detect it if it’s expecting it to be named SimpleMDE.


Is up to you, I’d likely use a public CDN if the dependency is very large (and indeed 263kb of JavaScript + 10.7kb of CSS is heavy enough!), also a CDN helps you to speed up your webpage if the user has already cached that dependency in its browser. However it’s totally fine if you want to serve SimpleMDE by yourself, just have in mind that you don’t need it in every page, so you should split that dependency from your app bundle. app.js will load by default in every page, so it’s a nice file to put some dependencies to interact with your UI (React.js, Vue.js, jQuery…), nothing more, it should be as lightweight as possible to load faster.

Most of the time I generate a vendor.js from the dependencies of app.js to keep both small.

1 Like

Hi @aptinio -

Thanks for the quick reply! I tried adding @import "simplemde" to the css file and the suggestion to wrap my simplemde object with an if statement in app.js, however, I was running into further errors. Apparently, it cannot find the module.

Error: Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './simplemde'

Also, what is the difference between @import and import? Is the @ only used in a css file?


Hi @mythicalprogrammer -

Thanks for the warm welcome.

Did you manually add that?

Yeah I did - hadn’t realized that npm would take care of this for me! I undid my work and added it with this command. Out of curiosity, why did npm add it to dependencies instead of devDependencies (which is where I had put it originally)?

Also, I am getting errors when trying to add the dependency to Webpack.ProvidePlugin… my understanding is that Webpack is not defined

ReferenceError: Webpack is not defined


Hi @adrianrl -

Thanks for this suggestion. I guess I hadn’t thought much about how a CDN can speed up the loading time of the application. With this suggestion, I probably will revert back to using the CDN for this dependency. However, I think it is still valuable for me to figure out how to properly import and use node modules, because I will be doing it more in the future. That being said, is it typically a better practice to write javascript within a script tag of the html, or to create a separate file that can be loaded via the src attribute of a script tag?


1 Like

Out of curiosity, why did npm add it to dependencies instead of devDependencies (which is where I had put it originally)?

That’s another command:

npm install --save-dev "package-name-here"

Also, I am getting errors when trying to add the dependency to Webpack.ProvidePlugin… my understanding is that Webpack is not defined

Yeah that’s line 1 of my webpack file (added the first 1 to 8 lines that I skipped out on):

   1 const Webpack = require('webpack');
   2 const path = require('path');
   3 const glob = require('glob');
   4 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   5 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
   6 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   7 const CopyWebpackPlugin = require('copy-webpack-plugin');

Also watch out for iex -S mix phx.server. It caches webpack and doesn’t run webpack often enough. If you change anything to webpack config you should just rerun that command again to force it to rerun webpack.



@import "../node_modules/simplemde/src/css/simplemde.css";

I think, inline JavaScript (that’s how it’s called), is used by people who doesn’t want to add extra configuration to Webpack, you’ve to set the dependency pulled from a CDN as a external dependency, just like @mythicalprogrammer did with Webpack.ProvidePlugin().

Typically with inline JavaScript you initialize / configure dependencies that are pulled from a CDN, because by default, Webpack will assume you have that dependency installed locally. When you use a library from a CDN it exposes a global object (SimpleMDE, React, ReactDOM…), that’s why you can configure it using inline JavaScript.

1 Like

Ah yes, that makes sense. Thanks for following up. I had figured webpack wasn’t reconfiguring on save, so I was doing that when I made changes. Thanks for the help!

Thanks, this worked! Though for future reference, in case anyone else needs this solution, I think it is better to use the minified css file, found in ../node_modules/simplemde/dist/simplemde.min.css. There were some formatting issues that I think came from dependencies on other packages’ css declarations that was solved by using the .min.css file

Ohh this makes sense. So if I want to continue trying to use the local module, then I should go ahead and create a separate file (say editor.js) that then is included via script tag with a src attribute?

Exactly! You do need to generate another bundle, so you must create another entry in the Webpack configuration, like this:

entry: {
  './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
  'simplemde_bundle': ['./js/editor.js'] // The key would be the name of the output

Then inside editor.js:

import SimpleMDE from 'simplemde'; // Include the dependency

SimpleMDE({ blah: 'blah' }); // and configure the object

Lastly include the script only when you need it:

<script src="<%= Routes.static_path(@conn, "/js/simplemde_bundle.js") %>"></script>

Please remember to include the script below the element (I’ll assume a textarea), otherwise it won’t find where to use its magic. I can’t test the code, but this will guide you in the right direction, the CSS should be included inside the script too.