Dynamic Imports do not work with TypeScript

[benbayard]

Since we do not use babel w/ the happo-typescript-plugin the solution for #32 does not work. I still get this error:

This can be fixed in babel@7 with the typescript babel plugin. It might also be possible to use ts-loader to parse the module, then use babel to re-parse it.

Error: Could not load script: “http://localhost/92.happo-bundle-react-L1VzZXJzL2Jlbi9Qcm9qZWN0cy9naXRodWIuY29tL3BhdHJlb24vZGV2eC9zdHVkaW8=.js”
    at onErrorWrapped (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/browser/resources/per-document-resource-loader.js:39:19)
    at Object.check (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:58:23)
    at request.then.catch.err (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:104:14)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) { RequestError: Error: connect ECONNREFUSED 127.0.0.1:80
    at new RequestError (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/request-promise-core/lib/errors.js:14:15)
    at Request.plumbing.callback (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/request-promise-core/lib/plumbing.js:87:29)
    at Request.RP$callback [as _callback] (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/request-promise-core/lib/plumbing.js:46:31)
    at self.callback (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/request/request.js:185:22)
    at emitOne (events.js:116:13)
    at Request.emit (events.js:211:7)
    at Request.onRequestError (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/request/request.js:881:8)
    at emitOne (events.js:116:13)
    at ClientRequest.emit (events.js:211:7)
    at Socket.socketErrorListener (_http_client.js:387:9)
  name: ‘RequestError’,
  message: ‘Error: connect ECONNREFUSED 127.0.0.1:80’,
  cause:
   { Error: connect ECONNREFUSED 127.0.0.1:80
    at Object._errnoException (util.js:1022:11)
    at _exceptionWithHostPort (util.js:1044:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
     code: ‘ECONNREFUSED’,
     errno: ‘ECONNREFUSED’,
     syscall: ‘connect’,
     address: ‘127.0.0.1’,
     port: 80 },
  error:
   { Error: connect ECONNREFUSED 127.0.0.1:80
    at Object._errnoException (util.js:1022:11)
    at _exceptionWithHostPort (util.js:1044:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
     code: ‘ECONNREFUSED’,
     errno: ‘ECONNREFUSED’,
     syscall: ‘connect’,
     address: ‘127.0.0.1’,
     port: 80 },
  options:
   { encoding: null,
     gzip: true,
     jar: RequestJar { _jar: [Object] },
     strictSSL: true,
     forever: true,
     headers:
      { ‘User-Agent’: ‘Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/12.0.0’,
        ‘Accept-Language’: ‘en’,
        Accept: ‘*/*’,
        referer: ‘http://localhost/’ },
     uri: ‘http://localhost/92.happo-bundle-react-L1VzZXJzL2Jlbi9Qcm9qZWN0cy9naXRodWIuY29tL3BhdHJlb24vZGV2eC9zdHVkaW8=.js’,
     callback: [Function: RP$callback],
     transform: undefined,
     simple: true,
     resolveWithFullResponse: false,
     transform2xxOnly: false },
  response: undefined }
Error: Loading chunk 92 failed.
    at HTMLScriptElement.onScriptComplete (file:///var/folders/80/lps10hxx28sfr5dkxj7vtkgr0000gn/T/happo-bundle-react-L1VzZXJzL2Jlbi9Qcm9qZWN0cy9naXRodWIuY29tL3BhdHJlb24vZGV2eC9zdHVkaW8=.js:99:24)
    at HTMLScriptElement.el.addEventListener.event (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/living/helpers/create-event-accessor.js:33:32)
    at invokeEventListeners (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
    at HTMLScriptElementImpl._dispatch (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
    at HTMLScriptElementImpl.dispatchEvent (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
    at HTMLScriptElementImpl.dispatchEvent (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
    at onErrorWrapped (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/browser/resources/per-document-resource-loader.js:37:15)
    at Object.check (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:58:23)
    at request.then.catch.err (/Users/ben/Projects/github.com/patreon/devx/studio/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:104:14)
    at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @patreon/studio@2.0.0-0 happo: `happo "run"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @patreon/studio@2.0.0-0 happo script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2018-10-15T22_35_50_116Z-debug.log

[trotzig]

Thanks @benbayard!

This can be fixed in babel@7 with the typescript babel plugin.

I don't have much experience with typescript and its toolchain. Would your project build correctly with that setup? In that case I might change the happo typescript plugin so that it uses babel.

[benbayard]

It should work, but it's hard to test because it requires babel@7 and happo currently uses @6. I have high confidence however. And if it doesn't then something is wrong with our project that we should fix any way!

[trotzig]

Happo works with babel 7 as well, in fact it's what I use internally in other (private) happo repositories. For instance, here's one place where we try loading a new @babel package, and fall back in case it's not available. This isn't well documented however, sorry for that. I'm hoping to kill babel 6 support soon and at that time it should be more straightforward.

[trotzig]

Btw, do you currently have a workaround for the dynamic import issue? Are you disabling certain happo test files because of it? I'm asking to figure out if this is a blocker or not.

[benbayard]

We are wondering what we will do. Likely we will skip some happo tests.

[benbayard]

Update: We have to upgrade our main app to babel7 to support true dynamic imports. As a result we will probably tackle this in a few weeks. So there's plenty of time here!