SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

[vedtam]

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';

[aitoroses]

Hi @vedtam, it looks that it's an issue with vulcanize itself and how webcomponents are meant to work.

Apparently the parser doesn't allow to use import/export statements in code. And that makes sense since it's meant to be used with html-imports.

Even if you put a require statement, it wont be bundled by vulcanize.

You should use <script src="node_modules/apollo-client/....."></script> instead of requiring things like you'd do with webpack.

You could also use require.js or system.js or something like that too.

[vedtam]

Thanks @aitoroses for the clarification! I wasn't aware about this limitation.