Menu icon Foundation
Exports is not defined

Hi,

 

I just upgraded my ZURB starter project from 6.3 to 6.4. Almost everything is fine (I can run 'npm start' and build and watch changes), but when I open my application none of the JS is working and the console is logging the following error:

Uncaught ReferenceError: exports is not defined


In the migration notes I can't see anything that could have created this. Am I missing something?

foundation 6.4

Hi,

 

I just upgraded my ZURB starter project from 6.3 to 6.4. Almost everything is fine (I can run 'npm start' and build and watch changes), but when I open my application none of the JS is working and the console is logging the following error:

Uncaught ReferenceError: exports is not defined


In the migration notes I can't see anything that could have created this. Am I missing something?

This post has been closed. No new replies can be added.

Rafi Benkual 8 days ago

Are you loading any 3rd party plugins?

What errors are you seeing in the console?

Nick TC 8 days ago

Hi Rafi,

I didn't change anything, except that I upgraded my Foundation 6.3 to a 6.4.

 

It seems to go wrong here:

Object.defineProperty(exports, "__esModule", {

The full block of code is:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Foundation = undefined;

In the console I litterally get this:

Uncaught ReferenceError: exports is not defined

    at app.js:10187

 

 

Nick TC 7 days ago

Ok, I think I worked it out. I ones created my project using the ZURB template (https://github.com/zurb/foundation-zurb-template/). It appears that Bower is dropped, and not used anymore. I am wondering if there were every migration notes about this?

I now have it almost all working, except for the following. In my 'gulpfile.babel.js' i have the following:

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.entries)
    .pipe(named())
    .pipe($.sourcemaps.init())
    .pipe(webpackStream(webpackConfig, webpack2))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/js'));
}

And my PATHS.entries inside my config.yml is:

  # Paths to JavaScript entry points for webpack to bundle modules
  entries:
    - "node_modules/select2/dist/js/select2.min.js"
    - "src/assets/js/!(app).js"
    - "src/assets/js/app.js"

As you can see I am also including some other JS files that don't have the name app.js (!(app).js). Previously this worked fine, and all JS files were combined into 1 single app.js file. But since this webpack change, those files are copied over to the dist folder instead of merged into the app.js file. This is what I get when I run 'npm start'

[11:05:50] Starting 'javascript'...
[11:05:50] Starting 'images'...
[11:05:50] Starting 'copy'...
[11:05:51] Finished 'copy' after 374 ms
[11:05:54] Finished 'sass' after 3.44 s
[11:05:54] Finished 'images' after 3.52 s
[11:05:56] Version: webpack 2.7.0
           Asset     Size  Chunks                    Chunk Names
         grid.js  5.34 kB       6  [emitted]         grid
          app.js   678 kB       0  [emitted]  [big]  app
      select2.js  6.06 kB       2  [emitted]         select2
       search.js  2.97 kB       3  [emitted]         search
rememberstate.js  6.59 kB       4  [emitted]         rememberstate
   identifier.js  6.27 kB       5  [emitted]         identifier
  select2.min.js   362 kB       1  [emitted]  [big]  select2.min
       energy.js  5.87 kB       7  [emitted]         energy
  customfield.js  3.49 kB       8  [emitted]         customfield
     checkout.js   3.4 kB       9  [emitted]         checkout
       charts.js  7.44 kB      10  [emitted]         charts
      callout.js  3.17 kB      11  [emitted]         callout
[11:05:56] Finished 'javascript' after 5.84 s

All these files that I created myself (customfield.js, callout.js, etc) are simple regular JS stuff. No fancy ES-stuff :-).

Can someone explain why it's not combining all files into 1 single app.js file?

 

Nick TC 7 days ago

Fixed that as well. Had to add

.pipe($.concat('app.js'))

After '.pipe(webpackStream(webpackConfig, webpack2))'

Topic closed.