When configuring three.js and node.js on a live server, encountered a SyntaxError due to an unexpected string while importing './style.css'

Having trouble getting a simple three.js website up and running on a live server (a2 shared hosting). Node.js is installed, but the start up file main.js doesn't seem to be reading properly. Completely new to Node. Starting the server results in an error - feeling completely lost...

/home/blockc17/app/main.js:1
import './style.css';
       ^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at Module.require (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper- 
    scripts/node-loader.js:80:25)
    at require (internal/modules/cjs/helpers.js:25:18)
    at loadApplication (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper- 
    scripts/node-loader.js:243:2)
    at setupEnvironment (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper- 
    scripts/node-loader.js:214:2)


**Main.js imports**

 import './style.css';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// Setup

**package.json**

{
  "name": "blockcb",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0"
  }
}



**Index.html HEAD**

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="./src/main.js"></script>
    <title>BlockChain Bullies</title>
  </head>

Apologies for the code overload. Any guidance on how to tackle this issue and get the app running would be greatly appreciated.

[file structure in Cpanel][1]


[1]: https://i.sstatic.net/lYiX7.png

Answer №1

To properly handle CSS imports, it is necessary to utilize Vite framework. Simply execute the following command:

yarn dev

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

IE Script loading

There is a script that I have, it appends in the document like so: window.d = document s = d.createElement('script') s.setAttribute('type','text/javascript') s.setAttribute('src',options.url) d.getElementById ...

Having trouble with findOneAndUpdate function in MongoDB and Node.js?

I have been struggling to update a Record in mongodb using nodejs, but unfortunately, it's not working as expected. I am receiving the data on the other end and everything seems fine, however, for some reason, it refuses to update the record. Below i ...

Is there a way to recognize an XPath regardless of the div indices?

I'm currently developing a Python script to extract data from a website, but I am facing a challenge with the cookie pop-ups that appear. In order to interact with the buttons on these pop-ups, I require their XPaths. However, the issue is that a port ...

Confusing Accessibility Rules: A Guide that Leaves Me Scratching My Head

I've been reviewing a set of rules to make sure we're in compliance with the Americans with Disabilities Act. One guideline has me scratching my head: Use the title attribute when text is not accessible I'm confused - how can text be ina ...

Ways to position a flexbox child at the bottom of its container

Utilizing Flexbox to arrange different content in a panel, there is an issue with the positioning of icons within each panel. The fourth icon wraps around and aligns with the first one at the top of its container, instead of lining up with the third icon a ...

Preventing CORS issues when making HTTP requests to an Elasticsearch server using Angular hosted on Firebase

As someone who is a bit out of touch with web technologies, I'm pretty sure this question has been asked before. However, I am struggling to understand what CORS is and why it is causing my simple HTTP request to be blocked. I am currently working on ...

The functionality of React useState seems to be operational for one state, but not for the other

I am currently working on developing a wordle-style game using react. Within my main component, I have implemented a useEffect that executes once to handle initialization tasks and set up a "keydown" event listener. useEffect(() => { //The getWor ...

Using JavaScript variables within an HTML tag

I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...

What is the method to change between input sources in php?

Imagine this scenario: when a user clicks on a specific button, I want them to be presented with either a dropdown list or an input field. This decision would allow the user to choose an existing item or create a new one. <select name="choose[rowId]"&g ...

Increase the Sorting Key in DynamoDB using node.js

I'm a beginner with dynamodb and I'm looking to increment the Sort Key. If the id=0, the next id should be 1 and so on. If a user (Partition key) and id (Sort Key) add items, the next items should have the id incremented by 1. I want to achieve t ...

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

Navigating with router.push in Vue.js to the same path but with different query parameters

The existing URL is /?type=1 I am attempting to implement router.push on this specific page. this.$router.push('/?type=2'); However, it results in a NavigationDuplicated error. I prefer not to utilize parameters such as /:type ...

Passport.socket.io cannot resolve the issue of a missing session

The Issue I am facing a problem with the failed connection to socket.io: No session found using passport.socketio.js and I am unable to identify the root cause. Despite checking similar posts, the configuration seems fine to me. However, it appears that ...

Utilizing Fancybox with a polymer paper-card: A step-by-step guide

I have a collection of paper-cards and I am looking for guidance on integrating the fancybox library to display the content of each paper-card. Here is a sample of a paper-card: <paper-card heading="Emmental" image="http://placehold.it/350x150/FF ...

Obtain the referrer URL from a Google Cloud Function

I'm working with a Google Cloud API function built on Node.js and I need to determine the source of the API request, specifically the request header referer. I attempted using req.get('referer') but it only returned null. Is there another me ...

The jQuery file that is included in the main master page is not accessible for the .aspx page that inherits the same master page

In my web development project, I am facing an issue with including the jQuery file in a master page. The structure of my project is as follows: The master page is located in the root directory. The jQuery file is stored in a folder named "script". The sp ...

Tips for placing a checkbox above a DIV element when generating checkboxes within a foreach loop

This is the output I have generated This HTML code belongs to me <td class="category" colspan ="2" id="tdcategory1"> <div id="category1" style="border:none !important; overflow:hidden; width:auto; height:auto"> </div& ...

Transferring information from AJAX to PHP script with the click of a button

Simply put, I am in the process of adding a pop-up update panel to my to-do website using an HTML button. The website already has a login-register system and uses MySQL queries to display different tables for each user. The update buttons on the website c ...

What is the process of sending Firebase topic notifications through Node.js and Express?

As an Android developer, I am trying to send notifications to all users in my app who are subscribed to the topic named ALL_USER. However, I have encountered difficulties in sending notifications to that specific topic. Thank you in advance for your assis ...

Tips on introducing a random pattern into a Javascript gaming experience

To kick off the game, let's generate a pattern randomly. Follow these steps: -Include a function that generates the pattern. (Hint: JavaScript's Math.random function might come in handy) -Invoke your new function from the startGame function I&a ...