Cannot run 'npm run dev' when using LOCAL package for development

I am using a package LOCALLY for development, but am unable to get npm to "find" the libraries in my local package. As a result, npm run dev errors out.

For some context, this is what I have added to composer.json:

    "require": {
        ...
        "myPackage": "~9.0",
        ...
    },
    ...
    ...
    ...

    "repositories": {
        "local": {
            "type": "path",
            "url": "./_PACKAGE_FOR_LOCAL_DEVELOPMENT/my_local_package/"
        }
    }

This works fine when I run composer update, and the package is able to be found.

However, npm poses a challenge.

After successfully running npm install, there's an issue with running npm run dev

when I run npm run dev I see errors:

ERROR  Failed to compile with 46 errors
2:31:18 PM

These dependencies were not found:

my-bootstrap in ./resources/js/my-bootstrap.js
auth/authBase in ./resources/js/app.js

In my resources/js/app.js I have;

require('my-bootstrap');
var authBase = require('auth/authBase');

and I need it to be able to find and reference

./_PACKAGE_FOR_LOCAL_DEVELOPMENT/resources/assets/js/my-bootstrap.js
./_PACKAGE_FOR_LOCAL_DEVELOPMENT/resources/assets/js/auth/authBase.js

etc

I did Google around with no luck. None of these helped: https://github.com/JeffreyWay/laravel-mix/issues/990

I suspect it's some setting I need to add in my default Webpack / Laravel Mix config (webpack.mix.js) that gets installed with Laravel.

Any ideas how to fix this? I need to tell npm to reference the libraries from my local package. Thanks.

connecteev

6 years ago

Level 11

I've been stuck on this problem for a while, so if you've managed to get npm working with local packages, please let me know!

connecteev

6 years ago

Best Answer

Level 11

Here's the fix:

Update webpack.mix.js with the correct path in path.resolve

    .webpackConfig({
        resolve: {
            modules: [
                path.resolve(__dirname, '_PACKAGE_FOR_LOCAL_DEVELOPMENT/localPkg/resources/assets/js'),
                'node_modules'
            ],
            alias: {
                'vue$': mix.inProduction() ? 'vue/dist/vue.min' : 'vue/dist/vue.js'
            }
        }
    });

Please or to participate in this conversation.