Encountering a hiccup while trying to install Svelte, Skeleton, and Tail

Recently entering the world of Svelte and TypeScript, I have encountered some unexpected errors after installation. Despite following the same steps as before, I am puzzled by what is causing these issues.

This is the process I followed:

npm create svelte@latest diceGame

cd diceGame

npm install

Following that, I integrated Skeleton:

npm i @skeletonlabs/skeleton --save-dev

The next step was adding Tailwind CSS:

npx svelte-add@latest tailwindcss

npm install

However, I am now facing errors as shown in the screenshot below:

https://i.sstatic.net/tJLD6.png

I would greatly appreciate any advice or suggestions on achieving a smooth installation process.

typescriptnpmtailwind-csssvelteskeleton-ui

Answer №1

Check out the skeleton UI get started documentation.

I recently went through these steps multiple times and never encountered any issues.

npm create svelte@latest diceGame
cd diceGame
npm i
npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
npx svelte-add@latest tailwindcss
npm i
npm add -D @types/node

Next, configure your Tailwind settings using a file with the .ts extension.

import { join } from 'path';
import type { Config } from 'tailwindcss';

// 1. Include the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';

const config = {
    // 2. Choose dark mode to be managed through classes
    darkMode: 'class',
    content: [
        './src/**/*.{html,js,svelte,ts}',
        // 3. Add the path to the Skeleton package
        join(require.resolve(
            '@skeletonlabs/skeleton'),
            '../**/*.{html,js,svelte,ts}'
        )
    ],
    theme: {
        extend: {},
    },
    plugins: [
        // 4. Add the Skeleton plugin (after other plugins)
        skeleton
    ]
} satisfies Config;

export default config;

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 an unusual behavior with React form when using this.handleChange method in conjunction

RESOLVED I've encountered a quirky issue with my React/Typescript app. It involves a form used for editing movie details fetched from a Mongo database on a website. Everything functions smoothly except for one peculiar behavior related to the movie t ...

reactjsmongodbtypescriptforms

Angular - passing information to a nested component

Within my application, I have a main component along with three sub-components. I am passing data to these three sub-components and using setTimeout to manage the timing of the data being sent. The first sub-component displays for 5000 milliseconds. The ...

angulartypescript

Encountering an error when initializing a form array with an existing array of multiple objects in Angular 13: "Control not found with

Hey there, I'm brand new to Angular and I'm trying to set up a form array with an existing array that contains multiple objects. However, I keep encountering the following error: Cannot find control with path: 'variable-> 0 -> id&apo ...

angulartypescriptcontrolsangular-reactive-forms

Mocking Dependencies in TypeScript with Jest

Here is the content of my index.ts file: import {IS3Client, S3Client} from './client/S3Client'; const s3: IS3Client = new S3Client(); export async function someFunc(event: any, context: any, callback: any) { const x: string = await s3.getFil ...

node.jstypescriptjestjsaws-sdk-jsts-jest

I keep encountering python2 failed errors while trying to run npm install

Encountering errors while attempting to run npm install in Windows Powershell, I need to utilize node version 8.11.1 and am using nvm for that purpose. Despite downgrading to python 2.7 initially, the issue persisted even after upgrading back to python 3.7 ...

pythonnode.jspowershellnpm

Converting strict primitive types to primitive types in Typescript

I have a function that parses a string into a value and returns a default value if it fails. The issue is that this code returns too strict types for primitives, such as `false` instead of `boolean`. How can I resolve this? Should I utilize some form of ...

typescripttypescasting

How to make an optional prop with a default value non-nullable in a ts+react component?

Is there a way to modify a React component to accept an optional prop and then treat it as non-null within the component itself? For example, consider the following basic component: import React from 'react'; type props = { x?: number; }; c ...

reactjstypescript

What is the process for incorporating an npm package into an HTML document?

Here is the code from my HTML file: <!DOCTYPE html> <head> ... </head> <body> ... <script src="script.js"></script> </body> This is what I have in my JavaScript file named script.js: import * as File ...

javascripthtmlnode.jsnpmfrontend

Newest Angular package.json

Each time I attempt to update my Angular components to the latest version, I encounter the same error. It seems like a never-ending cycle... npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/ ...

angularnpmpackage.json

Stream in Node.js seems to have frozen

I am looking to develop a basic csv parser using the csv module and effectively handle errors when the file is missing. If I remove the sleep functions, the code successfully reaches the Finally statement (and produces an error output). What am I overloo ...

node.jstypescriptcsvstream

Having trouble with npm installation of a package due to error code E404

My attempt to install hyperledger composer involves following the documentation and installing the CLI with the command: sudo npm install -g composer-cli It's important to note that I had to use sudo as I hadn't addressed the folder permissions ...

npm

Error: "Reflect.getMetadata function not found" encountered during execution of Jenkins job

My Jenkins job is responsible for running tests and building an image. However, I am encountering issues with the unit tests within the job. task runTests(type: NpmTask) { dependsOn(tasks['lintTS']) args = ['run', 'test&ap ...

node.jstypescriptjenkinsgradlejestjs

Modify the title and go back dynamically in the document

I am currently working on a timer app where I want to dynamically change the document title. The app features a countdown timer, and during the countdown, I was able to display the timer in the document title successfully. However, once the countdown is co ...

angulartypescript

Mastering mapped types to replace properties in Typescript

I have created a Factory function where it takes an object as input and if that object contains specific properties, the factory transforms those properties into methods. How can I utilize mapped Types to accurately represent the type of the resulting obj ...

typescriptmapped-types

What is the best way to output data to the console from an observable subscription?

I was working with a simple function that is part of a service and returns an observable containing an object: private someData; getDataStream(): Observable<any> { return Observable.of(this.someData); } I decided to subscribe to this funct ...

angulartypescriptrxjsobservable

Error: The Turborepo package restricts the use of import statements outside of modules

I created a typescript "test" package in turborepo, which imports and exports typescript functions. Due to being in turborepo, it gets copied to node_modules/test. When attempting to run import {func} from "test", an error is thrown: SyntaxError: Cannot ...

node.jstypescriptnext.jsmonorepoturborepo

Identify the nature of the output received after dispatching

I'm developing a functional component within the realm of Redux, and I have configured it to return specific values for a particular action. The new value being returned is derived from a Promise, meaning that if the type is designated as "Ival," the ...

reactjstypescriptreact-reduxreact-hooksdispatch

Ways to enhance the Response in Opine (Deno framework)

Here is my question: Is there a way to extend the response in Opine (Deno framework) in order to create custom responses? For instance, I would like to have the ability to use: res.success(message) Instead of having to set HTTP codes manually each time ...

javascripttypescriptdenoopine

Getting node siblings within an Angular Material nested tree: A comprehensive guide

Struggling to retrieve the list of sibling nodes for a specific Angular Material tree node within a nested tree structure. After exploring the Angular Material official documentation, particularly experimenting with the "Tree with nested nodes," I found t ...

angulartypescriptangular-material2angular-cdk

javascript + react - managing state with a combination of different variable types

In my React application, I have this piece of code where the variable items is expected to be an array based on the interface. However, in the initial state, it is set as null because I need it to be initialized that way. I could have used ?Array in the i ...

javascriptreactjstypescripttypesecmascript-6