IE 11 support :) #1585

frontendphil · 2019-12-17T10:59:58Z

I totally would understand if you have no intention of fixing this :) But maybe you could add a note to the README ;) We have just found out that the latest change to you rollup configuration (loose mode) produces output that isn't compatible with IE 11. In particular, it is the object shorthand that IE does not understand.

Describe the bug
The latest marked version does not work in IE 11

To Reproduce
Import it in any file and open this one in IE 11

Expected behavior
It works.

The text was updated successfully, but these errors were encountered:

UziTech · 2019-12-17T13:43:41Z

It seems to work just fine for me in IE 11

I created this little test and opened it in ie11 and it seems to work just fine.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
	<textarea id="markdown"></textarea>
	<br />
	<button id="button" type="button">Submit</button>
	<br />
	<div id="html"></div>
	<script src="https://cdn.jsdelivr.net/gh/markedjs/marked/lib/marked.js"></script>
	<script>
		var button = document.getElementById("button");
		var html = document.getElementById("html");
		var markdown = document.getElementById("markdown");
		button.addEventListener("click", function () {
			html.innerHTML = marked(markdown.value);
		});
	</script>
	</body>
</html>

Also our demo works fine in ie11 https://marked.js.org/demo/

Can you give us an error message?

frontendphil · 2019-12-17T13:46:09Z

Thanks. I think the issue is within the esm build: https://cdn.jsdelivr.net/gh/markedjs/marked@0.8.0/lib/marked.esm.js Look for instance at how the getDefaults method is exported. It uses the object shorthand which it doesn't in the regular build. I guess since we're using webpack it will default to the esm version and not process it further.

UziTech · 2019-12-17T14:36:00Z

Are you saying webpack is not able to process marked.esm.js? or once it is processed it isn't able to work in ie11?

Webpack should be pulling from /src/marked.js. I think you will need to use a babel plugin with webpack to transpile the code to work in whatever browsers you need to support.

frontendphil · 2019-12-17T16:27:13Z

Are you saying webpack is not able to process marked.esm.js? or once it is processed it isn't able to work in ie11?

Nope :) What I'm saying is that we have configured webpack to only use babel for everything that is not in node_modules. Not sure why but I definitively see the esm output in our bundle. Generally, this is fine because we want webpack to use the esm bundles so that tree shaking can happen. The modules are then transpiled in a later step. However what is not changed is the object shorthand structure.

Maybe this is my question. Why is the object shorthand transpiled in the marked.js file but not in the esm file? From my understanding, the difference between the two files should only be that the one features es module syntax and the other doesn't.

UziTech · 2019-12-17T17:05:43Z

ie11 doesn't support esm so there should be no reason to transpile it to work with ie11.

Most likely webpack is pulling code from /src/marked.js and bundling it but not transpiling it so it would look a lot like /lib/marked.esm.js without the exports

The modules are then transpiled in a later step. However what is not changed is the object shorthand structure.

Seems like your transpiler should change it to work with your supported browsers in this transpile step.

oculus42 · 2019-12-17T20:45:53Z

The core issue is a breaking change was made to the package without a server major release, so consumers who have successfully used the code in the past are suddenly impacted.

Would you consider publishing a 0.8.1 (or 0.9.0) which reinstates the previous release and re-publishing 0.8.0 as 1.0.0?

UziTech · 2019-12-17T20:50:05Z

@oculus42 We do follow semver for 0.x.y where x is breaking changes and y is non-breaking changes.

smhg · 2019-12-18T11:48:56Z

Practically, if you're using browserify+babel(ify) (and possibly other tools):

Where with 0.7 you'd use:

const md = require('marked');
// or
import md from 'marked';

If you need IE 11 support, with 0.8 this now needs to be:

const md = require('marked/lib/marked');
// or
import md from 'marked/lib/marked';

frontendphil · 2019-12-18T12:29:52Z

Ok, now I also see that the main part of the package.json actually points to ./src/marked.js. That's probably the confusion. However, I'm wondering why this is the case. Why the rollup config and build steps if what your consumers get is the raw source after all?

smhg · 2019-12-18T13:10:36Z

@UziTech @frontendphil a solution could be to have package.json's main point to lib/marked.js and add a module entry which points to src/marked.js (webpack, rollup,... use that if available). This might also make the ESM build obsolete?

That is, if this needs a solution. I'm not very up to date with the current state of transpiling.

frontendphil · 2019-12-18T14:16:28Z

We usually have this in our rollup configs:

{
  output: [
    {
      file: 'lib/marked.cjs.js',
      format: 'cjs',
      compact: true,
    },
    {
      file: 'lib/marked.esm.js',
      format: 'esm',
      compact: true,
    },
  ],
}

You can let your 'main' point to lib/marked.cjs.js and module to lib/marked.esm.js. Both should still have everything else transpiled through the standard babel config you already have in your rollup config. Directly pointing at your src folder isn't a good practice IMHO if you want to use some more modern language features while developing but ship something that works nonetheless.

UziTech · 2019-12-18T15:07:47Z

Why the rollup config and build steps if what your consumers get is the raw source after all?

Because marked can be a client side library without node by using

<script src="https://cdn.jsdelivr.net/gh/markedjs/marked/lib/marked.js"></script>

or

import marked from 'https://cdn.jsdelivr.net/gh/markedjs/marked/lib/marked.esm.js';

You can let your main point to lib/marked.cjs.js and module to lib/marked.esm.js

see discussion #1571 (comment)

Also benchmark testing showed using es6 in /src/marked.js in node was about 10% faster than using the babel generated es5 code in /lib/marked.js.

frontendphil · 2019-12-18T15:30:39Z

Alright, I would just not assume that I need to explicitly import from the lib folder in order to get this to work. At least I would think that this should be mentioned in the readme.

smhg · 2019-12-18T19:34:46Z

That's only one pull request away! 🙂

oliviertassinari · 2019-12-26T21:51:18Z

I have observed the same behavior, https://material-ui.com/ crashes in IE 11 since the upgrade of marked from v0.7.0 to v0.8.0 mui/material-ui#18834.

oliviertassinari · 2019-12-26T22:03:05Z

Given this comment:

Because marked can be a client side library without node by using
<script src="https://cdn.jsdelivr.net/gh/markedjs/marked/lib/marked.js"></script>

It seems that the build is configured as follow:

/src: the source, raw. They shouldn't be used unless a developer wants to transpile the source to target a specific set of browsers.
/lib/marked.js: the UMD module that targets older browsers, perfect for CDN delivery.
/lib/marked.esm.js: the UMD module that targets browsers that support es modules, perfect for CDN delivery.

I would propose to add a CJS version of the package and to link it:

package.json

{
  "name": "marked",
  "description": "A markdown parser built for speed",
  "author": "Christopher Jeffrey",
  "version": "0.8.0",
- "main": "./src/marked.js",
+ "main": "./lib/marked.cjs.js",
  "bin": "./bin/marked",
  "man": "./man/marked.1",

Related to markedjs/marked#1585 (comment)

xygon · 2020-01-04T19:26:21Z

I have the same issue, upgrading from 0.7.0 to 0.8.0 causes a failure for my angular 8 site in IE11
SCRIPT1002: Syntax error main.f94e31e3fb9286b4b630.js (1,89)
which resolves to
const { defaults } = __webpack_require__(/*! ./defaults.js */ "./node_modules/marked/src/defaults.js");
This is an issue as IE11 doesn't support destructuring assignment.

UziTech · 2020-01-05T00:03:52Z

@xygon the work around is to use require('marked/lib/marked.js') or transpile marked with babel.

deshiknaves · 2020-01-09T04:32:42Z

@oculus42 We do follow semver for 0.x.y where x is breaking changes and y is non-breaking changes.

I'm just going to leave this here: semver version 2

and npx check-update --update

styfle · 2020-01-09T14:15:08Z

Your linked specification for Semver 2.0.0 says the following in item 4:

Major version zero (0.y.z) is for initial development. Anything MAY change at any time. The public API SHOULD NOT be considered stable.

Therefore it is following the semver spec.

The plan is to release 1.0.0 once the API is stable and commonmark + gfm tests pass.

deshiknaves · 2020-01-09T21:50:50Z

Yep. That's fair. We'll get another library — this is obviously not stable enough for a normal workflow. Cheers.

UziTech · 2020-01-09T22:10:25Z

@deshiknaves I would recommend markdown-it They are very fast, extensible, and have quite a few plugins for GFM and other variations.

wmarques · 2020-02-19T09:21:09Z

This workaround should be documented in the README IMO, do you want me to provide a PR for this ?

UziTech · 2020-02-19T13:19:07Z

@wmarques yes please

joshbruce · 2020-02-22T20:54:14Z

Good conversation here. Just to throw a bit on the fire: #1522

Anyone is welcome to help move Marked along toward the 1.0 future. Will probably post an update to the project status concept in the coming months. Sticking with the theme it'll probably be called: If only we had a holocaust cloak. :)

tomwheyprotein · 2020-03-07T18:58:07Z

I recently ran into a version mismatch between marked@0.8.0 and @types/marked@0.7.3. After downgrading marked to 0.7.0, our builds worked with IE.

There is no package version for @types/marked@0.8.0 available at this time.

jebarjonet · 2020-03-09T16:57:55Z

Seriously, exporting /src source by default instead of the dist version... 🙈

bugfix for IE compatibility, thanks to markedjs/marked#1585 (comment)

UziTech · 2020-05-21T16:06:09Z

This should be fixed by #1661

UziTech added the need more info label Dec 17, 2019

tjrobinson mentioned this issue Dec 18, 2019

Change the way marked is imported to keep IE11 support Hypercubed/angular-marked#81

Open

UziTech added category: docs Documentation changes and removed need more info labels Dec 18, 2019

kenchan0130 mentioned this issue Dec 24, 2019

Bump marked from 0.7.0 to 0.8.0 kenchan0130/markdown-to-atlassian-wiki-markup#88

Closed

oliviertassinari added a commit to oliviertassinari/material-ui that referenced this issue Dec 29, 2019

[docs] Fix IE 11 support

ba92f4d

Related to markedjs/marked#1585 (comment)

oliviertassinari added a commit to oliviertassinari/material-ui that referenced this issue Dec 29, 2019

[docs] Fix IE 11 support

f580252

Related to markedjs/marked#1585 (comment)

oliviertassinari mentioned this issue Dec 29, 2019

[core] Batch small changes mui/material-ui#19016

Merged

Blackbaud-BobbyEarl mentioned this issue Jan 10, 2020

Fix marked for IE11 blackbaud/skyux-docs-tools#13

Merged

wmarques mentioned this issue Feb 18, 2020

Marked dropped IE11 Support jfcere/ngx-markdown#210

Closed

mrw100 mentioned this issue Mar 2, 2020

Carbon Site fails in IE11 after upgrade from marked@0.7.0 to 0.8.0 cerner/carbon-site-helpers#32

Closed

j4kim added a commit to cret-vaillant/camping-vaillant that referenced this issue Mar 10, 2020

bugfix for IE compatibility, thanks to markedjs/marked#1585 (comment)

d7a73c4

Ionaru added a commit to Ionaru/easy-markdown-editor that referenced this issue Mar 20, 2020

Merge pull request #169 from felipefdl/master

f69b3c3

bugfix for IE compatibility, thanks to markedjs/marked#1585 (comment)

ziir mentioned this issue Mar 26, 2020

Add browser field to package.json #1630

Closed

phodal mentioned this issue Mar 30, 2020

support IE11+ phodal/ledge#3

Closed

UziTech closed this as completed May 21, 2020

oliviertassinari mentioned this issue Dec 5, 2020

[core] Batch small changes mui/material-ui#23853

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IE 11 support :) #1585

IE 11 support :) #1585

frontendphil commented Dec 17, 2019

UziTech commented Dec 17, 2019

frontendphil commented Dec 17, 2019

UziTech commented Dec 17, 2019

frontendphil commented Dec 17, 2019

UziTech commented Dec 17, 2019

oculus42 commented Dec 17, 2019

UziTech commented Dec 17, 2019

smhg commented Dec 18, 2019

frontendphil commented Dec 18, 2019

smhg commented Dec 18, 2019 •

edited

frontendphil commented Dec 18, 2019

UziTech commented Dec 18, 2019 •

edited

frontendphil commented Dec 18, 2019

smhg commented Dec 18, 2019

oliviertassinari commented Dec 26, 2019

oliviertassinari commented Dec 26, 2019 •

edited

xygon commented Jan 4, 2020

UziTech commented Jan 5, 2020

deshiknaves commented Jan 9, 2020

styfle commented Jan 9, 2020

deshiknaves commented Jan 9, 2020

UziTech commented Jan 9, 2020

wmarques commented Feb 19, 2020

UziTech commented Feb 19, 2020

joshbruce commented Feb 22, 2020

tomwheyprotein commented Mar 7, 2020 •

edited

jebarjonet commented Mar 9, 2020

UziTech commented May 21, 2020

IE 11 support :) #1585

IE 11 support :) #1585

Comments

frontendphil commented Dec 17, 2019

UziTech commented Dec 17, 2019

frontendphil commented Dec 17, 2019

UziTech commented Dec 17, 2019

frontendphil commented Dec 17, 2019

UziTech commented Dec 17, 2019

oculus42 commented Dec 17, 2019

UziTech commented Dec 17, 2019

smhg commented Dec 18, 2019

frontendphil commented Dec 18, 2019

smhg commented Dec 18, 2019 • edited

frontendphil commented Dec 18, 2019

UziTech commented Dec 18, 2019 • edited

frontendphil commented Dec 18, 2019

smhg commented Dec 18, 2019

oliviertassinari commented Dec 26, 2019

oliviertassinari commented Dec 26, 2019 • edited

xygon commented Jan 4, 2020

UziTech commented Jan 5, 2020

deshiknaves commented Jan 9, 2020

styfle commented Jan 9, 2020

deshiknaves commented Jan 9, 2020

UziTech commented Jan 9, 2020

wmarques commented Feb 19, 2020

UziTech commented Feb 19, 2020

joshbruce commented Feb 22, 2020

tomwheyprotein commented Mar 7, 2020 • edited

jebarjonet commented Mar 9, 2020

UziTech commented May 21, 2020

smhg commented Dec 18, 2019 •

edited

UziTech commented Dec 18, 2019 •

edited

oliviertassinari commented Dec 26, 2019 •

edited

tomwheyprotein commented Mar 7, 2020 •

edited