Vue Relative Paths with the CLI Service

Question

Running into a problem which is surely related to Webpack.

Tried to do the most basic of services as a smoke test (start small) in a Vue app created by the CLI.

Versions:
Vue CLI: 3.11.0
vue 2.6.10
@vue/CLI-Service 4.0.5

I created a folder called shared inside the src folder of my project. The HelloWorld.vue file is in the components folder. In that file, I imported a data service which I placed inside shared and attempted to use it in the Created event of the HelloWorld component:

<script>
    import { dataService } from "../shared";

    export default {
      name: "HelloWorld",
      props: {
        msg: String
      },
      created() {
        dataService.addWebSite();
      }
    };
</script>

The data service is very simple and just meant to hit an API (data.service.js):

import *  as axios from 'axios';

const addWebSite = function () {

    axios({
        method: 'POST',
        url: 'https://localhost:44362/WebSites/CreateWebSite',
        data: {
            name: "Pluralsight",
            url: "http://Pluralsight.com"
        }
    }).then((response) => {
        var discard = response.data;
        return discard;
    });
};

export const dataService = {
    addWebSite: addWebSite
};

When I execute npm run serve, I see the following error message:

ERROR Failed to compile with 1 errors 6:13:39 PM This relative module was not found:

../shared in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&

I'm guessing this is some kind of Webpack relative path thing, but am at a loss and have not been able to solve it using Google.

The vue.config.js looks like this:

module.exports = {
    configureWebpack: {
        devtool: 'source-map',
    }
};

And I have tried adding a publicPath property of both './' and '/' to that exported object.

Anyone know what's going on?

IVO GELOV IVO GELOV · Accepted Answer · 2019-11-20T08:49:04

When you try to import from a folder instead of file, like this

import { dataService } from "../shared";

it implies that you actually want to import from "../shared/index.(any_supported_extension)". But since your file is actually named data.service.js you will have to change your import to

import { dataService } from "../shared/data.service.js";

Vue Relative Paths with the CLI Service

1 Answers