Troubleshooting Issues with Imports after Integrating Typescript into Vue and Rails Application

I attempted to integrate TypeScript into my existing VueJS + Rails application. I started by cloning a demo from (https://github.com/gbarillot/rails-vue-demo-app) and then following the guidelines provided on https://github.com/rails/webpacker

$ bundle exec rails webpacker:install:vue

$ bundle exec rails webpacker:install:typescript

Next, I made changes to 

config/webpack/loaders/typescript.js
as explained in this document here.

Though the compilation seems successful, when I switched the script section of my "home" view to typescript:

<script lang="ts">
import Layout from '../shared/layout';

export default {
  components: {
    Layout
  }
}
</script>

An error occurred with the message:

Failed to compile.

/Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts
[tsl] ERROR in /Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts(13,20)
      TS2307: Cannot find module '../shared/layout'.

Why does enabling typescript cause the layout file to be not found?

ruby-on-railstypescriptwebpackvue.js

Answer №1

When dealing with presentational components, I recall encountering a comparable issue. One suggestion is to include an empty export in shared/layout for TypeScript to recognize:

<script lang="ts">
  export default {}
</script>

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

Is it possible for a button to be assigned to a variable upon creation, but encounter an error when trying to

const button:Element = document.createElement("button");//This works fine const button:HTMLButtonElement = document.createElement("button");//This works too const button2:Element = document.getElementsByTagName("button");//Why does this give an error? con ...

typescriptecmascript-6typescript2.0

Quasar's line break is displaying incorrectly as <br /> instead of a traditional line break

return str + '<br />' + data I am attempting to display this in Quasar, however it is showing as text rather than a line break. Is there something I might be overlooking? ...

vue.jsquasar-framework

What counterpart in JavaScript resembles the .NET Standard Class Library?

As someone transitioning from a background in .NET to learning Vue.js, I'm curious about the best way to create classes that handle business logic for me. Specifically, I want to be able to fetch information from an API, format it as needed and easily ...

javascriptnode.js.netvue.js

expose-loader fails to reveal changes made to the object being exposed

Currently, I am using Webpack 2, Bootstrap 3, and TypeScript in my project. My goal is to integrate npm and packaged bundles into an existing application seamlessly. To achieve this, I have utilized the ProvidePlugin to ensure jQuery is accessible and the ...

javascripttwitter-bootstraptypescripttwitter-bootstrap-3webpack

The disappearance of ngx-charts lines is observed when the chart is rendered within a PrimeNG dialog that gets closed and reopened

In my TypeScript Angular application, I am currently incorporating PrimeNG. Specifically, I am utilizing the dialog component from PrimeNG to display charts using ngx-charts, specifically the ngx-charts-line-chart module. Initially, when I open the dialo ...

javascriptangulartypescriptprimengngx-charts

ValidationPipes do not support specific body types

Just a quick question: I'm working on applying a ValidationPipe to a POST endpoint responsible for adding an invoice. Before adding the invoice, I need to validate the body. Here is what I have done: invoice.dto.ts import { ContractorDto } from &apo ...

typescriptpipenestjsclass-validator

Instructions on declaring a Typescript variable that will only be assigned once in the future

In the land of coding, there are two constants: const which sets a value at declaration, and let which allows for variables to be changed. But what about a special Typescript (or javascript) variable that starts as undefined, and once defined, remains fo ...

javascripttypescriptvariablesconstantsreadonly

How can the input value be transmitted along with the formArray values?

I am currently working with a FormArray in my project where I can add new fields and submit the entire form data on button click. However, I am facing an issue trying to display and send an input field that is connected to the 'name' attribute wi ...

htmlangulartypescriptinput

Accessing a variable within a bound function using .bind() in Javascript/Typescript

I am facing an issue where I need to bind a variable to a callback function in Mongoose, but the function already has a parameter named "val" embedded in it. Whenever I try to use .bind() to add another value to the callback function, I end up losing the o ...

javascriptmongodbtypescriptvalidationmongoose

Issue with updating content in Vue when using CKEDITOR 4 inline editor

I have encountered an issue where I am trying to update the content of an inline Vue CKEDITOR 4 component using v-model multiple times. The problem arises when the user enters text in the editor, as any subsequent updates through v-model get overwritten by ...

typescriptvuejs2ckeditor

Transfer of double array in Emscripten - A seemingly arbitrary address has been obtained

I am facing a challenge in passing a double array to a WASM file that is generated through emscripten. I have created it as a .js output file with WASM=1, which also gives me a wasm file. Below is an excerpt from my C++ code: #include <iostream> usi ...

c++arraystypescriptwebassemblyemscripten

Angular 6: A class with no 'default' modifier must explicitly specify a name

I am encountering this error in my ts.file, as I delve into the world of Angular/Ionic. Can anyone help identify the possible reasons for this? I have attempted multiple solutions to address it, but unfortunately, none have proven successful. import { Co ...

angulartypescriptionic-frameworkangular6

Is it possible to maintain type inference in union types when utilizing type guards within a function?

Imagine I am working with three unique types (and one union type) type Alpha = { type: 'a' title: string description: string } type Beta = { type: 'b' title: string } type Charlie = { type: 'c' de ...

typescripttypestypeguards

Having trouble mocking Node fs Modules using Sinon

I am facing an issue with mocking the promises methods of the node fs module in my code. When my appData.ts file is executed, it calls the actual fs.promises.mkdir method instead of the mock function defined in \__tests__/appData.test.js. I suspect ...

javascriptnode.jstypescriptsinon

Angular - Highlight a section of a string variable

Is there a way to apply bold formatting to part of a string assigned to a variable? I attempted the following: boldTxt = 'bold' message = 'this text should be ' + this.boldTxt.toUpperCase().bold() ; However, the HTML output is: thi ...

javascriptangulartypescript

Insufficient memory causing electron-builder to encounter issues

The main issue at hand is that while trying to build and run an Electron application containing a webpack React app, we're facing challenges related to running out of heap memory. This problem has cropped up recently without any apparent correlation t ...

reactjsnode.jswebpackelectronelectron-builder

Arranging a 2D array of matchups to ensure an equal distribution of home and away matches for each team

I am in the process of developing a unique UEFA Champions League 24 'Swiss Model' tournament with 36 teams. Each team is set to compete against 8 different opponents, resulting in a total of 144 matches. I already have a list of matchups prepared ...

javascripttypescriptalgorithmsorting

The function window.require in Electron is not recognized, even when nodeIntegration is enabled

I've been encountering some challenges with a project I'm working on using Electron + Create React App. The application is designed for offline cost calculation, and I need to store some user settings persistently. To achieve this, I decided to u ...

node.jsreactjswebpackelectron

Automatic type inference is activated while employing intricate "isEmpty" verification

I have created a customized function similar to Ramda's isEmpty, tailored to meet my specific requirements: /** * Checks if a value is empty. * Returns true for null, undefined, empty strings, empty Sets, empty Maps, and objects without properties. ...

typescripttype-inference

Guide on how to fetch an image using a link within an object

I have been utilizing Vue JS to develop a web application. While converting the object into JSON, I've noticed that the link used to retrieve the image only appears as a string due to the JSON conversion process. Is there a way for the link to prope ...

javascriptvue.jsvuejs3