Basics for using npm modules in Phoenix 1.4 application

1. In your app.css, add

@import "simplemde";

2. 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.

Hi,

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.

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?

Thanks

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

Thanks!

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?

Thanks!

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');
   8

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.

Try:

@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.

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!