Issues arise when attempting to include the src attribute within the template tag in a Vuejs and Laravel project

After starting a project with Vuejs and Laravel using Laravel Mix, I encountered an issue. When attempting to split my component into separate files and load them in the .vue file as follows:

<template src="./comp.html"></template>
<script src="./comp.ts" lang="ts"></script>
<style src="./comp.scss" scoped lang="scss"></style>

An error was triggered:

 error  in ./resources/js/components/comp/comp.html?vue&type=template&id=c2090546&scoped=true

Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).
at /home/geordyd/projects/pension-tool/htdocs/resources/js/components/comp/comp.html:2:35
1  |  // Module
2  |  var code = "<section class=\"comp\">\n  <h1>comp Component</h1>\n</section>\n\n";
   |                                    ^
3  |  // Exports
4  |  module.exports = code;

The browser displayed this output:

https://i.stack.imgur.com/WmMW1.png

Included below are excerpts from package.json, tsconfig.json, and webpack.mix.js along with attempts made to resolve the issue.

laraveltypescriptvue.jswebpacklaravel-mix

Answer №2

I believe the usage of require is necessary in the src attribute.

<template :src="require('./comp.html')"></template>
<script :src="require('./comp.ts"') lang="ts"></script>
<style :src="require('./comp.scss"') scoped lang="scss"></style>

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

Tips for navigating the world of hybrid web applications that combine elements of both traditional multi-page applications and single-page

What are some best practices for developing a multi-page application using modern JavaScript frameworks? Multi-page Application In a multi-page application, we utilize multiple templates with "template syntax" to retrieve backend data and handle AJAX (if ...

javascriptangularjsajaxwebpacksingle-page-application

When using Jest + Enzyme to test a stateful class component, encountering problems with Material-UI's withStyles functionality is a common issue

I have a React + TypeScript application with server-side rendering (SSR). I am using Material-UI and following the SSR instructions provided here. Most of my components are stateful, and I test them using Jest + Enzyme. Below is an example of one such com ...

reactjstypescriptjestjsmaterial-uienzyme

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

javascripthtmlcssvue.jscalculator

The instanceof operator does not recognize the value as an instance and is returning false, even though it

Is there a method to verify the current instance being used? This is what I am logging to the console: import { OrthographicCamera } from 'three'; // Later in the file: console.log(camera instanceof OrthographicCamera, camera); and the result ...

javascripttypescript

Error: Unable to locate attribute 'indexOf' within null object in vuejs when using consecutive v-for directives

I've been struggling with this issue for hours. I'm using vuejs' v-for to render items in <select> element's <options>, but I keep getting a type error. I've tried changing the :key values, but it still won't rende ...

javascriptvue.jsvuex

What kind of null/undefined is being assumed?

system details: Visual Studio Code Version: 1.47.3 Typescript Version: 4.0.0-dev.20200727 tsconfig.js: "strict": true, code example: let x = null; // x is any type let y = x; // x is null type(why? x is any type on top), y is null type x = 1; / ...

typescripttypescript-typings

Attaching event listener using DOM ref in Vue3 onMount

I am working with a Vue3 component that looks like this: <template> <div class="list-cell"> <div v-for="(value, index) in lines" ref="items" :key="index" ...

vue.jsdomvuejs3

Tips for ensuring that the cursor is directed to the initial input when using a Vue template form generator

If you're looking for an example, check out the readme of this page: https://github.com/vue-generators/vue-form-generator My goal is to focus the cursor on the first input field in a Vue form generator, specifically the "Name" field. I've atte ...

vue.js

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

Exploring the idea of nesting Angular components with dynamic data

I am attempting to create a nested structure using multiple components in the following way. My objective is to pass user data into the user-item component without directly including the item component inside the list component. Main-App <app-user-li ...

angularvue.js

Setting default values on DTO in NestJS can be done by using the DefaultValue decorator provided

import { IsString, IsNumber, IsOptional, IsUUID, Min, Max } from 'class-validator'; import { Transform } from 'class-transformer'; export class QueryCollateralTypeDto { @Transform(({ value }) => parseInt(value)) @IsNumber() @I ...

node.jstypescriptvalidationnestjsdefault

Encountering a problem with Typescript and eslint while utilizing styled-components and Material UI: "Warning: React does not identify the `showText` prop on a DOM element."

While using a styled component to return a material ui Fab component, an error appears in the console: React does not recognize the `showText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as low ...

reactjstypescriptmaterial-uieslintstyled-components

Navigating session discrepancies: Combining various social media platforms using Next.js and NextAuth

Recently, I ran into a problem where, upon logging in with Google, I found myself needing access tokens for Twitter and LinkedIn to send out API requests. The issue came about when NextAuth modified my session data to be from either Twitter or LinkedIn ins ...

typescriptnext.jsnext-auth

Encountered Runtime Issue of TypeError: undefined cannot be iterated (unable to access property Symbol(Symbol.iterator))

I've been working on a multiselect feature in my Next.js project, utilizing states and setting them accordingly. However, I keep encountering this specific error: https://i.stack.imgur.com/m8zuP.png whenever I click on this: https://i.stack.imgur.c ...

javascriptreactjstypescriptmongodbnext.js

Utilizing custom colors in a Typescript/React/MUI Button component to enhance its design

How can I apply custom colors to the Button component without getting an error? Are there any possible solutions for this issue? I followed the module augmentation approach outlined in the documentation, but the problem persists: https://mui.com/material ...

reactjstypescriptmaterial-ui

Laravel PUT method issue: Routing does not support the PUT method for this route

I've run into a problem with the PUT method in my Laravel application while trying to update a student record. Each time I make a PUT request to update a student's details, I get the following error message: "The PUT method is not supported for r ...

phplaravel

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

This particular inquiry is somewhat connected to a question I posted on Stack Overflow yesterday about why TypeScript is encountering issues when trying to import a module. The initial configuration remains unchanged. My TypeScript file appears as follows ...

typescriptcommonjsuse-stricttypescript1.7

Protected class, yet not transferable

My output varies based on the type of input provided. I have a custom guard in place to protect the input, but I'm still having trouble assigning it to the declared output: type InputType<Sub extends SubType> = { a: Sub, b: string } type SubTyp ...

typescripttypes

Discover the current URL using Gridsome

I am currently working on a Gridsome project and I want to enhance the menu by adding the active CSS class to highlight the current URL. In order to achieve this, I need to retrieve the current URL path within the Layout component so that I can compare it ...

vue.jsurlgridsome

Troubleshooting: Why is my Vue app not rendering in webpack?

I am a beginner in Vue and I recently tried manually configuring webpack for the first time. Unlike my past experiences where webpack was abstracted behind another framework like create-react-app, this time my new configuration is not working as expected. ...

webpackvue.jshugo