gulp concatenate multiple js files but dependency path cause error

2021-01-11 05:16 sanjesh imported from Stackoverflow

I am using Nodejs- v12.9.0 & gulp-4.0.2

I am concatenating all my js files from root & src directory in to a single file dist/src/allJs.js.

Problem: the dependent modules are not being resolved. My app.js file is at root level & log.js file is under the /src dir.

Src
- log.js
- abc.js
app.js
main.js

app.js file has this statement 'var log = require('./src/log');'

Gulp does concatenate & minify without error but when i run my 'allJs.js' file it gives me below error. Error: Cannot find module './src/log'

My gulp task:

function copyOtherJs(){
    return src(['src/*.js', 'app.js', 'main.js'], { sourcemaps: true })
        .pipe(concat('allJs.js'))
        .pipe(terser())
        .pipe(dest('dist/src'));
}

See also questions close to this topic

Best practice for returning "nothing" from a ternary expression if falsy?

This is the ternary condition spec from mdn:

condition ? exprIfTrue : exprIfFalse

Often I find myself wanting to check if something is true, but I just want to do nothing with the falsy side of the expression. But I'm not sure how to write this:

(someVariable) ? callFunction(someVariable) : donothing but keep running the script

Should I use 'false', 'null', '', 'undefined' or something else?

The editor gives me an error if I just leave it open without anything to the right of the :

Fetch API data with chain of .then methods, but data is not passing through to the next .then

I'm making three http get requests to create an array of unique objects. I'm sharing an example with a random API, not quite the same, but it's captures the essence: Codepen Example The main bug lies in the last 2 then methods of the getData function.

In the getData function, I pass the sorted list of users to the getUniqueGender function, where it fetches more data objects and pushes the first "unique" user by gender to the uniqueUsers array. The getUniqueGender function returns the uniqueUsers array but it doesn't seem to be doing that, why? I've added a console.log in line 28 (Codepen Example) to check if it's ready pushing the user into the array and it's doing so but it's returning an empty array to the next then method. In my actual code, the array passed to the next then method can be printed to the console but I cannot do any computation from that point on, it prints the array.length as 0 to the console.

Please help me debug this. I've been trying to debug this for days... :(

let uniqueUsers = [];
let finalUsers = [];

function sortUsers(arr) {
  /*dummy function to show the synchronous step*/
  return arr;
}

function getUniqueGender(arr) {
  if (arr.length > 0) {
    for (let user of arr) {
      fetch('https://api.randomuser.me/?nat=US&results=${arr.length}')
        .then((res) => res.json())
        .then((json) => json.results)
        .then((results) => {
        if (results.length > 0) {
          for (let res of results) {
            if (!uniqueUsers.some((uniqueUser) => uniqueUser.gender === res.gender))                   {
              //console.log('users gender is unique so its added');
              //console.log(res.gender);

              let editedUser = {
                gender:  res.gender ,
                email:  res.email ,
              };

              uniqueUsers.push(editedUser);
              console.log(uniqueUsers)

            } else {
              //console.log('users gender is NOT unique so its NOT added');
              //console.log(res.gender);
            }
          }
        }
      });
    }
    //console.log(uniqueUsers) //this work in my actual code...
    return uniqueUsers;
  } else {
    return uniqueUsers;
  }
}

function appendInfo(arr) {
  console.log(arr) //this works in my actual code...
  
  for (let uniqueUser of arr) {
    fetch('https://api.randomuser.me/?nat=US&results=1')
      .then((res) => res.json())
      .then((json) => json.results)
      .then((randomUser) => {
      let editedUniqueUser = {

        gender:  uniqueUser.gender ,
        email:  uniqueUser.email ,
        nat: randomUser.nat

      };
      finalUsers.push(editedUniqueUser);
    });
  }
  console.log(finalUsers)
  return finalUsers;
}

function getData() {
  fetch('https://api.randomuser.me/?nat=US&results=5')
    .then((res) => res.json())
    .then((json) => json.results)
    .then((users) => sortUsers(users))
    .then((sortedUsers) => getUniqueGender(sortedUsers))
    .then((uniqueUsers) => appendInfo(uniqueUsers))
    .then((result) => console.log(result)) //why this doesn't work??
    .catch(console.log);
}

getData()

Calling multiple files from the same folder in a single file using module exports in Node

I'm trying to call multiple files from a single index.js file

Here is the current file structure

The index.js file:

const ApplicantRegister = require("./ApplicantRegister");
const ApplicantResidency = require("./ApplicantResidency");
const ApplicantPersonalDetails = require("./ApplicantPersonalDetails");
const ApplicantContactDetails = require("./ApplicantContactDetails");
const ApplicantEducation = require("./ApplicantEducation");

const models = {
  ApplicantRegister,
  ApplicantResidency,
  ApplicantPersonalDetails,
  ApplicantContactDetails,
  ApplicantEducation,
};

module.exports = models;

Inside new.test.js

const {
  ApplicantRegister,
  ApplicantResidency,
  ApplicantPersonalDetails,
  ApplicantContactDetails,
  ApplicantEducation,
} = require("../models");

The files in the models folder contain a single class (example):

class ApplicantRegister {
  constructor(page) {
    this.page = page;
  }

  async navigate() {
    await this.page.goto(
      "https://www.google.com"
    );
  }
}

Which I call in new.test.js:

test("Navigate to page", async () => {
    const register = new ApplicantRegister(page);
    await register.navigate();
  });

I get the error: TypeError: ApplicantRegister is not a constructor

When I call the files individual (const ApplicantRegister = require("../models/ApplicantRegister") and add module.exports to the bottom of the individual files, it works.

Why does it give me the error when I try and require the files from a central file?

Aws Lambda slow down after few request

I use Amazon Lamda with node12. I run htmlparser2 in my code. When I deploy application, htmlparser2's execution time is around 160ms. But after a while function execution time increases to 5000ms. Do you have any idea? In addition same situation in Google Cloud Functions.

index.js

const crawl = require('./crawl.js');

exports.helloWorld = async (req, res) => {
  const url = req.query.url;
  const result = await crawl(url);
  
  res.status(200).type('application/json').send(result);
};

crawl.js

const bookRecipe = require('./recipes/book');
const quotesRecipe = require('./recipes/quotes');

module.exports =  async (url) => {
  console.log('url', url);
  console.time('books');
  const result = await bookRecipe(url);
  console.timeEnd('books');

  console.time('quotes');
  const quotes = await quotesRecipe(result.quotesLink);
  console.timeEnd('quotes');

  result.quotes = quotes;

  return result;
}

recipes/book.js

module.exports =  async (url) => {
      const random = Math.floor(Math.random() * agents.length);  
      const agent = agents[random];
    
      console.time("books::fetch")
      const result = await fetch(url, {
        headers: agent
      });
      console.timeEnd("books::fetch");
      
      const text = await result.text();
      console.time('books::parser');
      const dom = htmlparser2.parseDocument(text);
      console.log('books::length', text.length);
      console.timeEnd('books::parser');
    
      console.time('books::cheerio');
      const $ = cheerio.load(dom);
      console.timeEnd('books::cheerio');
      ...
    }

Everything is almost same in logs. But htmlparser2's execution is too long in second logs.

Logs:

Normal:

    2021-01-26T05:43:28.976+03:00   2021-01-26T02:43:28.976Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO books::fetch: 134.696ms
    2021-01-26T05:43:29.317+03:00   2021-01-26T02:43:29.317Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO books::length 520143
    2021-01-26T05:43:29.317+03:00   2021-01-26T02:43:29.317Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO books::parser: 297.435ms
    2021-01-26T05:43:29.317+03:00   2021-01-26T02:43:29.317Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO books::cheerio: 0.097ms
    2021-01-26T05:43:29.360+03:00   2021-01-26T02:43:29.360Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO books: 518.615ms
    2021-01-26T05:43:30.152+03:00   2021-01-26T02:43:30.152Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO quotes::fetch: 792.172ms
    2021-01-26T05:43:30.218+03:00   2021-01-26T02:43:30.217Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO quotes::length 312774
    2021-01-26T05:43:30.218+03:00   2021-01-26T02:43:30.217Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO quotes::parser: 59.300ms
    2021-01-26T05:43:30.218+03:00   2021-01-26T02:43:30.218Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO quotes::cheerio: 0.081ms
    2021-01-26T05:43:30.520+03:00
2021-01-26T02:43:30.520Z    5e3c40c1-36ec-4e94-9230-cbd9d524f984    INFO    quotes: 1159.586ms
    2021-01-26T02:43:30.520Z 5e3c40c1-36ec-4e94-9230-cbd9d524f984 INFO quotes: 1159.586ms

Abnormal:

2021-01-26T05:44:48.379+03:00   2021-01-26T02:44:48.379Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO books::fetch: 181.431ms
    2021-01-26T05:45:01.737+03:00   2021-01-26T02:45:01.720Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO books::length 518608
    2021-01-26T05:45:01.737+03:00   2021-01-26T02:45:01.737Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO books::parser: 13316.728ms
    2021-01-26T05:45:01.737+03:00   2021-01-26T02:45:01.737Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO books::cheerio: 0.159ms
    2021-01-26T05:45:01.897+03:00   2021-01-26T02:45:01.897Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO books: 13699.625ms
    2021-01-26T05:45:02.668+03:00   2021-01-26T02:45:02.667Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO quotes::fetch: 770.189ms
    2021-01-26T05:45:09.798+03:00   2021-01-26T02:45:09.797Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO quotes::length 313700
    2021-01-26T05:45:09.798+03:00   2021-01-26T02:45:09.798Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO quotes::parser: 7117.983ms
    2021-01-26T05:45:09.798+03:00   2021-01-26T02:45:09.798Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO quotes::cheerio: 0.123ms
    2021-01-26T05:45:09.861+03:00   2021-01-26T02:45:09.861Z 7770ae19-a466-4149-83d2-0d99b9c35a7f INFO quotes: 7963.365ms

How to get the hashed password to pass into my database?

I am able to run a test in Postman, but for some reason I am not passing my hashed password into the DB correctly.

const express = require("express");
// const helmet = require("helmet");
const { User } = require("./db/models");
const bcrypt = require("bcryptjs");
var salt = bcrypt.genSaltSync(10);
var hash = bcrypt.hashSync('bacon', 8);

const port = 4000;

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true, limit: "50mb" }));

// app.use(helmet());

app.get("/", (req, res) => {
  res.send("Hello World!");
});

Here is where i suspect the issue is. I am passing the name, email, and password in. I am trying to figure out how to get the hash to pass into the DB as the password.

app.post("/register", async (req, res) => {
  const user = await User.create({name:req.body.name, email:req.body.email, password:req.body.password});

  bcrypt.genSalt().then(salt => {
    bcrypt.hash("password", salt).then(hash =>{
      console.log(hash);
    });
  })

  console.log(req.body.name)
  res.json(user);
 
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

How can I use Sequelize One-to-Many with Nodejs Express and React properly?

I have a form, where I want to save a "Horgaszat" with "Sor", but "Sor" should contain a foreign key value, as "horgaszatId" in the MySQL database.
I couldn't find out, where should I do this in the code. I use Sequelize to create a database, and in the database, I can see, that the foreign keys are there, but they don't get the "horgaszatid", their value is just NULL.

The related parts of the code: horgaszat.controller.js

const db = require("../models");
const Horgaszat = db.horgaszatok;
const Sor = db.sorok;

exports.create = (req, res) => { 
    const horgaszat = {
      horgaszhely: req.body.horgaszhely,
      datum: req.body.datum,
      fo: req.body.fo
    };
    const sor = {
      nev: req.body.nev,
      darab: req.body.darab,
    };
    Horgaszat.create(horgaszat)
      .then(data => {
        res.send(data);
      })
      .catch(err => {
        res.status(500).send({
          message:
            err.message || "Some error occurred while creating the Horgaszat."
        });
      });
    Sor.create(sor)
        .then(data => {
          res.send(data);
        })
        .catch(err => {
          res.status(500).send({
            message:
              err.message || "Some error occurred while creating the Tutorial."
          });
      });
  };

index.js

db.horgaszatok.hasMany(db.sorok);
db.sorok.belongsTo(db.horgaszatok, {
  foreignKey: "horgaszatId", 
  as: "horgaszat"
});

add-horgaszat.component.js

import React, { Component } from "react";
import HorgaszatDataService from "../services/horgaszat.service";

export default class AddHorgaszat extends Component {
  constructor(props) {
    super(props);
    this.onChangeHorgaszhely = this.onChangeHorgaszhely.bind(this);
    this.onChangeDatum = this.onChangeDatum.bind(this);
    this.onChangeFo = this.onChangeFo.bind(this);
    this.onChangeNev = this.onChangeNev.bind(this);
    this.onChangeDarab = this.onChangeDarab.bind(this);
    this.saveHorgaszat = this.saveHorgaszat.bind(this);
    this.newHorgaszat = this.newHorgaszat.bind(this);

    this.state = {
      id: null,
      horgaszhely: "",
      datum: "", 
      fo: 0,
      nev: "",
      darab: 0,
      submitted: false
    };
  }

  onChangeHorgaszhely(e) {
    this.setState({
      horgaszhely: e.target.value
    });
  }

  onChangeDatum(e) {
    this.setState({
      datum: e.target.value
    });
  }

  onChangeFo(e) {
    this.setState({
      fo: e.target.value
    });
  }

  onChangeNev(e) {
    this.setState({
      nev: e.target.value
    });
  }

  onChangeDarab(e) {
    this.setState({
      darab: e.target.value
    });
  }

  saveHorgaszat() {
    var data = {
      horgaszhely: this.state.horgaszhely,
      datum: this.state.datum,
      fo: this.state.fo,
      nev: this.state.nev,
      darab: this.state.darab,
    };

    HorgaszatDataService.create(data)
      .then(response => {
        this.setState({
          id: response.data.id,
          horgaszhely: response.data.horgaszhely,
          datum: response.data.datum,
          fo: response.data.fo,
          nev: response.data.nev,
          darab: response.data.darab,
          submitted: true
        });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }

  newHorgaszat() {
    this.setState({
      id: null,
      horgaszhely: "",
      datum: "", 
      fo: 0,
      nev: "",
      darab: 0,
      submitted: false
    });
  }

  render() {
    return (
      <div className="submit-form">
        {this.state.submitted ? (
          <div>
            <h4>Sikeresen elmentetted!</h4>
            <button className="btn btn-success" onClick={this.newHorgaszat}>
              Felvesz
            </button>
          </div>
        ) : (
          <div>
            <div className="form-group">
              <label htmlFor="horgaszhely">Horgászhely</label>
              <input
                type="text"
                className="form-control"
                id="horgaszhely"
                required
                value={this.state.horgaszhely}
                onChange={this.onChangeHorgaszhely}
                name="horgaszhely"
              />
            </div>

            <div className="form-group">
              <label htmlFor="datum">Dátum</label>
              <input
                type="date"
                className="form-control"
                id="datum"
                required
                value={this.state.datum}
                onChange={this.onChangeDatum}
                name="datum"
              />
            </div>

            <div className="form-group">
              <label htmlFor="fo">Fő</label>
              <input
                type="number"
                className="form-control"
                id="fo"
                required
                value={this.state.fo}
                onChange={this.onChangeFo}
                name="fo"
              />
            </div>
            
            <div className="form-group">
              <label htmlFor="nev">Sör neve</label>
              <input
                type="text"
                className="form-control"
                id="nev"
                required
                value={this.state.nev}
                onChange={this.onChangeNev}
                name="nev"
              />
            </div>

            <div className="form-group">
              <label htmlFor="darab">Sör száma</label>
              <input
                type="number"
                className="form-control"
                id="darab"
                required
                value={this.state.darab}
                onChange={this.onChangeDarab}
                name="darab"
              />
            </div> 

            <button onClick={this.saveHorgaszat} className="btn btn-success">
              Mentés!
            </button>
          </div>
        )}
      </div>
    );
  }
}

I used these tutorials:
https://bezkoder.com/node-js-express-sequelize-mysql/
https://bezkoder.com/sequelize-associate-one-to-many/

Installing from NPM Gulp

On my task gulp, I try to use the installation of npm packages and use them according to the instructions. I did it with swiper

npm install swiper

After that, I tried to connect it according to one of the conditions.

  // core version + navigation, pagination modules:
     import Swiper, { Navigation, Pagination } from 'swiper';

  // configure Swiper to use modules
     Swiper.use([Navigation, Pagination]);

AND

  // import Swiper bundle with all modules installed
     import Swiper from 'swiper/bundle';

Gulp SyntaxError: Invalid or unexpected token

I just made an script to compile our scss when we save the file with gulp but I execute "gulp sass" I receive the next error:

gulp.task('sass', function () => {
                                  ^

 

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at requireOrImport (C:\Users\smartinc\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11)
    at execute (C:\Users\smartinc\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:37:3)
    at Liftoff.handleArguments (C:\Users\smartinc\AppData\Roaming\npm\node_modules\gulp-cli\index.js:211:24)

This is the code:

const gulp = require('gulp');
const sass = require('gulp-sass');

sass.compiler = require('node-sass');

//  Creates the task that will compile our scss
gulp.task('sass', () => {
    // TODO: Must be a way to call a variable with scss route
    return gulp.src('./cartridges/peru/cartridge/client/default/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./cartridges/peru/cartridge/static/default/css'));
});

The thing is that it works just fine in my computer but it doesnt work in my partner's computer. I have no clue of what could be happening.

Any help?

It seems gulp doesn't upload css folder to local production server - newbie in node and gulp

As the topic. In my app I have gulp task to create and send files to local server. I work with GitHub repo clone; here's the original project

Problem: in this app everything looks good, dist css folder exists, .css files are updated, .js as well. But when I call task to build an application on a local server, the css folder in dist (inside production directory) is not created.

App structure:

|--dist/                   # →  Static version of the website ready to upload (never edit)
|
|--gulpfile.babel.js/      # →  Gulpfile config and tasks
|--node_modules/           # →  Node.js packages (never edit)
|--src/                    # →  Source files
|  |--assets/              # →  Assets
|  |  |--fonts/            # →  Assets: Fonts
|  |  |--img/              # →  Assets: Images
|  |--modules/             # →  Modules: Multi-part components e.g. Navbar (HTML, CSS and JS)
|  |--scripts/             # →  JS
|  |  |--components/       # →  JS: Components
|  |  |--app.js            # →  JS: Main file
|  |--styles/              # →  Styles: ITCSS Architecture + BEM Methodology
|  |  |--main.scss         # →  Styles: Main stylesheet file
|  |--templates/           # →  Site templates (Twig.js)
|  |  |--layouts/          # →  Templates: Layouts
|  |  |--components/       # →  Templates: Components
|  |  |--pages/            # →  Templates: Pages
|--.babelrc                # →  Babel presets
|--.eslintrc               # →  ESLint config
|--.gitignore              # →  Gitignore
|--.stylelintrc            # →  Stylelint config
|--package-lock.json       # →  NPM lock file (never edit)
|--package.json            # →  Node.js dependencies and scripts
|--webpack.config.js       # →  Webpack config
|--yarn.lock               # →  Yarn lock file (never edit)

My style.js in guplfile task has one commit (I fixed bug with autoprefixer browser list - solution found here: https://github.com/browserslist/browserslist/issues/386) but except it is still same as origin.

    import { src, dest, series } from 'gulp';
    import gulpif from 'gulp-if';
    import plumber from 'gulp-plumber';
    import sass from 'gulp-sass';
    import sassGlob from 'gulp-sass-glob';
    import sourcemaps from 'gulp-sourcemaps';
    import postcss from 'gulp-postcss';
    import autoprefixer from 'autoprefixer';
    import gulpStylelint from 'gulp-stylelint';
    import errorHandler from '../util/errorHandler.js';


    import { reload } from '../tasks/server';
    import browserSync from 'browser-sync'

    // Config
    import { paths, isProd } from "../config";

    export function scss() {
     return src(paths.styles.src)
     .pipe(plumber({errorHandler}))
     .pipe(gulpif(isProd, sourcemaps.init() ))
     .pipe(sassGlob())
     .pipe(sass({
     includePaths: [
      'node_modules'
     ],
     outputStyle: 'compressed'
     }))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulpif(isProd, sourcemaps.write('.') ))
    .pipe(dest(paths.styles.dest))
    .pipe(browserSync.stream())
   }

  export function stylelint() {
   return src(paths.styles.watch)
   .pipe(gulpStylelint({
   failAfterError: isProd,
   reporters: [{ formatter: 'string', console: true }],
   syntax: 'scss'
  }));
 }

 export const styles = series(stylelint, scss);

Config file:

    export const paths = {
      src: './src',
      dest: './dist',
      deploy: './dist/**/*',
     styles: {
      src: './src/styles/main.scss', //I've been tried without ./ - still doesn't work
      watch: 'src/styles/**/*.scss',
      modules: 'src/modules/**/*.scss',
      dest: 'dist/css',
      lint: 'src/styles/**/*.s+(a|c)ss'
     },
    scripts: {
     src: './src/scripts/app.js',
     watch: 'src/scripts/**/*.js',
     modules: 'src/modules/**/*.js',
     dest: 'dist/js',
   },
   templates: {
     src: 'src/templates/pages/*.{twig,html}',
     watch: 'src/templates/**/*.{twig,html}',
     modules: 'src/modules/**/*.{twig,html}',
     dest: 'dist/'
  },
  images: {
   src: 'src/assets/img/**/*',
   dest: 'dist/assets/img'
  },
  fonts: {
   src: 'src/assets/fonts/**/*',
   dest: 'dist/assets/fonts'
  },
  copy: {
   src: 'src/robots.txt',
   dest: 'dist/'
  },
  wp: {
   proxy: 'localhost/mysitefolder',
   src: '**/*.php',
 }
 };

 export const isProd = process.env.NODE_ENV === 'production';

I don't know what else you need (I'm newbie and this is my "learning" project), but all files are in GitHub repository, just let me know if I should paste something more.

I will be great full for any help or advice.

gulp Two task in one file js

I have two arrays and I want to merge them in one scripts.js

gulp.task('task1', function () {
    return gulp.src(libraries_scripts)
        .pipe(concat("scripts.js"))
        .pipe(uglify())
        .pipe(gulp.dest(prependBuildDirectory("scripts/mashups")));
});

gulp.task('task2', function () {
      return gulp.src(linted_scripts) 
          .pipe(babel({presets: ['@babel/preset-env'] }))
          .pipe(concat("scripts.js"))
          .pipe(uglify())
          .pipe(gulp.dest(prependBuildDirectory("scripts/mashups")));
  });

can you see something wrong this in my proyect is failing with errors of variables and stuff of javascript.

thanks a lot!

JavaScript Modules while using Babel

This a simple to-do list app. The real issue I am having is when I try to implement modules. When I separate my JavaScript in two different files I am getting the following error from the console:

I believe it has to do with my gulp configuration, specifically the concatenation, which I am getting done with Babel as you can see in my gulpfile.js. But to be honest I can't solve the problem. I can see the error coming from eslint from the file "/dist/js/all.js" but I don't know how to solve this issue. I would really appreciate your help.

I'll leave the link to my GitHub repository down below. There is two branches in the project, master, and modules. Master containing the files before attempting to implement modules, and the branch modules, contains the files after attempting to implement modules as you might have figured by now.

https://github.com/anthonyarguello96/planner-prototype

You can get the project running by cloning the repository, and going to the root directory by using the terminal and executing the line "gulp". You might need to install a couple of packages but then you'll be ready to go.

Thank you so much for your help!

Related questions

gulp concatenate multiple js files but dependency path cause error

See also questions close to this topic