Encountered an issue while attempting to include multiple JavaScript sources. Please review your configuration settings for the javascripts.join

While setting up a basic app using phoenix-elixir and brunch, encountering the following error:

23 Mar 10:18:10 - warn: node_modules/phoenix/priv/static/phoenix.js compiled, but not written. Check your javascripts.joinTo config
23 Mar 10:18:10 - warn: node_modules/phoenix_html/priv/static/phoenix_html.js compiled, but not written. Check your javascripts.joinTo config

Here's what is in my branch-config.js:

files: {
    javascripts: {
      joinTo: {
        "js/app.js": /^(web\/static\/js)/,
        "js/script.js": /^(web\/static\/js)/
      }
    }
    // ...
}

This is how my folder structure looks like:

web/
  static/
    js/
      app.js
      script.js

Although I observe script.js being included (it compiles into priv/static/js and appears as source in dev tools), the functions within it don't behave as expected. They do work if I merge the contents of script.js into app.js.

Interestingly, when I handle css in a similar fashion...

stylesheets: {
  joinTo: "css/app.css",
  joinTo: "css/style.css"
},

If I structure js similarly to css, there are no errors, but again, the functions within won't execute...

javascripts: {
  joinTo: "js/app.js",
  joinTo: "js/script.js"
}

Should I move script.js to the vendor folder instead? Is app.js the only js script permissible inside web/js? It seems like a configuration is missing somewhere.

EDIT:

$ mix phoenix.new -v
Phoenix v1.1.4

$ brunch -v
2.1.3

Answer №1

If you prefer to consolidate your JavaScript files into a single app.js file, simply keep the configuration settings at their default values

files: {
    javascripts: {
      joinTo: {
        "js/app.js": /^(web\/static\/js)/
      }
    }
    // ...
}

This setup will combine all files located in web/static/js into the app.js file. By doing this, you are instructing brunch to merge all JavaScript files into two separate files, which can cause confusion.

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

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

Update the observability status of one observable using a different observable

Upon running the following code, you'll notice that an xhr request is being sent to the console regardless of whether I am subscribed to the subject or not. I would prefer for these requests not to be made if I am not subscribed. // To start, install ...

What happens when dynamically loaded static resources are loaded?

Currently, I am dynamically injecting HTML into a page using JQuery AJAX. The injected HTML contains script and link tags for JS and CSS files respectively. The issue I am facing is that my initPage() function runs before the script containing its definiti ...

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

Having difficulty requesting an API in Next.js that relies on a backend cookie

1: When a user logs in, I generate a refresh token and create a cookie using 'cookie-parser'. This cookie is then sent to the path '/user/refresh-token' res.cookie('refreshtoken', refreshtoken, { httpOnly: true, ...

Sending the object context back to the controller callback from an AngularJS Directive

I am currently working on creating a modified version of ng-change with a delay feature for auto-saving changes. Here is the custom directive I have implemented: myApp.directive('changeDelay', ['$timeout', function ($timeout) { re ...

Guide to declaring variables using jQuery

Currently tackling a school project, I stumbled upon some online example solutions and managed to decipher most of the code. However, there is one line that has me puzzled. var $newTweet = $('<div class=tweet></div>'); My assumption ...

Tips on obtaining checkbox values other than "true"

Having trouble retrieving the values of selected checkboxes instead of displaying "Custom Category"? I've attempted to access the values and attributes with no success. I'm aiming to display the values of the selected checkbox. app.component.ht ...

React.js and Visual Studio Code have recently been causing unexpected and massive "Module not found" errors

Everything was going smoothly with my project until I uploaded it to Github and then cloned it. Suddenly, I started encountering various "Module not found: Can't resolve..." import errors. For example: Module not found: Can't resolve './co ...

Display an error message if the input field is empty, then conceal the message once the input field is filled

Can anyone assist with a Vue.js app issue I'm facing? Currently, when the search input is empty, an error message appears - which is okay. However, I want to hide this error message as soon as the user starts typing in the search field. The code for m ...

Storing property data outside of the render method in ReactJS is key for efficient

I have encountered an issue while attempting to map data outside of the render method in my function and return it within the render. The mapping error is causing confusion as I am uncertain about its underlying cause. Below is the function responsible fo ...

Refresh ng-repeat following data entry or push in Angular Material dialog

Currently, I am facing an issue with adding a new object to an ng-repeat array. The array is populated with data fetched through an $http request. My goal is to input data in a dialog and pass it to a function that will then add the data as an object to th ...

What is the procedure for adding a URL path in jQuery?

When using $(this).attr("href"); in the jQuery Ajax url field, it correctly retrieves the URL path. However, if I try to use a prefix in front of it like this: $.ajax({ type: 'GET' url: 'api/' + $(this).attr("href"); }) the co ...

The useEffect hook is failing to trigger

Currently, I am attempting to retrieve data from an API using Redux for state management. Despite trying to dispatch the action within the useEffect hook, it does not seem to be functioning properly. I suspect that the issue lies with the dependencies, but ...

Tips for accurately measuring the height of a single table cell

I am facing an issue with a table that I have set up. Here is the code: <table> <tr> <td id='tdleftcontent' style='border:1px solid red;'> <asp:Label ID='lbl' runat="server"></asp:Label> < ...

Increase the quantity with animation

I am attempting to increment a number within an element on the page. However, I require the number to have a comma included while the increment should only increase by 1 digit every second. The code is currently functional, but I am facing a dilemma regar ...

Is it possible to incorporate HTML and CSS into a npm package?

I've been searching extensively for an answer to this question, but haven't found a clear answer. I recently began using the node package manager and I'm wondering if it's possible to publish a package that includes HTML and CSS, or if ...

The functionality of Angular 2's AsyncPipe seems to be limited when working with an Observable

Encountering an Error: EXCEPTION: Unable to find a support object '[object Object]' in [files | async in Images@1:9] Here's the relevant part of the code snippet: <img *ngFor="#file of files | async" [src]="file.path"> Shown is the ...

Broaden the natural interface for the element

I'm looking to create a uniquely customized button in React using TypeScript. Essentially, I want to build upon the existing properties of the <button> tag. Below is a simplified version of what I have so far: export default class Button extend ...

Get rid of the seconds in the output of the toLocaleTimeString

The method Date.prototype.toLocaleTimeString() provides a language-sensitive representation of the time part of a date in modern browsers. Unfortunately, this native function does not offer an option to exclude the display of seconds. By default, it shows ...