Dependency was not found in node_modules

[likeadeckofcards]

I get the following errors every time that I try to run npm run dev.

vagrant@data-ms:~/data-ms$ npm run dev -ddd
npm info it worked if it ends with ok
npm verb cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'dev', '-ddd' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'predev', 'dev', 'postdev' ]
npm info lifecycle @~predev: @
npm sill lifecycle @~predev: no script for predev, continuing
npm info lifecycle @~dev: @

> @ dev /home/vagrant/data-ms
> cross-env NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js
                                                                                                                                                                                                    95% emit
 ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* /home/vagrant/data-ms/resources/assets/js/app.js

Did you forget to run npm install --save for it?                                                                                                                                                                                                Asset      Size  Chunks             Chunk Names
       /js/app.js   1.54 kB       0  [emitted]  app
mix-manifest.json  32 bytes          [emitted]
   [0] multi app 28 bytes {0} [built] [1 error]
npm verb lifecycle @~dev: unsafe-perm in lifecycle true
npm verb lifecycle @~dev: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/home/vagrant/data-ms/node_modules/.bin:/home/vagrant/.composer/vendor/bin:/home/vagrant/bin:/home/vagrant/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
npm verb lifecycle @~dev: CWD: /home/vagrant/data-ms
npm sill lifecycle @~dev: Args: [ '-c',
npm sill lifecycle   'cross-env NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js' ]
npm sill lifecycle @~dev: Returned: code: 0  signal: null
npm info lifecycle @~postdev: @
npm sill lifecycle @~postdev: no script for postdev, continuing
npm verb exit [ 0, true ]
npm info ok

app.js does exist at the specified location.

[JeffreyWay]

What does your webpack.mix.js file look like?

[likeadeckofcards]

let mix = require('laravel-mix').mix;

mix.js('resources/assets/js/app.js', 'public/js')
   ;//.extract(['vue','vuex','lodash','axios','moment']);

// mix
//     .js('resources/assets/js/scanner.js', 'public/js')
//     .copy('resources/assets/js/moment.js', 'public/js')
//     .minify('public/js/moment.js')
//     .copy('resources/assets/css/vue-toast.min.css', 'public/css/vue-toast.css');

[JeffreyWay]

Hmm, not sure. You're 100% positive that resources/assets/js/app.js exists? Can you try deleting your node_modules directory, and redoing npm install from scratch?

[likeadeckofcards]

Reinstalled node_modules and now I am getting the error that cross-env is not found.

vagrant@data-ms:~/data-ms$ npm run dev

> @ dev /home/vagrant/data-ms
> cross-env NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js

sh: 1: cross-env: not found

npm ERR! Linux 4.4.0-38-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ dev: `cross-env NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ dev script 'cross-env NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/vagrant/data-ms/npm-debug.log

[JeffreyWay]

Did you reinstall with yarn or npm install?

[likeadeckofcards]

installed with npm. should I be using yarn?

Edit:
I installed cross-env and it worked.

[JeffreyWay]

No, npm is right.

cross-env is a dependency of Laravel Mix, so it should be included when you installed everything. Do you see node_modules/.bin/cross-env?

[likeadeckofcards]

Not sure why but once I installed cross-env manually it compiled with an error in one of the templates.

[likeadeckofcards]

Now it is failing saying:

 ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/js/components/layouts/ToolShop.vue

SyntaxError: Unexpected token (14:4)


 @ ./resources/assets/js/components/layouts/ToolShop.vue 8:23-148
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js

File in question:

<template>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Transfer Tool</h4>
                </div>
                <div class="panel-body" style="max-height:500px; overflow-y: auto">
                    <!--<transfer-tool :jobs="jobs">-->
                    <!--</transfer-tool>-->
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Transfer Expendable</h4>
                </div>
                <div class="panel-body" style="max-height:500px; overflow-y: auto">
                    <!--<transfer-expendable :jobs="jobs">-->
                    <!--</transfer-expendable>-->
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5>
                        Today's Audit Log
                        <a :href="" class="btn btn-sm btn-primary pull-right">
                            View All Logs
                        </a>
                    </h5>
                </div>
                <div class="panel-body" style="max-height:250px; overflow-y: auto">
                    <table class="table table-stripped">
                        <thead>
                        <tr>
                            <th>
                                Tool/Expendable Number
                            </th>
                            <th>
                                Tool Description
                            </th>
                            <th>
                                Quantity
                            </th>
                            <th>
                                Job
                            </th>
                            <th>
                                When?
                            </th>
                            <th>
                                For?
                            </th>
                            <th>
                                Print Sheet
                            </th>
                            <th>
                                Undo Transfer
                            </th>
                        </tr>
                        </thead>
                        <!--<tbody is="transfer-audit-log" :today="true" :history="false">-->
                        <!--</tbody>-->
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-12" style="display:none;">
            <div id="transferSheet">
                <br>
            </div>
        </div>
    </div>
</template>

<script>
    import TransferTool from "../forms/TransferTool.vue";
    import TransferExpendable from "../forms/TransferExpendable.vue";

    export default {
        data() {
            return {
                jobs: []
            }
        },

        props: {
            url: {
                default() {
                    return '/';
                }
            }
        },

        created() {
            this.$http.get('/job/info').then(function(response) {
                this.jobs = response.data;
            }).catch(function(errors) {
                console.log('errors')
            });
        },

        components:[
            TransferTool,
            TransferExpendable
        ]
    }
</script>

[JeffreyWay]

I can't tell which line that is, but the terminal output should point to where your syntax error is.

[likeadeckofcards]

Both lines are on lines with plain HTML

[JeffreyWay]

It's related to this:

<a :href="" class="btn btn-sm btn-primary pull-right">
    View All Logs
</a>

You didn't bind the href attribute to anything. Remove the colon.