CODEWITHSUNDEEP
vue.js
onefootswill
onefootswill

Reputation: 4077

Vue Relative Paths with the CLI Service

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:

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?

Upvotes: 1

Views: 933

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

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";

Upvotes: 1

Related Questions