ava: SyntaxError: Unexpected token export (import)

Description

Ava starts to give SyntaxError: Unexpected token export with babelrc es2015 set to “modules”: false. Does not happen if modules props is not set. AND Specifying custom config via ava/babel in package.json does not help.

Webpack uses same config. Babel compiles files successfully if executed manually as

babel ./src/app/actions/constants/shared.js --presets=node6

Error Message & Stack Trace

src/app/actions/constants/shared.js:1
(function (exports, require, module, __filename, __dirname) { export var NOT_STARTED = 'NOT STARTED';
                                                              ^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (/Users/dlebedynskyi/Documents/Code/code/node_modules/babel-register/lib/node.js:144:5)
at require.extensions.(anonymous function) (/Users/dlebedynskyi/Documents/Code/code/node_modules/babel-register/lib/node.js:154:7)
    at extensions.(anonymous function) (/Users/dlebedynskyi/Documents/Code/code/node_modules/require-precompiled/index.js:16:3)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dlebedynskyi/Documents/Code/code/node_modules/ava/lib/process-adapter.js:104:4)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Config

package.json:

{
    "ava": {
    "files": [
      "test/**/*.spec.js"
    ],
    "source": [
      "src/**/*.{js,jsx}"
    ],
    "concurrency": 5,
    "require": [
      "babel-register",
      "babel-polyfill",
      "ignore-styles",
      "./test/setup.js"
    ],
    "babel": "inherit"
  }
}

.babelrc

{
  "plugins": [
    "transform-export-extensions",
    "transform-class-properties",
    ["transform-builtin-extend", {
        "globals": ["Error"]
    }],
    ["transform-object-rest-spread", {
      "useBuiltIns": true
    }],
    ["transform-react-jsx", {
      "useBuiltIns": true
    }],
    ["transform-regenerator", {
      "async": false
    }],
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true
    }],
    "react-hot-loader/babel"
  ],
  "presets": [
    "react",
    ["latest", {
      "es2015" : {
        "modules": false,
        "loose": true
      }
    }]
  ]
}

Command-Line Arguments

npm run ava

What I had tried and it did not work

specify custom babel config in ava section

"ava": {
   ...
    "require": [
      "babel-register",
      "babel-polyfill",
      "ignore-styles",
      "./test/setup.js"
    ],
    "babel": {   "presets": [ "react",   "latest"] }
}

specify “node6”

"ava": {
    ...,
    "babel": {
      "babelrc": false,
      "presets": [ "node6" ]
    }
  },

Try use extend as https://github.com/avajs/ava/blob/master/docs/recipes/babelrc.md#extend-an-alternate-config-file - same result.

Environment

Node.js v6.9.1
darwin 16.1.0
ava 1.7.0

It looks like test files are being transpired correctly but for source files are ignored 😦. This happens only with modules:false. And this is being set so for tree shacking webpack2. To enable common js modules I’ve tried things above an it still looks like .babelrc is used without overrides.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 25 (4 by maintainers)

Most upvoted comments

Where do I set modules: false !?

+14

mandricore on Dec 4, 2016

modules: false disables transpiling the module syntax to Node.js’ module system. You’ll need to enable that for AVA to work.

+12

novemberborn on Dec 3, 2016

Yeah so this is working for me:

{
  "env": {
    "test": {
      "presets": ["es2015-node4"]
    }
  },
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["> 10%"]
        },
        "modules": false
      }
    ]
  ]
}

I then run my tests like this: BABEL_ENV=test gulp ava

It means I can keep module transpilation disabled for the rollup build and can transpile them when running ava

+10

ahumphreys87 on Jan 18, 2017

Ah! The issue is with babel-core/register using the .babelrc config, which isn’t set up to transform module syntax. Currently there’s nothing AVA can do about this.

That said, you could still simplify the ava.babel section to:

{
  "plugins": ["transform-es2015-modules-commonjs"]
}

And the test files themselves will run.

I’ve been thinking about how we could provide better support for Babel-based projects. I’ll keep your use case in mind, where you want AVA to transpile source files using a different config than used by your build step.

novemberborn on Dec 20, 2016

Same here. I have no .babelrc set up (don’t need to, I’m using webpack), and want to use ava with es6 modules. After trying all the above configuration setups, I still get the same error

Using a .babelrc, it works. I copied https://github.com/jamestalmage/__ava-0.8-with-babel-6

MartinMuzatko on Sep 20, 2017

I’ll leave a comment here since this is the latest issue on AVA.

I fixed the SyntaxError: Unexpected token import error in Node 12 with

  "ava": {
    "nodeArguments": [
      "--experimental-modules"
    ]
  }

No esm package or babel configuration was required to use import/export in local files, test files, and imported modules, as long as they also have type:module and main:index.js set.

https://github.com/fregante/webext-storage-cache/commit/47b0077fe94b4ee765582bb03276ccd3269dc3e9#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

I’m using the AVA 3.3.0

fregante on Feb 13, 2020

@stevenmathews we ended up still having client.babelrc and server.babelrc. Both are using babel-preset-env now. Server one is having test section for Ava like @ahumphreys87 suggested. We also saw problem with babel-register and “import” statements in node_modules - like lodash-es. Anyway thanks to @ahumphreys87 for idea of solution

dlebedynskyi on Jan 28, 2017

@dlebedynskyi that’s odd. Not sure how to help you further though. Any chance you could set up a GitHub repo with a reproduction?

novemberborn on Dec 6, 2016