What is the correct way to add a NPM package to a Laravel 9 project with Laravel Mix?

Question

Laravel Mix introduces itself as

An elegant wrapper around Webpack for the 80% use case.

I believe I have a widespread use case, and I want to know if the 80% covers this and how to do it right. It could be any other package, but I have editor.md as an example. They want you to install it with npm i editor.md and use it like the following.

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

Now I want to know how to get the following paths right.

editor.md/css/editormd.min.css
jquery.min.js (not a dependency)
editor.md/editormd.min.js
editor.md/lib/

My ideas/questions:

I could copy the CSS and JS files with Mix.

mix.copy("node_modules/editor.md/css/editormd.min.css", "public/css/editormd.min.css");
mix.copy("node_modules/editor.md/editormd.min.js", "public/js/editormd.min.js");

But then I miss all the files from the lib folder (4th path). I could copy this folder as well. I could copy the entire node_modules/editor.md folder to my assets folder, but this feels too much. And finally, where is jQuery coming from? Do I add it from a CDN? Do I install the npm package? Again, I saw solutions requiring everything in the app.js file.

How to do it the right way?

Karl Hill · Accepted Answer · 2022-08-13T20:11:06.857

2

For Laravel Mix, the correct way to implement this is to run the following.

npm i editor.md jquery

Then add your require() methods in the bootstrap.js file.

resources/js/bootstrap.js

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    window.editormd = require('editor.md');
} catch (exception) {
    console.error(exception);
}

In your template, likely located at /resources/views/layouts/app.blade.php, you will need to add the following at the bottom of the file before the closing </body> tag.

<script src="{{ mix('js/app.js') }}"></script>

edited Aug 13 '22 at 20:11

answered Aug 13 '22 at 01:27

Karl Hill

12,937
5
58
95

First, thank you for updating my question to show me how to ask more clearly. Unfortunately this isn't working because of an issue with the package itself: `The package may have incorrect main/module/exports specified in its package.json.`. As this is too complex to resolve for me, unfortunately I think I need to copy the entire folder. – JanBoehmer Aug 13 '22 at 11:18

score 0 · Answer 2 · answered Aug 12 '22 at 07:05

0

This may not be the best way to do it, but you could copy the entire directory with mix.copyDirectory(srcDir, destDir) as seen here

answered Aug 12 '22 at 07:05

ItsGageH

385
1
9

The feels like not to be the bet way for me as well. If I do that, you couldn't I just use the direct path to node_modules? It would reduce the size of my repo. – JanBoehmer Aug 12 '22 at 07:14
1

When you push to server, node_modules don't go with you, and they stay up to date. In terms of direct path, you shouldn't be able to access node_modules from the frontend, only assets in the `public/` directory – ItsGageH Aug 12 '22 at 07:20

What is the correct way to add a NPM package to a Laravel 9 project with Laravel Mix?

2 Answers2