CODEWITHSUNDEEP
javascriptnpmecmascript-6babeljsbrunch
Rodrigo Juliani
Rodrigo Juliani

Reputation: 31

Build npm dependency's sources with Brunch

I've been trying to build my web application with Brunch. It depends on a certain npm package (animated-vue), which only contains sources and has been programming using ES2016.

Every time I try to build my project, after adding said package as a dependency, I get the following error: 

Processing of node_modules/animated-vue/src/index.js failed. SyntaxError: 'import' and 'export' may only appear at the top level (5:4)

That usually means the module is not being transpiled by babel, which is one of my devDependencies too.

I wonder if someone could lend me a hand on how to fix this?

Here is my brunch-config.js file:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/, // Files that are not in `app` dir.
        'app.js': /^app/
      }
    },
    stylesheets: {
      joinTo: 'app.css'/*{
        'vendor.css': /^(?!app)/,
        'app.js': /^app/
      }*/
    },
    templates: {
      joinTo: 'app.js'
    }
  },
  plugins: {
    babel: {
      presets: ['latest', 'stage-3']
    },
    vue: {
      extractCSS: false
    },
    sass: {
      mode: "native",
      precision: 8,
      options: {
        includePaths: [
          'node_modules/bulma'
        ]
      }
    },
    copycat: {
      'fonts': ['node_modules/font-awesome/fonts']
    }
  },
  npm: {
    styles: {
      'izitoast': ['dist/css/iziToast.css'],
      'font-awesome': ['css/font-awesome.css'],
      'animate.css': ['animate.css']
    }
  }
}

And here my package.json file:

{
  "name": "wannaworkthere",
  "version": "1.0.1",
  "description": "UI for the wannaworkthere package",
  "main": "public/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "brunch w --server",
    "build:local": "brunch b",
    "build:production": "PRODUCTION=true brunch b --production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://gitlab.com/srodriki/wannaworkthere.git"
  },
  "keywords": [
    "vue",
    "brunch",
    "vuex",
    "vue-router"
  ],
  "author": "Rodrigo Juliani <[email protected]>",
  "license": "MIT",
  "bugs": {
    "url": "https://gitlab.com/srodriki/wannaworkthere/issues"
  },
  "homepage": "https://gitlab.com/srodriki/wannaworkthere#README",
  "devDependencies": {
    "babel-brunch": "^6.0.6",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "brunch": "^2.10.6",
    "copycat-brunch": "^1.1.0",
    "process-env-brunch": "^1.4.5",
    "sass-brunch": "^2.10.4",
    "vue-brunch": "^2.0.0"
  },
  "dependencies": {
    "animate.css": "^3.5.2",
    "animated-vue": "^0.1.5",
    "axios": "^0.15.3",
    "bulma": "^0.3.2",
    "font-awesome": "^4.7.0",
    "izitoast": "^1.1.1",
    "moment": "^2.17.1",
    "store": "^1.3.20",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.1.10",
    "vue-router": "^2.2.0",
    "vuex": "^2.1.2"
  }
}

Anyone able to help me sort this out?

Thanks!

Upvotes: 2

Views: 437

Answers (2)

Fox32
Fox32

Reputation: 13560

Looks like the key to this problem is setting npm.compilers to ['babel-brunch'] and taking care that the files aren't ignored by babel_brunch.

See this issue for a detailed discussion and this repository for a full working example.

Upvotes: 1

Johannes Filter
Johannes Filter

Reputation: 1933

This seems to be an issue with the order of the execution of the Brunch packages. Even though it's not good practice, can you try to put the babel plugins directly before your troubled plugin?

It’s worth noting that plugin order matters (as in, the order in which they’re listed in package.json)

As it is written in the Brunch guide. Also, take a look at this issue.

Upvotes: 0

Related Questions