Import default export of markedjs

[RebeccaStevens]

Description

My build breaks when I try to build my app as the markedjs library isn't being imported correctly.

If I change this line:

marked-element/marked-import.js

Line 11 in 0391902

import * as marked from 'marked/lib/marked.js';

to this:

import marked from 'marked/lib/marked.js';

my build works successfully.

Expected outcome

console.log(window.marked);
// ƒ marked(src,opt,callback){ ...

Actual outcome

console.log(window.marked);
// {default: ƒ, __moduleExports: ƒ}

Browsers Affected

I assume all but I've only tested on Chromium.

• Chromium
• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[e111077]

Hi, unfortunately the marked library does not have an es6 default export (export default marked). This means that changing this to the default import breaks vanilla ES6 javascript usage of marked-element. This works fine with commonjs and marked uses commonjs exports as well which is what you may be seeing here.

Can you give more information about your build?

[RebeccaStevens]

Basically I'm just trying to use the iron-component-page.
My main script file looks like this:

if (window.WebComponents === undefined) {
  console.error(new Error('WebComponents not defined.'));
} else {
  window.WebComponents.waitFor(async () => import('@polymer/iron-component-page'));
}

This is then passed to both rollup (to create an esm) and webpack (to create an iife). (I wasn't able to use rollup for both as rollup has issues creating an iife if the source has a dynamic import).

My rollup config looks something like this:

{
  input: joinPaths(config.packageRoot, config.docs.templateFiles.entrypoint),

  output: {
    dir: config.docs.path,
    entryFileNames: '[name].min.mjs',
    chunkFileNames: 'common/[hash].min.mjs',
    format: 'esm',
    sourcemap: false
  },

  treeshake: {
    pureExternalModules: true,
    propertyReadSideEffects: false,
    annotations: true
  },

  plugins: [
    rollupPluginNodeResolve(),
    rollupPluginCommonjs(),
    rollupPluginTypescript({
      tsconfig: joinPaths(config.packageRoot, config.docs.templateFiles.tsconfig)
    }),
    rollupPluginBabel({
      babelrc: false,
      extensions: ['.js', '.mjs', '.ts'],
      ...getBabelConfigModule()
    }),
    rollupPluginTerser(minModule)
  ]
}

Not sure if it's relevant or not but my source code is written in TypeScript.

[e111077]

hmm is it possible to exclude the marked js library as a commonjs module? My guess is that your build is treating it as such when we are using it as an es module as marked was written to support all cases.

[RebeccaStevens]

That was it. Adding this fixed my issue:

rollupPluginCommonjs({
  exclude: ['node_modules/marked/**']
})

Thanks for your help.

[e111077]

Really good to hear, cheers!