Compile the sources of an npm dependency using Brunch

Recently, I've been facing an issue while trying to develop my web application using Brunch. The problem arises from a specific npm package called animated-vue, which consists of sources programmed in ES2016.

After adding this package as a dependency and attempting to build my project, an error message pops up:

Processing of node_modules/animated-vue/src/index.js failed. SyntaxError: 'import' and 'export' may only appear at the top level (5:4)

This error indicates that the module is not being transpiled by Babel, even though Babel is included as one of my devDependencies.

If anyone has suggestions or insights on how to resolve this issue, I would greatly appreciate your help.

Below are excerpts from my brunch-config.js file and package.json for reference:

[Contents of brunch-config.js]
[Contents of package.json]

If you have any ideas on what might be causing this problem or how to fix it, please feel free to share.

Thank you in advance for your assistance!

javascriptnpmecmascript-6babeljsbrunch

Answer №1

To solve this problem, it appears that configuring the npm.compilers setting to ['babel-brunch'] is crucial, along with ensuring that the files are not being ignored by babel_brunch.

For a more in-depth conversation on this issue, you can refer to this discussion thread, and for a complete working example, take a look at this repository.

Answer №2

This issue appears to be related to the sequence in which the Brunch packages are executed. While it may not be the recommended approach, have you considered moving the babel plugins just before the problematic plugin?

Remember, the order of plugins matters (as indicated by their arrangement in package.json)

These insights can be found in the official Brunch guide. You might also want to check out this specific issue.

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

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting the Issue of PHP Variables Not Being Assigned to Javascript Variables

I am currently struggling with an issue. I am trying to assign a PHP value to a variable in Javascript. Here is what I have attempted: <script> JSvariable = <?php echo $PHPvariable; ?>; </script> However, this approach is not yieldi ...

javascriptphp

Using the mapState function in vuex allows for easy access to Vue methods

I have an important task to complete while the data is being computed using vuex mapState. I must ensure that the vue method countAlerts is called every time the data changes; however, the computed property needs to invoke this method and unfortunately, ...

javascriptvue.jsvuex

Find the smallest number within an array without relying on the Math function

Could someone assist me in creating a function that finds the lowest number in an array? I've been struggling with this and previous answers on similar questions didn't really help as they presented solutions with unfamiliar code. The current cod ...

javascript

"Transforming Selections in Illustrator through Scripting: A Step-by-Step Guide

In Illustrator, I successfully used an ExtendScript Toolkit JavaScript code to select multiple elements like text, paths, and symbols across different layers. Now, I am looking to resize them uniformly and then reposition them together. While I can apply ...

javascriptadobe-illustratorextendscript

Tips for retrieving and transforming the date time picker into the server format (toISOString)

I am attempting to utilize a datetime picker and convert it for server-side transmission, but I'm encountering issues. Here is my attempted code: <html> <head> <meta charset="utf-8"> <meta name="viewport" cont ...

javascriptajaxdatetime

Is there a method to preserve the pressed/focused state when moving from one input box to the next?

While creating a form for a client, I encountered a requirement where the input box should change once clicked and retain that change even after it has been filled and the user moves to the next input box. Is there a way to achieve this using only HTML & C ...

javascripthtmlcss

Guide on handling 404 page redirection within an axios service in Next.js

Currently, I am utilizing axios to handle my API calls. One thing that I want to achieve is checking the status of the response received from the api and potentially redirecting to a 404 page based on that. const api = axios.create({ headers: { commo ...

javascriptaxiosnext.js

What steps should I take to pinpoint the fundamental mistake in my webpage dedicated to clocks?

Exploring an intriguing clock project that utilizes ancient timekeeping methods found at . Recently encountered a puzzling error in Chrome, where it claims to be unable to call a method on undefined. Strangely enough, the error message is not located near ...

javascriptdebugginggoogle-chrome

Updating data in a SQL database using PHP when a button is clicked

This Question was created to address a previous issue where I had multiple questions instead of focusing on one specific question Objective When the user selects three variables to access data, they should be able to click a button to modify one aspect o ...

javascriptphpjqueryhtmlmysql

A different approach for dynamically displaying React components sourced from an API

As I develop a website using Next.js/React that pulls in content from Strapi CMS, my goal is to create a dynamic page template for news articles. The aim is to empower content editors by giving them the flexibility to choose the type of content they wish t ...

javascriptnode.jsreactjsnext.jsswitch-statement

Alternative to updating object coordinates in Fabric JS 1.7.9 - seeking solutions for migration challenges

Update: JSFiddle: https://jsfiddle.net/Qanary/915fg6ka/ I am currently working on implementing the `curveText` function (found at the bottom of this post). It was functioning properly with `fabric.js 1.2.0`, but after updating to `fabric.js 1.7.9`, I not ...

javascriptjquerywordpressfabricjs

Having trouble executing clasp through the terminal

I tried to follow the instructions from https://github.com/google/clasp Unfortunately, when I attempted to run the command, I encountered this error message: -bash: clasp: command not found For reference, my system specifications are as follows: O ...

node.jsnpmgoogle-apps-scriptclasp

How to eliminate all <style> tags across the board using Regex in JavaScript

Is there a way to utilize regex in JavaScript for removing all instances of <style>, <style type="text/css">, </style>, and <style type="text/css"/>? I want the outcome to only present the CSS without any style tags. The code below ...

javascriptregex

Is there a way to execute .jsx Photoshop scripts on images using Java?

Currently, I am in the process of developing a Java program to apply edits to a sequence of images. However, I am searching for a simple and adaptable method to conduct these edits by utilizing Image Editors Scripts (such as Photoshop Scripts, Gimp Scripts ...

javascriptjavaphotoshopjsxphotoshop-script

When the button onClick event is not functioning as expected in NextJS with TypeScript

After creating a login page with a button to sign in and hit an API, I encountered an issue where clicking the button does not trigger any action. I have checked the console log and no errors or responses are showing up. Could there be a mistake in my code ...

javascripttypescriptnext.js

Can someone guide me on the process of adding a personalized emoji to my discord bot?

After creating my own discord bot, I'm ready to take the next step and add custom emojis. While tutorials have helped me understand how to use client.cache to type an emoji, I'm unsure of how to upload them and obtain their ID for use in my bot. ...

javascriptnode.jsnpmdiscord.jsemoji

Attempting to grasp the intricacies of the express Router functionality

I'm a beginner with Node.js and I currently have three JS files: The Index.js file has the following code: var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, r ...

javascriptnode.jsexpress

Discovering the power of ng-change in an Angular typeahead search functionality

I am facing an issue with displaying the result list when searching for users on key press using customTemplate.js. The list is not showing up after the first key press. Below is the code I am using: <input type="text" placeholder="Search people here ...

javascriptangularjs