Issue with Vulcanize and web-animations.js

86 views
Skip to first unread message

Chris Root

unread,
Mar 7, 2016, 1:51:50 AM3/7/16
to Polymer
I am trying to use paper-dropdown-menu in a project which uses React and browserfy. This project has the typical structure with an "src" directory which holds the development files and a dist directory where gulp deposits browserfied and concatenated code. 

The directory structure is below

├── bower_components (contents not shown)
├── bower.json
├── dist (gulp puts build in here)
│   ├── css
│   │   └── bundle.css
│   ├── index.html
│   ├── scripts
│   │   ├── bundle.js (bundled React components)
│   └── web_components.html (Vulcanized file)
├── gulpfile.babel.js
├── index.js
├── node_modules [contents not shown]
├── package.json
├── README.md
└── src
    ├── components (React components in here]
    ├── index.html (main html file)
    ├── main.js
    ├── routes.js
    └── wc
        └── web_components.html (web component imports)



Inside the src directory I have a components.html file which imports paper-dropdown-menu from the bower_componets directory in the project root. In my index.html (in src) I then import components.html. I have added Vulcanize to the build system with gulp-vulcanize and it works the way it should except for one thing.  

When I run the project in the browser console I get the following error.

http://localhost:9005/bower_components/web-animations-js/web-animations-next-lite.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

If I look inside the file Vulcanize put in the dist directory, the error is coming from here

<script src="../../bower_components/web-animations-js/web-animations-next-lite.min.js"></script>


As you can see, instead of loading this javascript file and including it in the build, Vlucanize created a path for it that is outside of the dist directory. 

All other dependencies have been correctly bundled into the output file but Vulcanize will not pick up this file. My gulp-vulcanize task looks like this.

gulp.task('web_components', () =>
  gulp.src(config.paths.webComponentIndex)
      .pipe(vulcanize({
        abspath: config.paths.dist,
        excludes: [],
        inlineScripts: true,
        stripExcludes: false
      }))
      .pipe(gulp.dest(config.paths.dist))
);

Any help would be greatly appreciated. This project is for work and this issue needs to get resolved as soon as possible.


Reply all
Reply to author
Forward
0 new messages