The Parcel build was unsuccessful due to an error from @parcel/resolver-default: The file '../../../../../css/main.css' could not be loaded within the './src' directory

I utilize [email protected]. Whenever I attempt to load an external css or javascript file in my index.html, Parcel consistently fails to build with the following error:

Build failed.

@parcel/core: Failed to resolve './css/main.css' from './src/index.html'*

@parcel/resolver-default: Cannot load file '../../../../../css/main.css' in './src'.

Here is the Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parcel V2 Tutorial</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

main.css

body{
    background: cyan;
}

package.json

{
  "name": "parceltutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/resolver-glob": "^2.7.0",
    "parcel": "^2.7.0"
  }
}

I have also installed @parcel/resolver-glob and configured my .parcelrc like so:

{
    "extends": "@parcel/config-default",
    "resolvers": ["@parcel/resolver-glob", "..."]
}

I have attempted removing my .parcel-cache as per suggestions from others, but the error persists. Thank you 🙏

File structure can be viewed here

Answer №1

Have you experimented with using .component.style? Check out more on this topic here:

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

Unable to transfer a function to a component using <Route /> tag

In the Erm component, the function setErm is undefined even though it is received by the App component. When passing something like something='foo', the ERM component receives it but not setErm={props.setErm} const App = props => { console. ...

Encountering a CSS issue during the edit process with PHP and JavaScript

I'm encountering an issue when clicking on the edit button, as my data fetched from the DB should be displayed inside a text field. However, I'm facing a CSS-related error: Uncaught TypeError: Cannot read property 'style' of null Belo ...

Issue with Jquery UI sortables not functioning properly

Struggling with getting a sortable list to work using jQuery UI. The ul element is receiving the class 'ui-sortable' but nothing seems to be happening. To demonstrate this issue, I created an example since the original javascript code is quite c ...

Retrieve the inner content of parentheses within a string, utilizing recursion for nested parentheses

I am currently working on a function that will extract words enclosed in parentheses and store them in their own array, accounting for nested parentheses recursively. For example, when given the string "((a b) ugh (one two)) pi", I would like it to be tra ...

Vite.js, specifically in conjunction with Vue.js, experiences an issue with undesired page reloads, but this

Encountering an unusual issue with Vite.js specifically on Samsung Internet while using the development server... The problem at hand involves a continuous automatic page reload every 3 seconds, without any intentional intervals being set or written. This ...

Material-ui 4.11.4 - Grid: For items to be displayed correctly in a column, it is necessary to set the container direction to 'row' (??)

I have a requirement to display multiple divs in a column layout, centered along the page axis and stretched in width based on the available space. I am currently using the latest version (4.11.4) of material-ui which includes both the <Grid> contain ...

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

How to eliminate Image notifications in NextJS

I keep receiving a warning about the local images on my website: Image with src "http://localhost:3000/_next/static/media/icon_home.0f967506.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also ...

Upon redirection, my JavaScript codes cease to function properly and require a page refresh to resolve

Upon redirecting to another page with included JS codes, my main.html does not function properly until I refresh the page. What steps can be taken to resolve this issue? 0.html <body data-theme="b"> <div class="p2" data-role="page" id="p2"> ...

Unable to access URL through AppGyver's rootview

As per the information provided in their guide: All location attributes can be either Supersonic routes or URLs. After adding the code to my structure.coffee file, only the initial splash screen appears and nothing else loads: rootView: location ...

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

I have two select boxes with JavaScript on them. When I use filter1, my URL changes to www.url.com/&filter[]=6827 and it works perfectly. The selected option also works without any problems. However, I want a new select box like filter2 with multiple f ...

Add up the values in the table by organizing them into groups

There is a table below that I am working with: <table> <tr> <th>Category</th> <th>Value</th> </tr> <tr> <td class="cat1">cat1</td> <td class="value" ...

Utilize res.render in Node.js to pass multiple data arrays to the view

I am facing an issue with populating two separate selects in my view with different arrays. Can anyone guide me on how to pass two distinct JSON objects using res.render? I have attempted the method below without success. const result1 = {data1: "val ...

Update the display immediately upon a change in the state

In my app.js file, the code looks like this: export const App = () => { const [selectedMeals, setSelectedMeals] = useState<string[]>(["allItems"]); const onCheckHandler = (e: any) => { const checkedValue = e.target.value; if (e.targ ...

Implement the Show/Hide TinyMCE Functionality in your <textarea></textarea> Box

Information I recently added TinyMCE to my website after discovering that a website I frequently visit uses it. While their design and functionality are different, I managed to replicate their look on my own site and now want to implement a specific featu ...

Trouble with document updates in MongoDB/Mongoose causing a delay?

I am currently working on updating an object nested in an array in my application. When I test this functionality using Postman, I am experiencing a delay that requires me to make two requests in order to see the updated value. if (taskStatus) { cons ...

What causes a fixed position div to extend beyond the boundaries of the main container?

Below is the CSS for the fixed div: .top-container { position: fixed; width: 100%; z-index: 999; } Upon zooming out the screen, the div causes the main container to break on the right side while the left side remains unchanged. Refer to the screenshot be ...

When using `element.addEventListener`, event.target will be the target

When working on a solution, I initially bound event listeners to multiple targets within the same container. I am curious to know if anyone has noticed considerable performance improvements by using just one event listener and leveraging the target of the ...

Tips for handling timeouts when a connection fails to establish

Is there a default timeout value in the socket.io API that triggers after multiple connection attempts fail? In my application, I am trying to connect to a Node.js server using socket.io. If the connection is not established or unreachable, I want to recei ...

"Create a React Bootstrap Alert component with a dismissible button feature that is

I'm trying to add an "X" button to dismiss an alert on my website, but the bootstrap style isn't working properly. I've attempted setting the closeLabel to empty string, but it hasn't resolved the issue https://i.sstatic.net/YkDrY.png ...