aitoroses / vulcanize-loader Goto Github PK

Can somebody help me understand what this error means? What could possibly "unknown" be? What kind of deoptimization is it talking about?

Hi,

When I run this in my main.js (set entry in webpack.config.js):

require("vulcanize?compress=true&base=/dist!./components/home/polymer-home.html");

I get:

{ [Error: Error parsing script in /home/vedtam/testing/polymer-apollo/polymer/components/home/polymer-home.html at 31:1
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
    at Parser.instance.raise.instance.raiseRecoverable (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/espree.js:408:19)
    at Parser.pp$1.parseStatement (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/node_modules/acorn/dist/acorn.js:752:16)
    at Parser.pp$1.parseTopLevel (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/node_modules/acorn/dist/acorn.js:658:25)
    at Parser.parseTopLevel (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/espree.js:270:34)
    at Parser.parse (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/node_modules/acorn/dist/acorn.js:528:17)
    at Object.parse (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/node_modules/acorn/dist/acorn.js:3309:39)
    at Object.parse (/home/vedtam/testing/polymer-apollo/polymer/node_modules/espree/espree.js:735:21)
    at Object.jsParse (/home/vedtam/testing/polymer-apollo/polymer/node_modules/hydrolysis/lib/ast-utils/js-parse.js:63:25)
    at Analyzer._processScript (/home/vedtam/testing/polymer-apollo/polymer/node_modules/hydrolysis/lib/analyzer.js:318:43)
    at /home/vedtam/testing/polymer-apollo/polymer/node_modules/hydrolysis/lib/analyzer.js:301:44]
  location: { line: 31, column: 1 },
  ownerDocument: '/home/vedtam/testing/polymer-apollo/polymer/components/home/polymer-home.html' }
[TypeError: Can't extract the value of a Nothing.]

At line 31 in my polymer-home.js I have:

import ApolloClient, { createNetworkInterface, addTypename } from 'apollo-client';
import { PolymerApollo } from 'polymer-apollo';
import gql from 'graphql-tag';

@knewter I pin this conversation here so others can access that topic easily:

dad4c80

The problem

When using this in the polymer branch's style, and dealing with styles, you have to refresh the entire webpack server in order to see any changes take place :(

Towards a solution?

I've forked the polymer example and made a slight modification to show what I'm trying to do:

https://github.com/knewter/elm-webpack-starter/tree/polymer_hot

If you run that, there's a theme file that makes the background red. For ideal style development, it would be nice if hot module replacement were supported (even for 'imported' files), so that when you changed the theme file the browser updated accordingly.

I made the loader sort of kind of try to work with hot module replacement. I have no idea what remains to be done or if this is stupid, and I did it against the transpiled code, but you can find it here: https://github.com/knewter/elm-webpack-starter/blob/polymer_hot/loader.js#L359-L381

I'm not sure what could be done to make this work but at present working on a project that uses this is pretty unfortunate when dealing with styling because the feedback loop requires me to restart the webpack server every single time to take the changes :( (though technically I can explicitly change the actual webpack required file and then refresh - still breaks HMR)

I was wondering if you wanted to pair to see what or if we could work through it. Otherwise, I'll look at it later I'm sure. Just wanted to write this up while it was fresh on my mind. Thanks for the software!

Hello,
Can you give an example of using this loader in a webpack configuration ?
In which file include the require ? How to import the html from a bower_components directory ?
Thanks in advance.
Regards

This library presently does not respect the webpack global output.publicPath configuration

This currently causes the vulcanized HTML import to always point to /imports.html, even if output.publicPath='/assets/', meaning the vulcanized HTML import should actually point to /assets/imports.html

It also causes issues if <base> is used, for example <base href="/assets/">. In this case, the publicPath should be output.publicPath='' and the link to the vulcanized HTML import should be imports.html. Presently it forces a leading slash by outputting /imports.html, breaking the assumptions of <base>

Please start tagging releases.

Hooking my RSS reader to https://github.com/aitoroses/vulcanize-loader/releases is how i track repo updates. Thanx!

..unless there's a better way?

I'm not getting hashes in the files emitted by the plugin:

I even wonder why am I getting web-components.js file emitted at all. It should be part of the app chunk. Right?

This is how my entry looks like:

entry: 
   { app: 
      [ 'blueimp-canvas-to-blob',
        './scripts/main.ts',
        './styles/main.scss',
        '../bower_components/webcomponentsjs/webcomponents-lite',
        '../web-components.html' ],
     somethingElse: [ './something-else/something-else.ts', './something-else/something-else.scss' ] },

The resulting HTML contains a lot of HTML comments as well as unminified CSS. I can't get it to run through the html-loader to fix it. Possibly the solution is to run the resulting HTML through https://github.com/PolymerLabs/polyclean as well as vulcanize. Another interesting solution would be use the new https://github.com/Polymer/polymer-build since it contains all the polymer build tools: vulcanize, crisper and polyclean.

A pure webpack solution using html-loader would also be an interesting idea.