In the process of developing a custom Vue component library with the help of Rollup and VueJS 3

My goal is to develop a custom Vue component library using rollup and Vue.js. The process went smoothly with Vue2, but I encountered issues parsing CSS files with Vue3. To address this, I updated the dependencies in the package.json file.

package.json

{
  "name": "vue2tslibrary",
  "version": "0.1.59",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:js": "rimraf dist && rollup -c && rollup -c --environment MINIFY"
  },
  ...

rollup.config.js


import vue from 'rollup-plugin-vue'
import node from '@rollup/plugin-node-resolve'
...

ERROR SCREENSHOT https://i.sstatic.net/gQ0lL.png

Component

<template>
<!-- @css/_app-partials.css-->
<div>
    <p class="yellow" @click="test()"> I am Dummy Component
      <span class="reda">asdasdas</span>
    </p>
    ...

View the GitHub repository for more details

typescriptvue.jsrolluprollupjsvuejs3

Answer №1

After some troubleshooting, I managed to get everything functioning properly by making a simple change from lang="postcss" to lang="css", as well as adjusting the options in rollup-plugin-vue to inline the CSS within the components and generate a separate CSS file using rollup-plugin-css-only. For those interested, you can find the working code on my Github

Answer №2

Currently, the rollup vue plugin does not fully support Vue3 and SCSS.

Check out the github issue here.

Solution

To work around this issue, @P-Seebauer's comment suggested adding rollup-plugin-scss to the setup. This allows Rollup to handle both .scss and .css files successfully.

However, it may seem unnecessary to rely on developers to add this plugin when Vue.js should ideally handle it.

You can also refer to @akauppi's answer regarding this issue: Rollup, Vue and Buble, unexpected token in scss file (although it pertains more to Vue2).

Here is a suggestion:

$ npm install --save-dev rollup-plugin-scss

In your rollup.config.js file:

import scss from 'rollup-plugin-scss';      // handles '.css' and '.scss'
plugins: { ..., scss() }

The solution mentioned above worked for me using Vue.js 3 (beta) and rollup-plugin-vue 6.0.0-beta.6.

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

Ways to clear an individual form field using element-ui

I'm currently learning VueJS and incorporating the Element-UI framework into my project. One issue I'm facing is that when there's a validation error upon submitting the login form, I'd like to automatically clear the password field. A ...

javascriptnode.jsvue.jselement-ui

How can we avoid a runtime error when attempting to filter an array that may not be present at a certain point in

Encountering a runtime error with my reducer state chunk - specifically a TypeError stating that an intermediate value is not iterable. This occurs when the object, childGroup, may not be present in the state at a given moment. Any solutions on how to avoi ...

reactjstypescript

VueJS - oops! Looks like we hit a limit with the call stack size. The error occurred at VueComponent.onFocusin

I imported a dialog component into my Document.vue file and encountered an error when attempting to add the dialog. This issue was resolved when I removed a specific element from my code. Can someone provide assistance? Here is the added code: <templat ...

vue.jsvuetify.js

TypeScript type that accommodates all object interfaces

I have several functions that all take the same type as input but return different types of interfaces. I'd like to define a type that can encompass all these functions, but when I try to do so with: const f: (arg: number) => Object = func; I enc ...

typescript

Ways to verify the authenticity of a JWT token

I recently came across a tutorial on creating user authentication with Vue.js and Lumen. The tutorial utilizes the tymon/jwt-auth library to handle authentication. So far, everything is working smoothly. The API manages all my data and provides a token to ...

javascriptlaravelvue.jslumen

TypeScript interface with an optional parameter that is treated as a required parameter

Within my interface, I have a property that can be optional. In the constructor, I set default values for this property, which are then overridden by values passed in as the first parameter. If no properties are set, the defaults are used. I am looking fo ...

javascripttypescript

Tips for bringing in an enum from TypeScript?

I am working with a module defined in TypeScript that looks like this: declare module MyTypes { export enum MyEnum { GOOD = 'Good', BAD = 'Bad', UNKNOWN = '-' } export interface MyType1 { ...

typescript

Instead of utilizing components, consider using multiple Vue instances for a more streamlined

I'm currently working on updating an old .NET MVC project that utilizes HTML, Bootstrap, and jQuery for its Views. I've decided to switch from jQuery to Vue.JS, but I'm struggling to determine the best approach. Since all the views are uniq ...

vue.jsvuejs2

Consider developing a custom plugin that automatically loads all components within your nuxt.js application

I have been attempting to load and define all my components globally in nuxt.js. However, I encounter an error when trying to load the *.vue file: "Cannot find module ....". Despite the fact that the file exists in the specified location... Below is the ...

javascriptvue.jsvuejs2nuxt.js

Creating a personalized filter list in Vue Instant Search: A step-by-step guide

Currently, I'm utilizing Laravel Scout with Algolia as the driver. Vue is being used on the front end and I've experimented with the Vue instant search package, which has proven to be very effective. The challenge I am encountering involves cust ...

javascriptlaravelvue.jslaravel-scoutvue-instant-search

The variable 'HttpEvent<name[]>' cannot be assigned to the variable 'name[]' because their types are not compatible

This is the code I have written: export interface act { id: number; name: string; } public list!: act[]; getAll(token:any): void{ this.http.get<act[]>('http://localhost:4200/test', token) .subscribe( (val) => this. ...

angulartypescriptangular-httpclient

Creating a unique type with a suffix of `px`

Understanding how to create a Position type class is clear: class Position { x: number = 0; y: number = 0; } However, I now require the x and y values to be integers with the suffix of px, like this: const position = { x: '1px', y: &ap ...

typescript

The extend keyword in TypeScript causing issues with type inference

Why is TypeScript showing an error in the code below? type A = { kind: "a" } type B = { kind: "b" } const a = (a: A): void => undefined const b = (b: B): void => undefined const c = <C extends A | B>(c: C): void => (c.kind == "a" ? a(c) : ...

typescript

Developing Angular 7 Forms with Conditional Group Requirements

I am currently in the process of developing a form that enables users to configure their payment preferences. The form includes a dropdown menu where users can select their preferred payment method. For each payment method, there is a FormGroup that co ...

angularformstypescriptangular7angular-forms

Maximizing the potential of mouse positioning in Angular

I am working with an Angular form that has a textarea <textarea class="form-control" id="message" formControlName="message" (fo ...

javascriptangulartypescript

What is the process for transforming a string literal type into the keys of a different type?

Imagine having a string literal type like this: type Letters = "a" | "b" | "c" | "d" | "e"; Is there a way to create the following type based on Letters? type LetterFlags = {a: boolean, b: boolean, c: bool ...

typescript

What steps can I take to fix error TS7015 in my TypeScript, Next.js, and React application when I encounter an index expression that is not a number data type?

I encountered an error stating "Element implicitly has an 'any' type because the index expression is not of type 'number'.ts(7015)" The file I imported is import { useAmazon } from "@context/amazon"; I used it as follows con ...

javascriptreactjsjsontypescriptnext.js

Navigate to the top of the page using Vue Router when moving to a new

Currently, in my Vue application, whenever I click on a <router-link>, it directs me to the new page but at the same scroll position as the previous one. This happens because the link only replaces the component. I am curious to know if there is a s ...

javascriptvue.jsvue-router

Optimizing row performance for Angular grids in the Chrome browser

When creating a component that includes a table with numerous rows, everything works well with small amounts of data. However, once the item count reaches 2000 or more, it starts lagging. Scrolling and animations become sluggish. Even after trying to impl ...

htmlangularperformancetypescriptgoogle-chrome

Changing the ngModel value within ngFor loop

I am working on a project where I need to display a list of grades from an object called 'grades'. Additionally, I want to integrate a slider component for each grade, with the value of the slider corresponding to a predefined list. However, it s ...

angulartypescriptsliderangular-ngmodel