Webpack - Cannot import Vue from instance saved in

Question

I am learning to integrate Vue.js in to a Django project (multi-page application). My goal is to be able to split my frontend code up among my different apps within my project

However, I am unable to create a Vue instance from my profiles app because webpack fails to find Vue during import.

The error

ERROR in ../apps/profiles/frontend/profiles/browse.js
Module not found: Error: Can't resolve 'vue' in '/home/me/dev/myproject/apps/profiles/frontend/profiles'

My django project structure (truncated)

manage.py
myproject/
    webpack.config.js
    frontend/
        home.js
        components/
            Home.vue
    node_modules/
apps/
    profiles/
        frontend/
            profiles/
                browse.js

Multiple entry points in webpack.config.js

entry: {
    'vendor': [
        "vue",
        "vue-resource",
    ],

    'home': [
        './frontend/home.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],

    'profiles_browse': [
        '../apps/profiles/frontend/profiles/browse.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],
},

Also vue is resolved as an alias in webpack.config.js

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.common.js',
    },
},

My browse.js Vue instance

import Vue from 'vue' <-- Error occurs here


new Vue({
    el: '#browse',

    data: {
        foobar: "hello browse"
    },

    delimiters: [
        "[[", "]]"
    ]
});

And finally my django template for profiles browse

<div id="browse">
    [[ foobar ]]
</div>
{% render_bundle 'vendor' %}
{% render_bundle 'profiles_browse' %}

I had thought that since vue has an alias defined that I would be able to import it from anywhere.

Does anyone have any suggestions on how to best use webpack to split up modules spanning different directories within a project?

Answer 1

A successful approach that I discovered from a blog post is to use npm to install my Django app's js modules into my project's node_modules directory.

For instance, in my project's package.json I add the following file reference to my dependencies:

"dependencies": {
  "profiles": "file:../apps/profiles/frontend",
  ...
},

This will work if apps/profiles/frontend has defined its own package.json file.

Now my project's webpack.config.js entry points will be:

entry: {
    'vendor': [
        "vue",
        "vue-resource",
    ],

    'home': [
        './frontend/home.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],

    'profiles_browse': [
        './node_modules/profiles/browse.js',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
    ],
},

Notice that profiles_browse refers to a file within node_modules.

Within my browse.js files I can import Vue without error.