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

Question

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

Are you using Vue.js directly in the browser(via a <script> tag) or bundling the source code via a CLI? — Pranav
– Pranav, Commented Sep 20, 2020 at 5:39
@ObnoxiousNerd Thanks for asking. I'm not sure about bundling the source code via a CLI, so probably I would have been using vue.js directly in browser. — Kiran Jasvanee
– Kiran Jasvanee, Commented Sep 20, 2020 at 5:49
@ObnoxiousNerd in package.json there is "build": "vue-cli-service build" option added in scripts. So I think its gonna be bundling the code via CLI. — Kiran Jasvanee
– Kiran Jasvanee, Commented Sep 20, 2020 at 5:54
but you know that require doesn't work in browsers, right? you need this lib: requirejs.org/docs/download.html — Flash Thunder
– Flash Thunder, Commented Sep 20, 2020 at 9:06
@FlashThunder I tried using require inside <template> tag, which worked fine. I thought will work within script too. Let me try to install requirejs. — Kiran Jasvanee
– Kiran Jasvanee, Commented Sep 20, 2020 at 9:15

Dan Knights · Accepted Answer · 2020-09-20 08:15:08Z

1

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

edited Sep 20, 2020 at 8:15

answered Sep 20, 2020 at 8:01

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Kiran Jasvanee Over a year ago

I tried using require directly inside export default, in place of mylib. But it didn’t worked. Occurring the same error as before. Thanks for sharing knowledge...

Dan Knights Over a year ago

require wouldn't work inside export default, what I'm saying is this doesn't refer to what you think it does outside it

Dan Knights Over a year ago

So, this.$route.params.uuid is undefined

Dan Knights Over a year ago

Why require would be undefined depends on your setup. Could you post any code relevant to that?

Kiran Jasvanee Over a year ago

Hi @Daniel_Knights I tried to import my json file within <script> tag. which is working fine. import jsonData from '../content_files/UUDD_WWAA_EEFF_EWWW_AAWW.json' but when I'm trying to use require('../content_files/UUDD_WWAA_EEFF_EWWW_AAWW.json') to access the same file, its not working and receiving same here....

|

Collectives™ on Stack Overflow

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

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related