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

What is the best way to send an email with a randomly generated HTML output using a <button>?

I am currently working on a feature where a random HTML output is sent to me via email whenever a user clicks on a button on the website page. The user receives a code when they click the button, and I want that code to be emailed to my address automatical ...

Guide to using the PUT method in Node.js Express to update a record using the primary key

I'm currently struggling with understanding the proper usage of the put statement in node js. Here is the code I have been using: app.put("/cars/:id", (req, res) => { //retrieving a record based on id (uuid) e.g. http://localhost:3000/cars/a5ad957 ...

The 3-way data binding in angularFire does not update a function

My issue involves a firebaseObject (MyFirebaseService.getCurrentUser()) being bound to $scope.user. Once successfully bound, I iterate through the object to check if it contains an "associatedCourseId" equal to a specific value ($stateParams.id). If it doe ...

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

My to-do app is almost fully functional - I can create items, mark them as completed, and delete them using a delete button. However, there's one issue: when I delete an item, the page doesn't update in real-time. I have to manually refresh the p ...

What could be causing the issue with ng-include not functioning properly?

Issue with ng-include Organized Directory Structure : ssh_project --public ----templates ------header.html ------footer.html ----views ------index.html Here is the content of my index.html file <body> <h1>Hello</h1> <div ng ...

How can we convert a mixed-case word into one or more words with initial capital letters?

Is there a way to convert caps and spaces to their normal form? For instance, can the word coreControllerC4a be transformed into Core Controller C4a automatically when a function is triggered? ...

What is the best way to update React State after making an asynchronous call to MongoDB?

I have been facing a common issue, but couldn't find an up-to-date solution on Stack Overflow specifically for React/Meteor. My goal is to query a mongoDB to retrieve data and then pass it into the state of my React components. Currently, I am queryin ...

Activate a function upon the clicking of a button by utilizing a directive in Angular.js

In my directive, there is a function called "myFunction()", and in the template, I have a button. When the button is clicked, I want to execute the function without using ng-click for specific reasons. Instead, I am looking to assign a class to the button ...

MUI: Transforming the uncontrolled value state of Select into a controlled one with a new component

I'm attempting to develop an edit form for modifying data fetched from a database based on its ID. Here is what I have tried: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material-ui/core/ ...

"Identifying the exact number of keys in a JSON object using

Is there a key in the JSON data that may or may not exist? How can I determine the total number of occurrences of this key using jQuery? JSON : jasonData = [{"test":"sa3"},{"test":"4s"},{"acf":"1s"},{"test":"6s"}]; I need assistance with implementing th ...

Material-UI: The call stack has exceeded the maximum range, causing an Uncaught RangeError

I am currently utilizing the Dialog and Select components offered by Material-UI in conjunction with React. Here is a quick example: import React from 'react'; import { Dialog, MenuItem, Select } from '@material-ui/core'; class Examp ...

Encountering issues with AJAX requests using jQuery

Hey there, I'm attempting to make an AJAX call in a C# page and I'm running into some issues. Below is my jQuery code: $(document).ready(function () { $.ajax({ type: "POST", url: "conteudo.aspx/GetNewPost", data: { i ...

Tips for informing flowtype of expanding a partial options object to ensure it is fully developed by a specific stage

Most of you are probably familiar with a very simple use case from your projects. Imagine you have a utility class or function that looks like this: type Options = { foo?: string }; class Something { static get defaultOptions(): Options { ...

JavaScript's Circular Output

I am currently developing a calculator and I want it to round the results to approximately 5 decimal places. Below is the JavaScript code snippet I have written to take input and generate output: <div class="input"> Price paid per s ...

Creating animated direction indicators in the "aroundMe" style with ngCordova

I am attempting to recreate a compass or arrow similar to the one featured in the AroundMe Mobile App. This arrow should accurately point towards a pin on the map based on my mobile device's position and update as I move. I have been struggling to fi ...

Issue with Angular: boolean value remains unchanged

Currently, I'm encountering an issue with my application. My objective is to establish a list containing checkboxes that toggle their values between true and false when clicked. Sounds simple enough, right? Below is the HTML code snippet: <l ...

Steps for retrieving multiple documents from Firestore within a cloud function

In my cloud function, I have set up a trigger that activates on document write. This function is designed to check multiple documents based on the trigger and execute if/else statements accordingly. I have developed a method that retrieves all documents u ...

Could Ramda assist in enhancing pipeline/composition processes with a logging feature?

Considering implementing logging within a composed chain of functions, the following code demonstrates how it can be achieved: const f = R.compose( transformation2, doAlso(x => console.log(`id: ${x.id}`)), transformation1 ) This approach would c ...

Skipping code in JavaScript/jQuery function on window load

I have created a function that applies specific CSS rules to elements when the window is fully loaded. Check out my code below: function applyHover() { $('.view_preloader .overlay').css('opacity',1); $('.view_pre ...

Preventing pageup/pagedown in Vuetify slider: Tips and tricks

I am currently using Vuetify 2.6 and have integrated a v-slider into my project. Whenever the user interacts with this slider, it gains focus. However, I have assigned PageUp and PageDown keys to other functions on the page and would like them to continue ...