Cannot load Talk 11.x with IE 11

[PVince81]

Steps to reproduce

1. git checkout v11.0.0-alpha.2
2. make clean && make dev-setup && make build-js
3. Open "Talk" in IE 11 Win8.1 (VM from modern.ie)

You might need to change the URL manually because for me the dashboard app also did not load with IE 11

Expected behaviour

Talk app can be opened

Actual behaviour

Talk app does not open, only the top bar is there.
Errors in log.

Screenshots

It seems something in nextcloud-vue is breaking with IE 11.

I tested with the files app which has a less recent version of nextcloud-vue and it seems to load there.
Needs further research.

[PVince81]

server has nextcloud-vue 3.2.0
talk has nextcloud-vue 3.3.2

[PVince81]

a downgrade to nextcloud-vue 3.2.0 didn't help

so probably talk is importing a component that needs ansi-regex where server/files doesn't

[PVince81]

deps for ansi-regex on nextcloud-vue 3.2.0:

@nextcloud/vue@3.3.2 /home/vincent/Private/Work/workspace/nextcloud-vue
├─┬ cypress@5.6.0
│ ├─┬ @cypress/listr-verbose-renderer@0.4.1
│ │ └─┬ chalk@1.1.3
│ │   └─┬ strip-ansi@3.0.1
│ │     └── ansi-regex@2.1.1 
│ ├─┬ cli-table3@0.6.0
│ │ └─┬ string-width@4.2.0
│ │   └─┬ strip-ansi@6.0.0
│ │     └── ansi-regex@5.0.0 
│ └─┬ listr@0.14.3
│   └─┬ listr-update-renderer@0.5.0
│     ├─┬ cli-truncate@0.2.1
│     │ └─┬ string-width@1.0.2
│     │   └─┬ strip-ansi@3.0.1
│     │     └── ansi-regex@2.1.1 
│     └─┬ strip-ansi@3.0.1
│       └── ansi-regex@2.1.1 
├─┬ cypress-vue-unit-test@3.5.1
│ └─┬ @cypress/code-coverage@3.8.1
│   └─┬ nyc@15.1.0
│     └─┬ yargs@15.4.1
│       └─┬ cliui@6.0.0
│         └─┬ strip-ansi@6.0.0
│           └── ansi-regex@5.0.0 
├─┬ eslint@6.8.0
│ ├─┬ inquirer@7.1.0
│ │ └─┬ strip-ansi@6.0.0
│ │   └── ansi-regex@5.0.0 
│ ├─┬ strip-ansi@5.2.0
│ │ └── ansi-regex@4.1.0 
│ └─┬ table@5.4.6
│   └─┬ string-width@3.1.0
│     └─┬ strip-ansi@5.2.0
│       └── ansi-regex@4.1.0 
├─┬ jest@26.6.3
│ ├─┬ @jest/core@26.6.3
│ │ ├─┬ jest-message-util@26.6.2
│ │ │ └─┬ pretty-format@26.6.2
│ │ │   └── ansi-regex@5.0.0 
│ │ ├─┬ jest-runtime@26.6.3
│ │ │ └─┬ yargs@15.4.1
│ │ │   └─┬ cliui@6.0.0
│ │ │     └─┬ strip-ansi@6.0.0
│ │ │       └── ansi-regex@5.0.0 
│ │ └─┬ strip-ansi@6.0.0
│ │   └── ansi-regex@5.0.0 
│ └─┬ jest-cli@26.6.3
│   └─┬ yargs@15.4.1
│     └─┬ cliui@6.0.0
│       ├─┬ strip-ansi@6.0.0
│       │ └── ansi-regex@5.0.0 
│       └─┬ wrap-ansi@6.2.0
│         └─┬ strip-ansi@6.0.0
│           └── ansi-regex@5.0.0 
├─┬ node-sass@5.0.0
│ ├─┬ chalk@1.1.3
│ │ ├─┬ has-ansi@2.0.0
│ │ │ └── ansi-regex@2.1.1 
│ │ └─┬ strip-ansi@3.0.1
│ │   └── ansi-regex@2.1.1 
│ ├─┬ npmlog@4.1.2
│ │ └─┬ gauge@2.7.4
│ │   └─┬ strip-ansi@3.0.1
│ │     └── ansi-regex@2.1.1 
│ └─┬ sass-graph@2.2.5
│   └─┬ yargs@13.3.2
│     ├─┬ cliui@5.0.0
│     │ └─┬ strip-ansi@5.2.0
│     │   └── ansi-regex@4.1.0 
│     └─┬ string-width@3.1.0
│       └─┬ strip-ansi@5.2.0
│         └── ansi-regex@4.1.0 
├─┬ string-length@4.0.1
│ └─┬ strip-ansi@6.0.0
│   └── ansi-regex@5.0.0 
├─┬ stylelint@13.8.0
│ └─┬ strip-ansi@6.0.0
│   └── ansi-regex@5.0.0 
├─┬ vue-jest@3.0.7
│ └─┬ babel-plugin-transform-es2015-modules-commonjs@6.26.2
│   └─┬ babel-template@6.26.0
│     └─┬ babel-traverse@6.26.0
│       └─┬ babel-code-frame@6.26.0
│         └─┬ chalk@1.1.3
│           └─┬ strip-ansi@3.0.1
│             └── ansi-regex@2.1.1 
└─┬ vue-styleguidist@4.34.2
  ├─┬ cli-progress@3.8.2
  │ └─┬ string-width@4.2.0
  │   └─┬ strip-ansi@6.0.0
  │     └── ansi-regex@5.0.0 
  ├─┬ react-dev-utils@7.0.5
  │ ├─┬ inquirer@6.2.1
  │ │ └─┬ string-width@2.1.1
  │ │   └─┬ strip-ansi@4.0.0
  │ │     └── ansi-regex@3.0.0 
  │ └─┬ strip-ansi@5.0.0
  │   └── ansi-regex@4.1.0 
  ├─┬ react-styleguidist@11.1.5
  │ ├─┬ ora@4.1.1
  │ │ └─┬ strip-ansi@6.0.0
  │ │   └── ansi-regex@5.0.0 
  │ └─┬ react-dev-utils@11.0.1
  │   └─┬ strip-ansi@6.0.0
  │     └── ansi-regex@5.0.0 
  └─┬ webpack-dev-server@3.11.0
    └─┬ strip-ansi@3.0.1
      └── ansi-regex@2.1.1

and with stable20's version:

@nextcloud/vue@2.9.0 /home/vincent/Private/Work/workspace/nextcloud-vue
├─┬ cypress@5.4.0
│ ├─┬ @cypress/listr-verbose-renderer@0.4.1
│ │ └─┬ chalk@1.1.3
│ │   └─┬ strip-ansi@3.0.1
│ │     └── ansi-regex@2.1.1 
│ ├─┬ cli-table3@0.6.0
│ │ └─┬ string-width@4.2.0
│ │   └─┬ strip-ansi@6.0.0
│ │     └── ansi-regex@5.0.0 
│ └─┬ listr@0.14.3
│   └─┬ listr-update-renderer@0.5.0
│     ├─┬ cli-truncate@0.2.1
│     │ └─┬ string-width@1.0.2
│     │   └─┬ strip-ansi@3.0.1
│     │     └── ansi-regex@2.1.1 
│     └─┬ strip-ansi@3.0.1
│       └── ansi-regex@2.1.1 
├─┬ cypress-vue-unit-test@3.5.1
│ └─┬ @cypress/code-coverage@3.8.1
│   └─┬ nyc@15.1.0
│     └─┬ yargs@15.4.1
│       └─┬ cliui@6.0.0
│         └─┬ strip-ansi@6.0.0
│           └── ansi-regex@5.0.0 
├─┬ eslint@6.8.0
│ ├─┬ inquirer@7.1.0
│ │ └─┬ strip-ansi@6.0.0
│ │   └── ansi-regex@5.0.0 
│ ├─┬ strip-ansi@5.2.0
│ │ └── ansi-regex@4.1.0 
│ └─┬ table@5.4.6
│   └─┬ string-width@3.1.0
│     └─┬ strip-ansi@5.2.0
│       └── ansi-regex@4.1.0 
├─┬ jest@26.5.3
│ ├─┬ @jest/core@26.5.3
│ │ ├─┬ jest-config@26.5.3
│ │ │ └─┬ pretty-format@26.5.2
│ │ │   └── ansi-regex@5.0.0 
│ │ ├─┬ jest-runtime@26.5.3
│ │ │ └─┬ yargs@15.4.1
│ │ │   └─┬ cliui@6.0.0
│ │ │     └─┬ strip-ansi@6.0.0
│ │ │       └── ansi-regex@5.0.0 
│ │ └─┬ strip-ansi@6.0.0
│ │   └── ansi-regex@5.0.0 
│ └─┬ jest-cli@26.5.3
│   └─┬ yargs@15.4.1
│     └─┬ cliui@6.0.0
│       ├─┬ strip-ansi@6.0.0
│       │ └── ansi-regex@5.0.0 
│       └─┬ wrap-ansi@6.2.0
│         └─┬ strip-ansi@6.0.0
│           └── ansi-regex@5.0.0 
├─┬ node-sass@4.14.1
│ ├─┬ chalk@1.1.3
│ │ ├─┬ has-ansi@2.0.0
│ │ │ └── ansi-regex@2.1.1 
│ │ └─┬ strip-ansi@3.0.1
│ │   └── ansi-regex@2.1.1 
│ ├─┬ npmlog@4.1.2
│ │ └─┬ gauge@2.7.4
│ │   └─┬ strip-ansi@3.0.1
│ │     └── ansi-regex@2.1.1 
│ └─┬ sass-graph@2.2.5
│   └─┬ yargs@13.3.2
│     ├─┬ cliui@5.0.0
│     │ └─┬ strip-ansi@5.2.0
│     │   └── ansi-regex@4.1.0 
│     └─┬ string-width@3.1.0
│       └─┬ strip-ansi@5.2.0
│         └── ansi-regex@4.1.0 
├─┬ string-length@4.0.1
│ └─┬ strip-ansi@6.0.0
│   └── ansi-regex@5.0.0 
├─┬ stylelint@13.7.2
│ └─┬ strip-ansi@6.0.0
│   └── ansi-regex@5.0.0 
├─┬ vue-jest@3.0.7
│ └─┬ babel-plugin-transform-es2015-modules-commonjs@6.26.2
│   └─┬ babel-template@6.26.0
│     └─┬ babel-traverse@6.26.0
│       └─┬ babel-code-frame@6.26.0
│         └─┬ chalk@1.1.3
│           └─┬ strip-ansi@3.0.1
│             └── ansi-regex@2.1.1 
└─┬ vue-styleguidist@4.33.1
  ├─┬ cli-progress@3.8.2
  │ └─┬ string-width@4.2.0
  │   └─┬ strip-ansi@6.0.0
  │     └── ansi-regex@5.0.0 
  ├─┬ react-dev-utils@7.0.5
  │ ├─┬ inquirer@6.2.1
  │ │ └─┬ string-width@2.1.1
  │ │   └─┬ strip-ansi@4.0.0
  │ │     └── ansi-regex@3.0.0 
  │ └─┬ strip-ansi@5.0.0
  │   └── ansi-regex@4.1.0 
  ├─┬ react-styleguidist@11.1.0
  │ ├─┬ ora@4.1.1
  │ │ └─┬ strip-ansi@6.0.0
  │ │   └── ansi-regex@5.0.0 
  │ └─┬ react-dev-utils@9.1.0
  │   └─┬ strip-ansi@5.2.0
  │     └── ansi-regex@4.1.0 
  └─┬ webpack-dev-server@3.11.0
    └─┬ strip-ansi@3.0.1
      └── ansi-regex@2.1.1

Talk works fine on stable20 with IE 11

so not sure why ansi-regex would suddenly not be working any more, I'll try and find out between 2.9.0 and 3.2.0

[PVince81]

I did several tests and what I observed doesn't make sense:

Spreed master

On spreed master with nextcloud-vue 3.3.2, the one in package-lock, I see the ansi-regex error already posted above.

Spreed master + npm linked nextcloud-vue 3.3.2

I checked out nextcloud-vue v3.3.2, ran npm ci and make build-js.
Then in spreed repo: make dev-setup
Then npm link @nextcloud/vue (with the link already prepared before).
Then make build-js.

And here instead of ansi-regex I get the formerly known error about semver in event-bus:

Why would npm link produce different results ?!

I tried downgrading @babel/preset-env to 7.12.10 in nextcloud-vue repo (like #4821 (review)) but the errors stays the same.

[PVince81]

I justed tried running npm run build in nextcloud-vue to make sure it uses the production build to be closer to the released lib, but the result is the same: event-bus / semver issue instead of ansi-regex

[PVince81]

Some progress here: #4829

By adding @nextcloud/vue and a few sub-deps to the exclusion (the list that needs extra transpiling for IE 11), I managed to make the page load. Now instead of syntax errors there are JS errors happening in nextcloud-vue components.

This feels wrong. I think the transpiling should be one on nextcloud-vue side as we can't expect many consumers of the library to add that long list of exclusions. I still wonder how this could work with nextcloud-vue 2.9.0 in Talk 10 and why it stopped working with nextcloud-vue 3.2.0.

Diffing the two didn't reveal any significant changes apart from library updates.

[PVince81]

I've tried adding the excludes directly into nextcloud-vue, like semver and event bus but with npm link whatever I put there it still has a syntax error on semver/nextcloud-event-bus. So we probably can't precompile/pre-transpile...

[PVince81]

I'm out of ideas and it feels like this is going to be much more work.

Maybe we can continue with #4829 and see why Vue JS is not working correctly.

[juliusknorr]

I had a quick look into this and to me it seems that preset-env is not properly loading the plugins to transpile parameters and variable destructing to es5. Might be worth to check if manually adding those solves it:

https://babeljs.io/docs/en/babel-plugin-transform-parameters
https://babeljs.io/docs/en/babel-plugin-transform-destructuring

Edit: If i understood the preset-env structure properly it seems that ie is missing here: https://github.com/babel/babel/blob/master/packages/babel-compat-data/data/plugins.json#L64-L74

[PVince81]

I've discovered that there's potentially another issue with the way we load/transpile event-bus: #4818
That issue uncovers itself after updating @babel/present-env.

[PVince81]

I had a quick look into this and to me it seems that preset-env is not properly loading the plugins to transpile parameters and variable destructing to es5. Might be worth to check if manually adding those solves it:

https://babeljs.io/docs/en/babel-plugin-transform-parameters
https://babeljs.io/docs/en/babel-plugin-transform-destructuring

Edit: If i understood the preset-env structure properly it seems that ie is missing here: https://github.com/babel/babel/blob/master/packages/babel-compat-data/data/plugins.json#L64-L74

I tried your proposal and even adjusted plugins.json, but made no difference for IE 11:

I also have #4818 (comment) applied to avoid the event-bus issue, so now it's only about ansi-regexp.

My impression is that the transpiling is not happening at all, because that dependency is deep inside of "@nextcloud/vue".

What I don't understand is why it seems to not fail in the "server" repo as the files app loads properly.
I tried copying over the babel.config settings, combined with the above, but still getting the same error.

[PVince81]

fixed in #4829