Can't import ES6 modules


#1

Hi there,
I’m new on AdonisJS, I’m building a NuxtJS application so I decided to go with the Adonuxt template.
I want to group form validation rules for server (indicative) and client (vee-validate) into a single file, basically a JSON object :

// rules.js
const { rule } = require('indicative')

const userRules = {
  server: { // Indicative rules
    username: 'required',
    birthdate: [
      rule('date')
    ]
  },
  client: { // vee-validate rules
    username: 'required'
  }
}

export { userRules }

I thought this way I would just have to load rules.js whether in Validators or inside my VueJS component.
Example in StoreUser.js, generated with adonis make:validator StoreUser

// Validators/StoreUsers.js
import userRules from './../validators/rules.js'

class StoreUser {
  get rules () {
    return userRules.server
  }
}

module.exports = StoreUser

I’ve got this error message when making an API call and hitting the route validator :

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

This message seems to be related with Babel, but I don’t get it. What Babel has to do with Adonis on the backend side ?
I tried to load es2015 preset for Babel in the nuxt.js configuration file but it doesn’t help

Any tips ?
Thanks in advance


#2

Node.js doesn’t support ES6 modules as of today with .js files. Some versions have support but with only .mjs file.

So AdonisJs cannot do much about this error


#3

Ok I see :confused:

Then I’ll use require in Validators as well as VueJS components

const { userRules } = require('./../validators/rules')

It works :slight_smile:
Thanks for your help


#4

Actually there is a way to do it: https://github.com/standard-things/esm
It’s an es6 module loader you can use with node 6 and above.
Simply install it as npm dependency and change your start scripts to use it.
My setup is the following(package.json)

"dev": "cross-env NODE_ENV=testing nodemon --watch app --watch start --watch config --watch .env.testing -r esm server.js",
"start": "cross-env NODE_ENV=production node -r esm server.js",

#5

@jonasgrosch I finally opted for esm, as Nuxt had some problem to deal with require statements combined with export default {} of the vue file.
Thanks for your tip :slight_smile:


#6

there is a cheating way allow you to do that using Babel…but i really don’t recommend it to you… but maybe i just share it to you as a reference for your consideration :

  1. install these packages by doing this : npm install --save-dev babel-cli babel-core babel-loader babel-plugin-transform-async-to-generator babel-plugin-transform-decorators-legacy babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0

  2. create .babelrc file in the same folder where your index.js or server.js or whatever you named it ( the server file ), and type the following :

{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-runtime",
    "transform-async-to-generator"
  ]
}
  1. then run your index / server file with this command : node server.js --exec babel-node

but again… this is not a recommendation


#7

I resolved my issue by using transform-es2015-module-commonjs plugin in babbel rc :slight_smile: