undefined of node_modules/@material/textfield/index.js failed. rror: 'import' and 'export' may only appear at the top level (21:0)

[mickael-kerjean]

What MDC-Web Version are you using?

0.2.0

What browser(s) is this bug affecting?

not browser related as the issue arise at compile time

What OS are you using?

ubuntu 16.04

What are the steps to reproduce the bug?

I'm using the phoenix framework to create an application that ship by default with the Brunch build tool instead of webpack.

# install brunch 
npm install brunch
npm install @material/textfield

The content of the brunch-config.js file is the following (pretty much the default that comes with phoenix):

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },
  conventions: {
    assets: /^(web\/static\/assets)/
  },
  paths: {
    watched: [
      "web/static",
      "test/static"
    ],
    public: "priv/static"
  },
    plugins: {
        sass: {
            options: {
                includePaths: ['node_modules/']
            }
        },
        babel: {
            ignore: [/web\/static\/vendor/]
        }
    },
  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },
  npm: {
    enabled: true
  }
};

In my js file, as I'm using ES6, I'm simply following the readme from the textfield component:

import {MDCTextfield, MDCTextfieldFoundation} from "@material/textfield";

But it won't compile:

node node_modules/brunch/bin/brunch build

What is the expected behavior?

It should compile without error

What is the actual behavior?

26 Jan 07:41:09 - info: compiling
26 Jan 07:41:10 - error: undefined of node_modules/@material/textfield/index.js failed. rror: 'import' and 'export' may only appear at the top level (21:0)
26 Jan 07:41:10 - info: compiled 23 files into 2 files, copied 20 in 4.5 sec

Any other information you believe would be useful?

As seen here, It seems ES6 forbid the usage of import and export if they doesn't appear at the top level.
The content of node_modules/@material/textfield/index.js:

...
const {cssClasses} = MDCTextfieldFoundation;
export class MDCTextfield extends MDCComponent {

there is a export directive after the const which might trigger the issue

[traviskaufman]

I don't think that having an export directive after const is the issue; "top-level" means within the global scope of the program, e.g. not within a block or a lexical scope.

We've never used Phoenix or brunch before, but we will try and reproduce your issue. If you could link us to a gzip / plunker / etc which has all of the necessary files set up for a reproducible case, we could probably triage it a lot quicker.

[sgomes]

Will look into Phoenix / brunch when I have the time, but a prepackaged reproducible case like @traviskaufman mentioned would be very useful, @mickael-kerjean :)

At first glance, this is looking like an issue with the tools rather than our code, since the definition is at the top level.

[mickael-kerjean]

I just made a new project with the minimum dependencies to see the error:

git clone https://github.com/mickael-kerjean/material-components-web-issues-213
npm install
npm run build

• npm run build:

mickael@ubuntu:/var/www/html/test$ npm run build

> test@1.0.0 build /var/www/html/test
> brunch build

06:38:56 - error: Processing of node_modules/@material/textfield/index.js failed.
   'import' and 'export' may only appear at the top level (21:0)
Stack trace was suppressed. Run with `LOGGY_STACKS=true` to see the trace.

npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.2.6
npm ERR! npm  v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! test@1.0.0 build: `brunch build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@1.0.0 build script 'brunch build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     brunch build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/html/test/npm-debug.log

• full trace:

06:47:04 - error: Processing of node_modules/@material/textfield/index.js failed.
   'import' and 'export' may only appear at the top level (21:0)
   'import' and 'export' may only appear at the top level (21:0)
  at Parser.pp$4.raise (/var/www/html/test/node_modules/acorn/dist/acorn.js:2221:15)
  at Parser.pp$1.parseStatement (/var/www/html/test/node_modules/acorn/dist/acorn.js:715:16)
  at Parser.pp$1.parseBlock (/var/www/html/test/node_modules/acorn/dist/acorn.js:981:25)
  at Parser.pp$3.parseFunctionBody (/var/www/html/test/node_modules/acorn/dist/acorn.js:2105:24)
  at Parser.pp$1.parseFunction (/var/www/html/test/node_modules/acorn/dist/acorn.js:1065:10)
  at Parser.pp$3.parseExprAtom (/var/www/html/test/node_modules/acorn/dist/acorn.js:1810:19)
  at Parser.pp$3.parseExprSubscripts (/var/www/html/test/node_modules/acorn/dist/acorn.js:1715:21)
  at Parser.pp$3.parseMaybeUnary (/var/www/html/test/node_modules/acorn/dist/acorn.js:1692:19)
  at Parser.pp$3.parseExprOps (/var/www/html/test/node_modules/acorn/dist/acorn.js:1637:21)
  at Parser.pp$3.parseMaybeConditional (/var/www/html/test/node_modules/acorn/dist/acorn.js:1620:21)
  at Parser.pp$3.parseMaybeAssign (/var/www/html/test/node_modules/acorn/dist/acorn.js:1597:21)
  at Parser.pp$3.parseParenAndDistinguishExpression (/var/www/html/test/node_modules/acorn/dist/acorn.js:1861:32)
  at Parser.pp$3.parseExprAtom (/var/www/html/test/node_modules/acorn/dist/acorn.js:1796:19)
  at Parser.pp$3.parseExprSubscripts (/var/www/html/test/node_modules/acorn/dist/acorn.js:1715:21)
  at Parser.pp$3.parseMaybeUnary (/var/www/html/test/node_modules/acorn/dist/acorn.js:1692:19)
  at Parser.pp$3.parseExprOps (/var/www/html/test/node_modules/acorn/dist/acorn.js:1637:21)
  at Parser.pp$3.parseMaybeConditional (/var/www/html/test/node_modules/acorn/dist/acorn.js:1620:21)
  at Parser.pp$3.parseMaybeAssign (/var/www/html/test/node_modules/acorn/dist/acorn.js:1597:21)
  at Parser.pp$3.parseExpression (/var/www/html/test/node_modules/acorn/dist/acorn.js:1573:21)
  at Parser.pp$1.parseStatement (/var/www/html/test/node_modules/acorn/dist/acorn.js:727:47)
  at Parser.pp$1.parseBlock (/var/www/html/test/node_modules/acorn/dist/acorn.js:981:25)
  at Parser.pp$3.parseFunctionBody (/var/www/html/test/node_modules/acorn/dist/acorn.js:2105:24)
  at Parser.pp$1.parseFunction (/var/www/html/test/node_modules/acorn/dist/acorn.js:1065:10)
  at Parser.pp$3.parseExprAtom (/var/www/html/test/node_modules/acorn/dist/acorn.js:1810:19)
  at Parser.pp$3.parseExprSubscripts (/var/www/html/test/node_modules/acorn/dist/acorn.js:1715:21)
  at Parser.pp$3.parseMaybeUnary (/var/www/html/test/node_modules/acorn/dist/acorn.js:1692:19)
  at Parser.pp$3.parseExprOps (/var/www/html/test/node_modules/acorn/dist/acorn.js:1637:21)
  at Parser.pp$3.parseMaybeConditional (/var/www/html/test/node_modules/acorn/dist/acorn.js:1620:21)
  at Parser.pp$3.parseMaybeAssign (/var/www/html/test/node_modules/acorn/dist/acorn.js:1597:21)
  at Parser.pp$3.parseExprList (/var/www/html/test/node_modules/acorn/dist/acorn.js:2165:22)
  at Parser.pp$3.parseSubscripts (/var/www/html/test/node_modules/acorn/dist/acorn.js:1741:35)
  at Parser.pp$3.parseExprSubscripts (/var/www/html/test/node_modules/acorn/dist/acorn.js:1718:17)
  at Parser.pp$3.parseMaybeUnary (/var/www/html/test/node_modules/acorn/dist/acorn.js:1692:19)
  at Parser.pp$3.parseExprOps (/var/www/html/test/node_modules/acorn/dist/acorn.js:1637:21)
  at Parser.pp$3.parseMaybeConditional (/var/www/html/test/node_modules/acorn/dist/acorn.js:1620:21)
  at Parser.pp$3.parseMaybeAssign (/var/www/html/test/node_modules/acorn/dist/acorn.js:1597:21)
  at Parser.pp$3.parseExpression (/var/www/html/test/node_modules/acorn/dist/acorn.js:1573:21)
  at Parser.pp$1.parseStatement (/var/www/html/test/node_modules/acorn/dist/acorn.js:727:47)
  at Parser.pp$1.parseTopLevel (/var/www/html/test/node_modules/acorn/dist/acorn.js:638:25)
  at Parser.parse (/var/www/html/test/node_modules/acorn/dist/acorn.js:516:17)
  at Object.parse (/var/www/html/test/node_modules/acorn/dist/acorn.js:3098:39)
  at parse (/var/www/html/test/node_modules/detective/index.js:9:18)
  at Function.exports.find (/var/www/html/test/node_modules/detective/index.js:44:15)
  at module.exports (/var/www/html/test/node_modules/detective/index.js:23:20)
  at /var/www/html/test/node_modules/deppack/lib/explore.js:61:43
  at /var/www/html/test/node_modules/deppack/lib/explore.js:104:18

• Note that if you comment the import, then it compiles correctly:
  in /web/static/js/textfield.js:

//import {MDCTextfield} from '@material/textfield';
//const textfield = new MDCTextfield(document.querySelector('.mdc-textfield'));


document.addEventListener('DOMContentLoaded', function(){
     console.log(document.querySelector('.mdc-textfield'));
});

mickael@ubuntu:/var/www/html/test$ npm run build

> test@1.0.0 build /var/www/html/test
> brunch build

06:39:58 - info: compiled 4 files into 2 files in 1.7 sec

[traviskaufman]

This looks like it's more of an issue with how acorn (the parser that's being used to transpile our modules) is working more than anything else. We use babel to transpile our modules, and we've also tried testing against closure compiler and they both seem to work.

I would look into filing an issue with brunch / acorn regarding this. Furthermore, this stackoverflow post may give some insight into why this is happening. Finally, you could always try using our transpiled sources within dist instead!

import {MDCTextfield} from '@material/textfield/dist/mdc.textfield';

When I changed this import, the file compiled correctly.