Support for dynamic import()

[mikeal]

In the new IPLD stack we’re using the import function to dynamically load codecs in the browser w/ automatic code splitting from webpack.

I’m trying to move the tests and linting in the project to aegir and it’s breaking on import().

/src/get-codec/index-browser.js
  17:20  error  Parsing error: Unexpected token import

This can only be resolved by either:

• Moving aegir to babel-eslint which is a sizable change and is slower than the current configuration.
• Enable some sort of configuration in package.json to ignore the file. The regular eslint configuration stuff is all overwritten by aegir so we’d need to expose this ourselves.

Unfortunately, I can’t disable eslint in the file because it breaks on tokenizing the file which is a step before any disable comments are parsed.

UPDATE: Read below for another import() related issue. Title has been updated to account for both.

[mikeal]

Updating this issue to capture all the import() related issues.

Browser tests in Karma are also breaking on import()

ERROR in ./src/get-codec/index-browser.js 
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /root/ipld-stack/src/get-codec/index-browser.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (17:20):                                                                                                                                               15 |   }                                                                                                                                                       
  16 |   if (codec === 'dag-cbor') {                                                                                                                             
> 17 |     cache[codec] = import('../dag-cbor').then(resolve)                                                                                                    
     |                    ^                                                                                                                                      
  18 |   }                                                                                                                                                       
  19 |   if (codec === 'dag-json') {                                                                                                                             
  20 |     cache[codec] = import('../dag-json').then(resolve)                                                                                                    

Add@babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.    

You can reproduce both of these issues by pulling down https://github.com/ipld/js-ipld-stack and running aegir.

[vmx]

Running which command with aegir?

[mikeal]

aegir lint will show the first error, aegir test will show the second ;)

[vmx]

My output from aegir lint on js-ipld-stack master:

$ npx aegir lint
/home/vmx/src/pl/js-ipld-stack/src/path-level-zero.js
  11:7  warning  Unexpected 'todo' comment  no-warning-comments
  33:7  warning  Unexpected 'todo' comment  no-warning-comments
  54:7  warning  Unexpected 'todo' comment  no-warning-comments

/home/vmx/src/pl/js-ipld-stack/src/get-codec/index-browser.js
  17:20  error  Parsing error: Unexpected token import

/home/vmx/src/pl/js-ipld-stack/src/get-codec/index-nodejs.js
  4:3  error  Unnecessarily quoted property 'raw' found  quote-props

✖ 5 problems (2 errors, 3 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Lint errors
Error: Lint errors
    at Promise (/home/vmx/src/pl/js-ipld-stack/node_modules/aegir/src/lint.js:88:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

An my out put from aegir test:

…
Test Browser


ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
✖ ｢wdm｣: 
ERROR in ./src/get-codec/index-browser.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/vmx/src/pl/js-ipld-stack/src/get-codec/index-browser.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (17:20):

  15 |   }
  16 |   if (codec === 'dag-cbor') {
> 17 |     cache[codec] = import('../dag-cbor').then(resolve)
     |                    ^
  18 |   }
  19 |   if (codec === 'dag-json') {
  20 |     cache[codec] = import('../dag-json').then(resolve)

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
    at Object.raise (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:3851:17)
    at Object.expectPlugin (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5172:18)
    at Object.parseExprAtom (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:6180:14)
    at Object.parseExprSubscripts (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5914:23)
    at Object.parseMaybeUnary (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5894:21)
    at Object.parseExprOps (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5781:23)
    at Object.parseMaybeConditional (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5754:23)
    at Object.parseMaybeAssign (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5701:21)
    at Object.parseMaybeAssign (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:2639:18)
    at Object.parseMaybeAssign (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5740:25)
    at Object.parseMaybeAssign (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:2639:18)
    at Object.parseExpression (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:5649:23)
    at Object.parseStatementContent (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:7420:23)
    at Object.parseStatement (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:7291:17)
    at Object.parseStatement (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:1993:26)
    at Object.parseBlockOrModuleBlockBody (/home/vmx/src/pl/js-ipld-stack/node_modules/@babel/parser/lib/index.js:7868:25)
 @ ./src/block.js 7:17-39
 @ ./test/block.spec.js
 @ ./test sync \.spec\.js$
 @ ./node_modules/aegir/src/config/karma-entry.js
ℹ ｢wdm｣: Failed to compile.
…

Are you running an old version? I run 18.2.2.

[mikeal]

I edited the output to only show the relevant parts, if you look at your output you’ll see the output I noted in both of them :)

[vmx]

@mikeal You're absolutely right. It's late here…

[mikeal]

This is going to end up being a blocker for js-ipfs adopting unixfsv2 since it uses the new Block interface which requires this.