Sveltejs template not displaying on M1 MacBook Air after running - stuck on blank screen

Currently, I am in the process of learning Sveltejs and have been utilizing for the tutorial, which has been quite effective.

However, I decided to work on developing and testing Sveltejs applications locally on my MacBook Air M1. I downloaded the provided Sveltejs file and opened it in VS Code.

Following that, I installed the necessary node_modules using npm install. Subsequently, I ran npm run dev, but did not encounter any errors during this process.

If you can take a look at the terminal screenshot provided, you'll see what I mean.

Despite these steps, when attempting to access http://localhost:5000, all I encounter is a blank page. Even after inspecting the element, an empty webpage is displayed - as shown in the localhost:5000 screenshot.

The template used was from without any alterations made, yet it still seems to be malfunctioning.

I would greatly appreciate any assistance and thank you in advance!

Please note that I am new to web development and the node package manager.

javascriptnpmterminalsvelte

Answer №1

Encountering an issue on the M1 mac (it is likely related to oSX Catalina rather than the M1 itself, although this has not been confirmed with an intel running Catalina) where port 5000 is already in use by command center. As a result, svelte is unable to bind to that port.

To check which ports are currently active on your mac, use the following command:

lsof -nP +c 15 | grep LISTEN

When running npm run dev, you can specify a different port number that does not conflict with existing usage. Here is an example:

PORT=54321 npm run dev

This should resolve the issue and allow it to run smoothly for you.

You can then access it at

http://localhost:54321

Answer №2

Starting a new Svelte project requires running this command:

npx degit sveltejs/template my-svelte-project

Once the project is created, navigate to it using the following command:

cd my-svelte-project

Inside the project directory, run the following commands:

npm install
npm run dev

After running npm run dev, you will receive information on the port where the application is running.

Next, go to the src folder and open App.svelte to replace the default code with your own.

If everything goes smoothly, your project should work as expected.

Did you see a welcome page of Svelte before starting your coding?

For a helpful tutorial on Svelte, check out this video.

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

Utilizing Jquery for precise element placement and retrieving its position details

Within my bundle of jQuery code, there are a few areas where I am experiencing difficulties trying to recall functions. The following is an excerpt of the code: $(document).ready(function(){ $("#myTablePager").html(""); $.ajax({ type: "POS ...

javascriptphpjqueryajaxtwitter-bootstrap

Errors in autocomplete within eslint-config-react-app for 'react/cjs/react.development'

Context In a basic ReactJS project, I aimed to enhance its functionality by incorporating ESLint capabilities: npm install --save-dev eslint-config-react-app eslint@^8.0.0 Here is the modified package.json after integrating ESLint: { "name": ...

node.jsnpmeslintcreate-react-app

Creating a dropdown menu in Vue 3: A step-by-step guide

I've scoured the entire internet, but I still can't seem to resolve this issue. When using the code below, I keep getting an error message that says 'Uncaught ReferenceError: VueSelect is not defined.' Can you help me figure out what&ap ...

javascriptvue.js

Utilizing Javascript to initiate an AJAX call to the server

I am creating an application similar to JSbin / JS fiddle. My goal is to update my database by making an ajax request to the server when the user clicks on the save code button and submits the values entered in the textarea. However, I seem to be encount ...

javascriptphpajax

Tips for accurately determining the count, rather than the character length, of JSON data

After running my code, I believe it returns a JSON array. The resulting JSON array is then stored in a JavaScript variable called 'result'. When I console.log(result); in Firefox, the output shown is: [{"id":"G24","value":"Zas, S"},{"id":"G75" ...

javascriptjson

Why does jQuery treat an integer as a string when adding it to a variable?

While working on a for statement, I encountered an issue with adding an integer to a variable that increments. Strangely enough, the addition operation treats the integer as a string. However, other operations like subtraction or multiplication behave as e ...

javascriptjquerystringvariablesinteger

Using React - What is the best way to invoke a function from within a different function?

Imagine this scenario: class Navigation extends React.Component { primaryFun() { console.log('funn') } secondaryFun() { this.primaryFun(); } } I assumed that calling primaryFun within secondaryFun would work as expected, but instead I rec ...

javascriptreactjs

Console command to change paragraph tag color---Modifying the color

I am attempting to change the color of all paragraph tags on a webpage to white by utilizing the console. My initial attempt was: document.p.style.color = 'white'; However, this method did not have the desired effect. Interestingly, I have had s ...

javascripthtmlcss

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

Error in Redux reducer file caused by an incorrect data type in action.payload

I have encountered a type error in my reducers' file where it says that my 'Property 'address' does not exist on type 'number | { connection: boolean; address: string; }'. This issue is arising in my React application while us ...

javascriptreactjstypescriptreduxreact-redux

Having difficulties in implementing cordova plugins into the project

Yesterday, I had no issues adding cordova plugins to my project from my local system. However, today I encountered an error message when trying to add a plugin using the command cordova plugin add C:\Users\ankur\CoolPlugin. $ cordova plug ...

cordovanpmcordova-plugins

Error: The Mui Material Breakpoints Theme Cannot Be Located

Hello there! I'm having some trouble placing my code breakpoints, resulting in an error in the output. Can you help me? import { makeStyles } from "@material-ui/styles"; const useStyle = makeStyles((theme)=>({ LogoLg:{ display:&ap ...

javascriptreactjsmaterial-uifrontend

Can someone assist me in understanding the proper syntax for the Node.js function that inserts a document into Watson's Discovery service from the watson-developer-cloud library?

I'm attempting to upload JSON documents into a Discovery collection using the Node.js watson-developer-cloud JDK. Here is the relevant code snippet: const DiscoveryV1 = require('watson-developer-cloud/discovery/v1'); const discovery = new D ...

javascriptnode.jsibm-watsonwatson-discovery

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

javascriptarrays

Updating serialized $_POST array with new key/value pair using jQuery AJAX

Is there a way to insert additional values into a serialized $_POST array before sending an AJAX request using jQuery? Here's the situation: $('#ajax-preview').on('click', function(e) { e.preventDefault(); var formData = ...

javascriptphpjqueryarraysajax

Electron.js issue: ipcRenderer and ipcMain leading to a white screen problem

I am currently working on a desktop application using Electron, Vue, and Vuetify. However, I have encountered an issue where sending data from the rendererProcess to mainProcess using IPC results in a white blank screen. I'm unsure of what is causing ...

javascriptvue.jselectronvuetify.js

Restricting Options in jQuery/ajax选择列表

Although there are similar questions posted, my specific issue is that I am unsure of where to place certain information. My goal is to restrict the number of items fetched from a list within the script provided below. The actual script functions correct ...

javascriptjquerycssajaxhtml-lists

How can I implement Before() and After() hooks within a hooks.js file for a Selenium and JavaScript project?

Within my Selenium JS / Cucumber framework, I have incorporated Before() & After() functions to handle the setup and tear down of my webdriver. To manage these functions, I decided to organize them in my customSteps.js file alongside other cucumber st ...

javascriptseleniumcucumbercucumberjs

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

When I click on button 1, it starts at image 1 because the counter is set to 0. Clicking on button 2 takes me to image 4 with a counter value of 3, while clicking on button 3 leads to image 7 with a counter value of 6. The process should also work in reve ...

javascripthtmlcssimage

Choosing an array from the MongoDB database

{ "_id": "4f609932615a935c18r000000", "participants": [ { "user_name": "john1", "role": "user", "created_at": { "sec": 1331730738, "usec": 810000 }, { "user_name": "john2", "role": ...

javascriptnode.jsmongodb