Import error with babel and rollup

[Tal Atlas]

I get this error when trying to import:

[SyntaxError: 'import' and 'export' may only appear at the top level (4:0) in /Users/tal/Projects/dash/node_modules/javascript-time-ago/index.es6.js]
  pos: 85,
  loc: Position { line: 4, column: 0 },
  raisedAt: 91,
  code: 'PARSE_ERROR',
  file: '/Users/tal/Projects/dash/node_modules/javascript-time-ago/index.es6.js'

[Nikolay]

Is it webpack or is it node.js?
Post of piece of your code.

[Nikolay]

Try javascript-time-ago@0.2.11

[Tal Atlas]

Still causing the issue. I'm using rollup, not webpack

[Nikolay]

If you share the project on github I can fix the issue

[Nikolay]

rollup/rollup-plugin-commonjs#33

[Nikolay]

The problem is due to import clauses inserted in the same place of require() calls. All the import declarations should be moved to the top of the file to fix this.

A similar code that will probably break too:

var fs = require('fs');

function readFile(file) {
  // this will be turned into a import directive
  var path = require('path');

  var fullPath = path.join(__dirname, file);
  return fs.createReadStream(fullPath);
}

That's the reason.
Rollup replaces require()s with imports.
Either find a way to make it stop doing that or find some other way.

[Nikolay]

@tal Try adding 'rollup-plugin-node-resolve' plugin

https://gist.github.com/nolanlawson/f35f131bf4cf44d3701d

var rollup = require('rollup');
var resolve = require('rollup-plugin-node-resolve');
var cjs = require('rollup-plugin-commonjs');

rollup.rollup({
  entry: 'index.js',
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    ...
  ]
}).then(function (bundle) {
  bundle.write({
    format: 'cjs',
    dest: 'bundle.js'
  });
}).catch(console.log.bind(console));

[Nikolay]

From the docs:

https://github.com/rollup/rollup-plugin-node-resolve

      // some package.json files have a `browser` field which
      // specifies alternative files to load for people bundling
      // for the browser. If that's you, use this option, otherwise
      // pkg.browser will be ignored
      browser: true,  // Default: false

So, if you set browser to true then it shouldn't give you that error.

Because by default Rollup won't ignore that require()

// Add all locale data to `javascript-time-ago`.
// This module will be ignored when bundling 
// for the browser with Browserify/Webpack.
global.javascript_time_ago = javascript_time_ago
require('./locales')
delete global.javascript_time_ago

[Nikolay]

But, that won't solve the server-side.
So I guess I'm required to fix this.

[Nikolay]

@tal Try javascript-time-ago@0.2.12.
Now it doesn't preload locales and it shouldn't throw this error.

[Nikolay]

I've rewritten the library (the latest version) so that it itself shouldn't cause any errors when being imported.

But I won't say that for intl-messageformat.

Consider this part:

global.IntlMessageFormat = require('intl-messageformat')
require('intl-messageformat/dist/locale-data/en')
require('intl-messageformat/dist/locale-data/ru')

It still can fail with Rollup (if it will fail at all, I didn't try that).
If it didn't use the global variable inside those locale files then maybe it would be more correct.
https://npmcdn.com/intl-messageformat@1.3.0/dist/locale-data/en.js

The corresponding proposal in intl-messageformat repo:
formatjs/intl-messageformat#130

[Nikolay]

I've updated the package just in case, for intl-messageformat. The new syntax is:

require('javascript-time-ago/intl-messageformat-global')
require('intl-messageformat/dist/locale-data/en')
require('intl-messageformat/dist/locale-data/ru')

Maybe it will work better in Rollup related cases.

[Nikolay]

I guess this one is fixed