Node - A circular @import reference has been detected

Recently, I've dived into the world of JavaScript, node.js, and related technologies. My goal is to create a front-end development environment from scratch using tools like gulp, bower, browser sync, and various plugins.

I've made significant progress in setting up the environment, but I'm facing some roadblocks that I can't seem to overcome. It could be due to issues with the code syntax, the execution order of functions in my gulpfile.js, or even incorrect usage of certain plugins. I've tried tweaking settings, changing paths, and experimenting with different configurations, but nothing seems to work.

Currently, I'm encountering the following challenges:

  • I have to save main.scss twice before seeing changes in the browser.

  • When running gulp in the console, I'm getting the following errors:

[16:38:08] Starting 'html'...

[16:38:08] 'html' errored after 41 ms

[16:38:08] ReferenceError: injectFiles is not defined at Gulp. ([full_path]\gulpfile.js:50:18)

at module.exports ([full_path]\node_modules\orchestrator\lib\runTask.js:34:7)

at Gulp.Orchestrator._runTask ([full_path]\node_modules\orchestrator\index.js:273:3)

at Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)

at [full_path]\node_modules\orchestrator\index.js:279:18)

at finish ([full_path]\node_modules\orchestrator\lib\runTask.js:21:8)

at [full_path]\node_modules\orchestrator\lib\runTask.js:52:4

at f ([full_path]\node_modules\once\once.js:17:25)

at DestroyableTransform.onend ([full_path]\node_modules\end-of-stream\index.js:31:18)

at emitNone (events.js:91:20)

Reviewing my gulpfile.js content:

...

If you have any insights or suggestions on how to resolve these issues and optimize my environment setup, I'd greatly appreciate your guidance.

Update on the previous issue:

A recent breakthrough thanks to Bruno Poeta's advice:

Plumber encountered an unhandled error caused by 'gulp-sass plugin.' The error message indicated an @import loop in the main.scss file.

[15:11:19] gulp-inject successfully injected files into index.html.

[Browsersync] Access URLs:

Local: localhost : 3000

External: 192.168 .0.4 :3000

UI: localhost :3001

UI External: 192.168 .0.4 :3001

[Browsersync] Serving files from: dist

[Browsersync] Watching files...

Note: Line 526 mentioned in the error doesn't actually exist as it's generated by the gulp-inject plugin; marking the end of the injection process.

javascriptgulpgulp-watchgulp-sassgulp-inject

Answer №1

The issue lies within your styles task. The problem arises from importing all .scss files, including the file main.scss itself. This creates a loop that needs to be resolved. To fix this, simply exclude main.scss from the injected files list like so:

gulp.task('styles', function(){
  var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});

  // ...

With this adjustment, the task should now function correctly.

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

Expo causing issues with TouchableOpacity in React Native app

I recently encountered an issue on my login page where I tried to use TouchableOpacity on the text "Already have an account? Sign in instead!" to navigate to the sign-in screen, but it didn't work as expected. After spending hours debugging my code, I ...

javascriptandroidiosreactjsreact-native

combine 2 documents

Two HTML files are on my hands. Both of these HTML files need to be combined. Is there a method in JavaScript or Jquery that can merge two files into one? I have looked at the append and other functions in Jquery, but I am dealing with two large files. ...

javascriptnode.js

Loading data dynamically in a table by utilizing the react WayPoint library

I'm currently utilizing a combination of material UI table and react-table. When the number of rows in the table exceeds around 200, the performance dips. To address this issue, I am looking to display a fixed number of rows (let's say 20 rows) i ...

javascriptreactjsmaterial-uiwaypoint

What is the best way to convert and update document fields in MongoDB to GeoJSON format using Java?

I have a collection in mongodb that stores information about airports and I need to perform some Geospatial Queries. One example document from this collection looks like this: { "_id" : ObjectId("528e8134556062edda12ffe6"), " ...

javajavascriptmongodbgeospatial

How can I access a PHP variable from an external .php file within a JavaScript script?

I have recently implemented a JavaScript code called "upload.js" for uploading files to my server: function beginUpload(){ document.getElementById('upload_form').style.visibility = 'hidden'; return true; } function endUpload(s ...

phpjavascript

Trouble arises when attempting to execute a Vue method through a Vue computed property

It seems that the issue at hand is more related to general JavaScript rather than being specific to VueJS. I have a Vue Method set up to make a Firebase Call and return the requested object, which is functioning properly: methods: { getSponsor (key) { ...

javascriptvue.jsvuejs2

Activate jQuery function upon clicking a bootstrap tab

When I click on a Bootstrap tab, I want to trigger an AJAX function. Here is the HTML code: <li><a href="#upotrebljeni" data-toggle="tab">Upotrebljeni resursi</a></li> The jQuery AJAX function looks like this: $('a #upotreb ...

javascriptphpjqueryajaxpdo

Select2 loading screen featuring preloaded value

Trying to populate a select2 box with instrument options on an edit profile page for a musician site. The information is pulled from the database, but I'm struggling to display the existing instrument list in the select2 box upon render - it always ap ...

javascriptjquerycoffeescript

Exploring the possibilities of using jQuery to access global variables in node.js

My issue has 3 main components. I need to declare a server-side (node.js) variable to store data for the duration of the server run, specifically just a number. I must send a number from the client (jQuery) to the server in order to update the server v ...

javascriptjquerynode.js

Unable to retrieve the API key in Nuxt framework

I am fairly new to NuxtJS and have been following tutorials on it. I am having trouble displaying the {{planet.title}} on my page. However, when I use {{$data}}, I can see all the planets. I want the title of the planet's name that I have in the slug ...

javascriptvue.jsnuxt.js

Show me a way to use jQuery to show the number of images of a particular type that are on a

My webpage features 6 different images, including 4 of various balls such as basketball and baseball. One image is of a truck, while the last one is random. On the page, there is a form with two radio buttons allowing users to select which type of image c ...

javascriptjqueryhtmlfunctionif-statement

Can you explain the function of MathUtils.euclideanModulo and how it sets itself apart from the traditional modulo operation?

I'm a little puzzled by the euclideanModulo function in threejs's mathutils. I understand the concept of the modulo operator, but the euclideanModulo function seems to work differently. ( ( n % m ) + m ) % m I tried researching the meaning of "E ...

javascriptthree.jsmodulo

Exploring the world of functional programming within nested arrays

I have been shifting towards functional programming over imperative programming recently. Imagine I have a nested array data structure and my goal is to update the values of the innermost arrays. What approach would be most effective? Here is the imperat ...

javascriptarraysfunctional-programming

The validation functionality fails to handle dynamically generated inputs

I am facing an issue with validating dynamically created form fields (name, age) using JavaScript. Currently, the validation script only works for the first record of the age field, while the rest are not being validated. Here is the code snippet: <sc ...

javascriptphpjqueryhtmlvalidation

The parameter label is being detected as having an any type, as specified in the Binding element 'label'

Currently, I am referencing an example code snippet from react-hook-form. However, upon implementation, I encounter the following error: (parameter) label: any Binding element 'label' implicitly has an 'any' type.ts(7031) The example c ...

javascripttypescriptnext.jsreact-hook-form

Obtain information from YouTube and format it into a list item

Currently, I'm working on compiling a list of videos that includes the title, link, image, and creator of each video. It's been a bit challenging :S <script type="text/javascript"> $(document).ready(function(){ $.getJSON('http://gdata ...

javascriptjson

Navigating the world of handling get/post requests in Express 4 and Node.js can be tricky, but fear not, as this guide will show you

This question might seem simple, but I'm hitting a mental roadblock trying to answer it. After successfully installing node.js and express 4, running static pages poses no issue. Now, my goal is to create a form to collect some data and display that ...

javascriptnode.jsexpress

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

javascripthtmlcsssafari

In ASP.NET, it is possible to only select a single checkbox at a time within a row in a GridView

I have a project where checkboxes are generated dynamically at runtime. I want users to be able to select only one checkbox at a time in each row. Here is my Gridview: <cc1:Grid ID="GrdWorkingCompany" runat="server" OnRowDataBound="GrdWorkingCompany_Ro ...

javascriptc#asp.net

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

javascripthtmldomecmascript-6html-table