[Vuejs]-Webpack – Cannot import Vue from instance saved in another directory

by

0👍

✅

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.

Leave a comment