Marked dropped IE11 Support

[wmarques]

Marked seems to have dropped IE11 support recently, see markedjs/marked#1585

There are 2 workarounds:

• Change the way we import marked (from import to require)
• Tell users to use babel to transpile marked when using ngx-markdown

I can help on this if needed :)

Thanks !

[jfcere]

Thanks for bringing that up,

I didn't notice since the demo is working fine in IE11: https://jfcere.github.io/ngx-markdown/
I definitely wouldn't want to tell users to use babel to transpile marked when using ngx-markdown...

[wmarques]

@jfcere Thanks for your response.

Indeed the website works so that's probably coming from our configuration as we don't use the Angular CLI. Maybe the CLI does some magic to transpile to ES5 even when libs are in ES6 code.

On my app, I was seeing the exact same issue as described there: markedjs/marked#1585 (comment)

Now that I'm transpiling marked through babel it works again...
I think we can close this as the website is working.

[jfcere]

I'll keep the issue open, I'm just curious about this whole thing!
I am at work now, cannot really investigate further without going over my moral principles 😄

[wmarques]

No worries, let me know if I can help in some ways. I can provide our webpack config if you want to check.
Also, we are currently migrating from AngularJS to Angular 9 so our setup is quite specific :)

Thanks alot !

[jfcere]

It might have to do with this markedjs/marked#1585 (comment) ...

When using @angular/cli and adding marked/lib/marked.js to the script section of angular.json it uses the UMD version (if I'm right) which is compatible with IE11.

[wmarques]

I think it's more about the way you import the lib in the code, instead of pointing to marked we should point to marked/lib/marked

The joy of open source 😄 Thanks alot for your time btw :)

[jfcere]

Yeah pointing to marked/lib/marked would probably solve it, I was trying to get my head around the "why" it works in the demo for IE11 and not in your Webpack setup.

[wmarques]

@jfcere Do you want me to provide our conf ? It's not really complicated. For TS files we use @ngtools/webpack to compile with Ivy, then we use the babel-loader to transpile to es5 and add some polyfills using @babel/preset-env.

{
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        use: ['babel-loader', '@ngtools/webpack'],
        exclude: /node_modules/
},

[jfcere]

Importing from marked/lib/marked breaks @types/marked typings which is essential for the exposed renderer.

I'll have to see if I copy the typings or (since it seems to work with @angular/cli) if I just add a note about Webpack configuration that needs to transpile marked library... which I would really like to avoid.

What a disappointing change from their part! Seems there have been a few interesting proposals to fix the issue but they just don't give up!

[jfcere]

@wmarques Would you be able to provide a dummy repository with your Webpack configuration that includes ngx-markdown? That would be greatly helpful and appreciated!

I might have found something but I'd like to test it and avoid back and forth to experiment.

[wmarques]

@jfcere I might have some time in 2 weeks to provide you a sample repo :)

[jfcere]

You're a busy man! 😛

[wmarques]

I can copy paste my webpack conf here if you want a starting point :)

[jfcere]

Sure, its a start 😄

[wmarques]

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');

function resolve(dir) {
  return path.join(__dirname, '..', dir);
}

module.exports = env => ({
  entry: {
    main: './src/app/main'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      '../assets': resolve('src/assets'),
      // Use the same moment package for each lib (remove duplicates)
      moment: resolve('node_modules/moment')
    }
  },

  module: {
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        use: ['babel-loader', '@ngtools/webpack'],
        exclude: /[\\/]node_modules[\\/](?!(artel-translations|marked)[\\/])/
      },
      {
        test: /\.(js|ts)$/,
        exclude: /node_modules.*|(\.ngfactory\.js|\.ngstyle\.js)/,
        enforce: 'pre',
        loader: 'eslint-loader'
      },
      {
        test: /\.js$/,
        exclude: /[\\/]node_modules[\\/](?!(artel-translations|marked)[\\/])/,
        loader: 'babel-loader'
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude: /index.html/
      },
      {
        test: /\.yml/,
        loader: 'yaml-import-loader'
      },
      {
        test: /\.(png|jpg|gif|ico|ttf|otf|eot|svg|woff(2)?)$/,
        loader: 'file-loader',
        options: {
          esModule: false
        }
      },
      { test: /[/\\]@angular[/\\].+\.js$/, parser: { system: true } },
      {
        test: /\.(scss|css)$/,
        use: [
          'to-string-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // Or array of paths
              resources: [
                resolve('node_modules/@artel/commons/variables.scss'),
                resolve('src/app/css/_bootstrap-custom.scss'),
                resolve(
                  'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss'
                ),
                resolve('src/app/css/_variables.scss')
              ]
            }
          }
        ],
        exclude: /main\.scss/
      }
    ]
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: './src/app/index.html',
      filename: './index.html'
    }),
    new AngularCompilerPlugin({
      tsConfigPath: resolve('tsconfig.app.json'),
      mainPath: resolve('src/app/main.ts')
    }),
    new CopyWebpackPlugin([
      {
        from: 'node_modules/angular-i18n/angular-locale_*.js',
        to: 'i18n/[name].[ext]'
      },
      {
        from: 'src/*.png',
        to: '[name].[ext]'
      },
      {
        from: 'src/app/favicon.ico',
        to: 'favicon.ico'
      },
      {
        from: 'src/assets/',
        to: 'assets'
      }
    ]),
    new MomentTimezoneDataPlugin({
      startYear: 2014
    }),
    new MomentLocalesPlugin({
      localesToKeep: [
        'it_IT',
        'es_ES',
        'cs_CZ',
        'nl_NL',
        'ca_ES',
        'de_DE',
        'nl_BE',
        'tr_TR',
        'pl_PL',
        'da_DK',
        'sv_SE',
        'fi_FI',
        'sk_SK',
        'hu_HU',
        'ro_RO',
        'pt_PT',
        'el_GR',
        'en_GB',
        'fr_FR',
        'nb',
        'nn'
      ]
    }),

    // https://blog.johnnyreilly.com/2016/05/the-mysterious-case-of-webpack-angular-and-jquery.html
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
      $: 'jquery',
      moment: 'moment-timezone',
      _: 'lodash',
      L: 'leaflet'
    }),
    // Workaround for https://github.com/angular/angular/issues/11580
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)/,
      path.resolve(__dirname, './src/app')
    )
  ]
});

You can notice that I added marked in my regexp, you'll need to remove it to reproduce the issue :)

[JakobSegerslatt]

Thumbs up this issue. I've been trying to solve how to get this package to work with angular cli's serve after the update to angular 9.
In production, angular cli uses differential loading which transpiles our libraries to a es5 bundle for all our ie11 users (as far as i know). But when working locally, the serve command produces one build, in this case the es5 build, but doesn't transpile node_modules. With optimization = false, I could find the following as the error.

Do you need to use this syntax?

This SO-post pointed me in the right direction which lead me this far.
https://stackoverflow.com/questions/57693741/angular-8-es5-target-is-not-fully-transpiled-to-es5-causing-problems-with-ie11

[drandell]

This issue (and more specifically the final comment) - markedjs/marked#1630
Would suggest they are working on the necessary fix

[jfcere]

@drandell thanks for the info, that's good news! I'll keep a eye on the future marked.js release.

[drandell]

@jfcere looks like we have a fix in place with markedjs/marked#1661

Just waiting for release ☺️

[jfcere]

I've updated marked to v1.1.0 which is meant to fix this issue markedjs/marked#1630.

Please update ngx-markdown to v9.1.0 and give me some feedback.

[dusktreader]

@jfcere I've run into this same issue with ngx-markdown 10.1.1. Downgrading to ngx-markdown 9.1.0 made things start working in ie11 that wouldn't on 10.1.1.