Struggling with TypeScript errors when using Vue in combination with Parcel?

While running a demo using vue + TypeScript with Parcel, I encountered an error in the browser after successfully bootstrapping:

vue.runtime.esm.js:7878 Uncaught TypeError: Cannot read property 'split' of undefined
    at Object.exports.install (vue.runtime.esm.js:7878)
    at Home.vue:17
    at Object.parcelRequire.11.vue-hot-reload-api (Home.vue:17)
    at newRequire (main.54d39494.js:48)
    at localRequire (main.54d39494.js:54)
    at Object.parcelRequire.2.vue (Home.vue:17)
    at newRequire (main.54d39494.js:48)
    at parcelRequire.11 (main.54d39494.js:80)
    at main.54d39494.js:106

The error is happening in index.js

exports.install = function (vue, browserify) {
  if (installed) { return }
  installed = true

  Vue = vue.__esModule ? vue.default : vue
  version = Vue.version.split('.').map(Number) // Vue.version is undefined

Below are my demo files:

Home.vue

<template>
  <div class="home">
    <img src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '../components/HelloWorld.vue'

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>

Could someone please point out what's wrong with the export default statement?

Is there any issue with the typescript configuration?

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "esnext.array", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}
typescriptvue.jsparcel

Answer №1

Ensure the dist and .cache folders are empty at the start of each session.

package.json

  "scripts": {
    "clean": "rm -rf .cache && rm -rf dist",
    "prestart": "yarn clean",
    "start": "parcel public/index.html",
    "build": "parcel build public/index.html"
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering errors while working with React props in typing

In my application, I am utilizing ANT Design and React with 2 components in the mix: //PARENT const Test = () => { const [state, setState] = useState([]); function onChange( pagination: TablePaginationConfig, filters: Record<string, ...

reactjstypescript

Guide on displaying the latest data of a composable in a Vue component

, my current project involves leveraging vue3 with the options API. I am facing a challenge where I need the test.js class to act as a composable entity. Specifically, I'm seeking for this class to seamlessly synchronize its state changes with another ...

vue.jsvuejs3vue-componentcomposable

Issue encountered while attempting to right-click on Vue.js application

Whenever I try to right-click on my Vue.js and Vuex application, I encounter an error after each click: Uncaught ReferenceError: o is not defined at HTMLDocument.document.addEventListener.t (:1:784) This issue is occurring in the VM file. I trie ...

vue.jscompiler-errorsvuex

Generate a dynamic interface using properties and options provided in a JavaScript object

Can Typescript support the following scenario: I have a structure where keys represent properties and values are arrays of options for those properties: const options = { foo: [fooOption1, fooOption2, ...], bar: [barOption1, barOption2, ...], ... } ...

typescript

React JS hosted externally along with just plain Javascript and HTML page

We are looking to implement a common widget on multiple services using ReactJS. The goal is to write client-side code for this widget as an external hosted JavaScript file that can be included in pages across different frameworks such as Angular, Inferno, ...

reactjstypescript

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Tips on solving the "net::ERR_SSL_SERVER_CERT_BAD_FORMAT" issue while working with Vue.js and Node.js using HTTPS and Express

I encountered an issue while trying to send HTTPS requests in Vue.js using actions methods in Vuex. The console displayed the following error: GET https://localhost/api/getpeople net::ERR_SSL_SERVER_CERT_BAD_FORMAT Here is a snippet of my code: vue ...

node.jsvue.jssslhttpsvuex

Diverse behaviors exhibited by an array of promises

I've developed a function that generates an array of promises: async addDefect(payload) { this.newDefect.setNote(payload.note); this.newDefect.setPriority(payload.priority); const name = await this.storage.get(StorageKeys.NAME); ...

javascriptangulartypescript

Preventing Vue interpolation toggling by Prettier in Visual Studio Code

While working in Visual Studio Code with prettier for vue, I have encountered an issue with my interpolations. Every time I save the file, the curly braces either end up on a new line along with the content or stay on the line with the tags and only the co ...

vue.jseslintvisual-studio-codeprettier

The Ion-icon fails to appear when it is passed as a prop to a different component

On my Dashboard Page, I have a component called <DashHome /> that I'm rendering. I passed in an array of objects containing icons as props, but for some reason, the icons are not getting rendered on the page. However, when I used console.log() t ...

javascriptreactjstypescriptionic-frameworkionic5

Limit an object to only contain interface properties

Suppose we have the following object: o {a : 1, b : 2} and this interface defined as: interface MyInterface { a : number } We are now looking to create a new object that represents the "intersection" of o and the MyInterface: o2 : {a : 1} The mai ...

javascripttypescript

The npm start command is unable to recognize the tsx file

I recently attempted to create a React app and incorporate TypeScript into it. However, upon running the app, I noticed that npm start was not recognizing the TypeScript file and failing to automatically generate tsconfig.json. Here is the sequence of ste ...

reactjstypescriptnpm

The data-binding in Vue is not updating properly after receiving the response from axios

I need help with a problem. I am trying to create a new item and then update the item list once it is created. However, when I try to set the item list from the server, it does not update in the view. <v-btn @click="create(item)" > </v-b ...

vue.jsvuejs2

Can you please provide guidance on setting the return type to React.StatelessComponent?

This code is functioning correctly: import * as React from 'react'; export default (props: any): JSX.Element => { return ( <h1>{props.children}</h1> ) } However, this snippet is causing an error: import * as React from ...

reactjstypescript

Vue - Issue with passing props data to child component after fetching data

Struggling to pass the data retrieved from a JSON fetch to a child component in order to create v-cards. Despite investing hours into debugging, I am unable to identify the issue. The only noticeable observation is that the prop in the parent component fai ...

vue.jsfetch

The installation of npm was unsuccessful due to an error: npm encountered an invalid JSON response

Warning: Peer dependency overridden by npm. Found: [email protected] in node_modules/@ivan/data-insights/node_modules/bootstrap. Bootstrap@^3.3.7 from @ivan/[email protected] version 1.7.26. Could not resolve dependency because peer bootstrap@^4.3.1 nee ...

node.jsvue.jsnpmwebpack

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

javascripttypescriptwebpackvue.js

Developing modules with Typescript

I am eager to develop custom modules for our library so that we can simply call import {Api, Map} from "ourlibrary" At the moment, I am using the following setup. import {Api} from "../../Library/Api"; import {MapPage} from "../map/map"; Could someone g ...

typescriptangular

Exploring Vue: Extracting values from a child component

Let me explain my scenario: On my main page, there are multiple sub-components that gather various inputs from the user. Ultimately, I want to submit all the collected data together. Therefore, I need to retrieve the data from these sub-components. I hav ...

vue.jsvuex

What are the solutions for repairing direct links in vue router?

I have a Vue.js single-page application hosted on Azure that functions properly in production when starting from the homepage. However, I encounter a problem when trying to directly access links or refresh pages as it leads me to a 404 error page. I suspe ...

vue.jsvue-router