CODEWITHSUNDEEP
javascriptvue.jsfrontend
Kiran Jasvanee
Kiran Jasvanee

Reputation: 6554

Error 'require' is not defined while trying to fetch my local json file in vuejs

I'm new to vuejs...
I tried to fetch my JSON data stored in a local JSON file, but the logic is to decide which JSON file's data to be fetched is dynamic.

I'm constantly receiving an error of 'require' is not defined and I'm not sure how to fix it.
I checked a few solutions mentioning the integration of webpack or browserify, but I'm not sure that why is it required to integrate any one of this!

<script>

var mylib = require(`../components/${this.$route.params.uuid}.json`)

export default {
    name: "BloePage",
    data() {
        return {
            blogcontent: mylib
        }
    }
}
</script>

I also tried the following way to directly access my JSON file, rather than keeping it dynamic. Still, I'm receiving the same here...

export default {
    name: "BloePage",
    data() {
        return {
            blogcontent: require('../components/UUDD_WWAA_EEFF_EWWW_AAWW.json')
        }
    }
}

Error -

16:26  error  'require' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)


 @ ./router/index.js 28:11-30:28
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://192.168.43.171:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./main.js

Upvotes: 2

Views: 282

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

this doesn't refer to the Vue instance when you use it outside export default.

You'd have to parse it from the URL with window.location, or use a query param instead:

http://your-url?uuid=1

const params = new URLSearchParams(window.location.search);
const uuid = params.get('uuid');
console.log(uuid); // Output: 1

Upvotes: 1

Related Questions