Joyride or Intro.js with Webpack?

dpkonofa commented 6 years ago

I apologize in advance if this isn't the appropriate place for this but I've been using FoundationPress for a while and have never really had these issues. The updates that have been added in the latest versions of Foundation have messed with my workflow so I'm trying to figure out what's the best way to do this.

How can this bug be reproduced? For starters, I've tried two different tour libraries - Joyride (since it used to come with Foundation) and Intro.js since it's totally standalone. I've attempted to install both via NPM and then have tried adding them to the custom.js and app.js files and can't get them to work in any way. I'll break down what I've tried with both.

Intro.js

Install with npm install and saved into dependencies.
Add the line "import introJs from 'intro.js';" to my app.js file.
Add 'introJs().start();' to my custom.js file.

This leaves me with a console error of "Uncaught ReferenceError: introJs is not defined". My understanding, which may be wrong, was that the import line imports that node_module folder with the first part (after import) as the reference. So "import $ from 'jquery';" imports everything in the folder called "jquery" that's in "node_modules" and references it to $ so you can use it the way you normally use jQuery. No idea why the same wouldn't work for introJS.

Joyride Joyride is a little bit different because there's a version that depends on Foundation that I'm not sure works with Foundation 6 and a standalone one. I tried to get it running the same way as Intro.js and the Foundation version gives me this error:

Error in plugin 'webpack-stream'
Message:
    ./~/foundation-joyride/dist/foundation.joyride.js
Module not found: Error: Can't resolve 'foundation' in '/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/dist'
resolve 'foundation' in '/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/dist'

OS & version: macOS High Sierra
Node version (node -v) [Node v4+ is required] : 4.2.2
FoundationPress version (see line 3 in package.json): Latest
Foundation version (see dependencies in package.json) : 6.4.1

Again, I apologize if this is not the place but I'm not experience enough with Webpack to understand why there are entries in webpack.config.js and also in gulpfile.babel.js and whether I need to mess with those. In the past, I just needed to keep the files in a custom folder and they all got bundled in. I've looked through the other issues for Joyride and IntroJS but haven't found any help. Most of the responses seem to reference the old version of FoundationPress that I'm used to.

Any help would be appreciated.

colin-marshall commented 6 years ago

I think this SO question might help you out: https://stackoverflow.com/questions/45132662/adding-the-intro-js-library-to-a-vue-cli-webpack-project

Also, a relevant issue: https://github.com/usablica/intro.js/issues/695

I believe your understanding of the jQuery import is partly correct. It's not importing everything in the jquery folder though. Technically it's actually not bundling anything since jQuery is in the external section of the webpack options. jQuery is loaded by CDN so making it an external sort of "ignores" it during bundling. You'll want to read this: https://webpack.js.org/configuration/externals/#externals

As far as there being webpack options in webpack.config.js and gulpfile.babel.js, I would guess that the webpack.config.js file is not necessary because the webpackConfig variable passes the configuration. @olefredrik might have some insight here.

dpkonofa commented 6 years ago

Thanks for the response. I think I understand the issue with intro.js in this particular case but do you have any ideas on why Joyride wouldn't work? I've used Joyride in the past and all I'm doing is adding that single line to app.js. Why would that single line cause an error like that ("foundation is undefined")? I can comment out that line and all the foundation js runs fine. If I "import joyride from 'foundation-joyride'", though, I get the error that foundation is undefined. As far as I can tell, I don't even have the option to load the solo version of Joyride through npm, only the foundation version, so why wouldn't it work with FoundationPress?

colin-marshall commented 6 years ago

@dpkonofa can you please provide your app.js so I can see exactly how you are importing it? Thanks.

dpkonofa commented 6 years ago

Definitely!

import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

//import joyride from 'foundation-joyride';
//import introJs from 'intro.js';
import './lib/custom';

$(document).foundation();

Obviously, I'm uncommenting the joyride or introJS line when I'm trying to use them but neither works. I have not had both uncommented for obvious reasons.

Currently, my custom.js file is empty so I know there are no issues being caused there.

Thanks for the help! I really appreciate it. As a sidenote, I set up a brand new Foundation 6 install (not FoundationPress) to test and was able to get Joyride working on it with no issues at all. Not sure why I'm getting different results with this...

colin-marshall commented 6 years ago

@dpkonofa you could try bundling jQuery since that's the main and only difference I see between the two. In the gulpfile, change this:

let webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  },
  externals: {
    jquery: 'jQuery'
  }
}

To this:

let webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

You should probably delete the webpack.config.js file too just to be sure it's not loading the config from there.

colin-marshall commented 6 years ago

Also go into the node_modules/foundation-sites directory in both FoundationPress and Foundation and look in their package.json file and see if they are both using the same version of Foundation 6.

dpkonofa commented 6 years ago

First off, using your link to the SO question, I was able to get introJS working so, as of right now, I have what I need to complete this project. Thank you so much for that.

If you have the time, though, I'm still curious why this keeps failing when I try using Joyride since it should easily work. Zurb's Joyride page suggests that I just need to call the existing Foundation JS so that leads me to think the issue is in the way that the main foundation.js file is being compiled in FoundationPress.

Same version of Foundation for both but still the same error message:

Error in plugin 'webpack-stream'
Message:
    ./~/foundation-joyride/dist/foundation.joyride.js
Module not found: Error: Can't resolve 'foundation' in '/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/dist'
resolve 'foundation' in '/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/dist'
  Parsed request is a module
  using description file: /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/package.json (relative path: ./dist)
    resolve as module
      /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/dist/node_modules doesn't exist or is not a directory
      /Users/derekk/Sites/site.com/wp_theme_src/node_modules/node_modules doesn't exist or is not a directory
      /Users/derekk/Sites/site.com/node_modules doesn't exist or is not a directory
      /Users/derekk/Sites/node_modules doesn't exist or is not a directory
      /Users/derekk/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules
        using description file: /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/package.json (relative path: ./node_modules)
          using description file: /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/package.json (relative path: ./node_modules/foundation)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation.json doesn't exist
            as directory
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation doesn't exist
      looking for modules in /Users/derekk/Sites/site.com/wp_theme_src/node_modules
        using description file: /Users/derekk/Sites/site.com/wp_theme_src/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/derekk/Sites/site.com/wp_theme_src/package.json (relative path: ./node_modules)
          using description file: /Users/derekk/Sites/site.com/wp_theme_src/package.json (relative path: ./node_modules/foundation)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation.json doesn't exist
            as directory
              /Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation doesn't exist
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/dist/node_modules]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/node_modules]
[/Users/derekk/Sites/site.com/node_modules]
[/Users/derekk/Sites/node_modules]
[/Users/derekk/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation.js]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation.js]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation.json]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation.json]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation-joyride/node_modules/foundation]
[/Users/derekk/Sites/site.com/wp_theme_src/node_modules/foundation]
 @ ./~/foundation-joyride/dist/foundation.joyride.js 29:4-45
 @ ./src/assets/js/app.js
 @ multi ./src/assets/js/app.js
Details:
    domain: [object Object]
    domainThrown: true

dpkonofa commented 6 years ago

Btw, for the previous post, I'm using these: app.js

import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

import joyride from 'foundation-joyride';
import './lib/custom';

$(document).foundation();

The only difference between this and the stock app.js file is that one line for Joyride which is dependent on Foundation. I don't see why the foundation module doesn't exist or why it's even looking for it in the foundation-joyride folder instead of the foundation-sites folder.

colin-marshall commented 6 years ago

@dpkonofa did you use one of the Zurb Foundation templates when you got Joyride working? If so, which one? I just tried it with the foundation-zurb-template and am blocked by this error:

[17:10:44] Error in plugin 'webpack-stream'
Message:
    ./~/foundation-joyride/dist/foundation.joyride.js
Module build failed: ReferenceError: Unknown plugin "transform-es2015-arrow-functions" specified in "/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/foundation-joyride/.babelrc" at 0, attempted to resolve relative to "/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/foundation-joyride"
    at /Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (/Users/colinmarshall/Projects/Forks/foundation-zurb-template/node_modules/babel-loader/lib/index.js:163:20)
 @ ./src/assets/js/app.js 15:25-54
 @ multi ./src/assets/js/app.js
Details:
    domain: [object Object]
    domainThrown: true

This is happening because foundation-joyride is looking in its own node_modules directory for the babel presets when it should be looking in node_modules at the root of the template.

colin-marshall commented 6 years ago

Ok I was able to get around that in a "hackish" sort of way by entering the node_modules/foundation-joyride directory and running npm install babel-preset-es2015.

I now get the exact same Can't resolve 'foundation' error in the Foundation Zurb Template that you are getting in FoundationPress. Our build systems are basically mirrored so that seems normal to me that they would both give that error. Not that it helps you.

Now I just need to know how you setup your project when you had joyride working with just Foundation. Might help if you just shared the working repo with me so I can troubleshoot.

chasevorn commented 6 years ago

Same issue here. I'm trying to import an external js and I'm getting this

Any ideas? I feel like here is some lack of documentation for this part of foundationpress.

The thing is that the externals files are loading fine in dist/app.js but don't know why my twd.init(); is loaded at the beginning and the external files (anime.min + linemaker) are loaded at the end of app.js

@dpkonofa did you got this solved?

chasevorn commented 6 years ago

ok so this is how you load external js

and in my example LineMaker was throwing an error and the fix was: in linemaker.js added this at the end

export default LineMaker;

dpkonofa commented 6 years ago

I feel like I'm taking crazy pills. I keep having the same thing happening over and over every time I try to use a new node_module and it always errors out with a webpack error.

This time, I tried to install "Waypoints" via npm.

npm install --save waypoints

It installs waypoints without any error. I've also tried npm install --save-dev waypoints which also installs without error.

I add this line to my app.js file: import waypoints from 'waypoints';

And when I run npm start, I get the same error that I got with Joyride - the module can't be found. At this point, I have to think that I'm not processing something in my head correctly. This can't be an issue with every npm package and I can't imagine that Foundation or FoundationPress have these major bugs that don't allow use of npm modules without extensive editing.

Anyone have any thoughts on what I'm doing wrong here?

colin-marshall commented 6 years ago

@dpkonofa can you please refer back to my post @ https://github.com/olefredrik/FoundationPress/issues/1133#issuecomment-337409015 and let me know how you had Foundation and Joyride working together? Was it with one of the Foundation templates?

As far as waypoints goes, it looks like you just happened to pick a JS component that is outdated and doesn't support webpack yet:

Some major issues which have still not been picked up include ES6 support since you can't even properly import it at the moment which is a big no no.

Source: https://github.com/imakewebthings/waypoints/issues/562

This PR has been open for over a year that would fix it, but the waypoints owner is MIA: https://github.com/imakewebthings/waypoints/pull/533

It looks like you can install an ES6 compatible version of waypoints through jspm so you can import it. I've never used the jspm registry before though so I can't help you further and it's outside the scope of FoundationPress. https://github.com/jspm/registry/pull/1055

dpkonofa commented 6 years ago

@colin-marshall - Sorry I missed that comment. I was working on getting the intro.js stuff working. I didn't use one of the Foundation templates. I just cloned the repo and installed that way and set up a test page. Setting it up with a template breaks it so I think you're right that it's an issue with Foundation's templates and not with FoundationPress itself as you've confirmed that FP uses that template as its base. I can't share the repo now as our product hasn't launched yet, but I will share once it's live.

Out of curiousity, did you already know about Waypoints or did you search something specifically? I would love to stay out of your hair for stuff like this but, having never really used webpack, I don't even know what to search for most of the time.

Thanks again for the help. This is really above and beyond the call of duty, so I appreciate it tremendously.

colin-marshall commented 6 years ago

@dpkonofa thanks for following up on that question. So when you say you "cloned" the repo, the repo you are referring to is the regular foundation-sites repo?

I don't think it's an issue with the template itself, but something with webpack and the way the build system is setup. It could be that Joyride needs to be updated to work properly as a module with webpack, similar to how Waypoints needs an update.

As for how I figured that out that stuff about Waypoints, I just went to the Waypoints repo and searched for webpack in the issues and followed the trail. It's a shame it hasn't been updated in awhile, I've used Waypoints in other projects and it's really useful.

JPOak commented 6 years ago

Out of curiosity what do people feel would be the next easiest thing if for whatever reason you can't import a plugin the webpack way (mostly not defined errors)? I'm contemplating just enqueing them individually, which is sort of a shame. I must admit, I do miss just throwing all my JS in a folder and it compiling!

olefredrik / FoundationPress

Joyride or Intro.js with Webpack? #1133