Dynamic Imports

[mattcollier]

Evidently we're supposed to use a babel-parser plugin to allow import() until it becomes stage 4

https://github.com/eslint/eslint/issues/7764#issuecomment-266966062

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Specifications

This is currently producing errors in places where it is used.

[aljones15]

yeah the polyfill is definitely required. how is that related to this project? EDIT: oh... so that is kind of dumb. anyways babel-eslint uses the same rules it just runs on transpiled code I believe. not sure if this really matters that much actually. eslint will lint the code the import() provides if you are inside that module and from eslint's perspective's import() is just a function that produces an object and that object should be linted as usual. unless someone's ide is way more advanced than me all this really means is that eslint will might display a warning on the import()... or show a parser error... that is odd.

https://github.com/benmosher/eslint-plugin-import

someone has an eslint plugin for import. BTW do we have that eslint rule that checks that imports are valid?

looks like eslint-plugin-import does expand the parser so eslint will not fail on dynamic imports.

so let's test it out.

1. need a repo with a dynamic import
2. let's try this with out the plugin and with it.
3. turn on no-unresolved

ok looks like babel-eslint is still required, but it will use our existing rule set so should be ok.

[aljones15]

@mattcollier ok fixed this today:

https://github.com/digitalbazaar/bedrock-vue-wizard/commit/41276f2d444b63d14203291cf63d1309a928d161

basically

npm i -D babel-eslint

// add this to .eslintrc.js inside dir with dynamic imports

module.exports = {
  parser: 'babel-eslint',
... }

// create a valid babel.config.js file
module.exports = function(api) {
  return {
    plugins: ['babel-plugin-syntax-dynamic-import']
  }
}

close if you can do it. commit linked should help.

[mattcollier]

@aljones15 we need the import () syntax to work in basically all of our front end modules correct? Is there some way we can include this in our eslint-config-digitalbazaar module? We don't want devs to have to deal with this in all the places. Can this be part of the vue rules or something?

[aljones15]

@mattcollier really we only need it in the test projects I've found. we could add it parser: 'babel-eslint' to the vue template I suppose. not sure on adding it to the rules directly though. I think we need a boiler plate test for the various bedrock-vue projects with this setup by default.

[aljones15]

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module",
        "allowImportExportEverywhere": false
    }
}

via https://github.com/mysticatea/vue-eslint-parser