-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
module import/export issue #2265
Comments
It looks like somewhere in your code you are trying to import the default export like Make sure you replace all occurrences with |
I'm using TypeScript and can also confirm that I am also experiencing the same issue on |
@UziTech I tried that but didn't work... |
It seems unlikely to be a webpack-specific issue because the project I'm using Marked on is not using webpack at all. |
I have the same problem and |
@types/marked v4 should be released soon |
Great, I believe that update to Side question though: any reason |
Also waiting for |
Pretty sure your only options are wait for the updated types (which should be coming soon) or use a previous version. |
Ok, thanks. If it is the typings that cause the issue though, is there any way to omit the blocking error for now? Such as placing a |
@paddotk If you are in a hurry you can always use gitpkg.now.sh and get an NPM package from the latest commit of UziTech's PR while waiting for it to be merged. "@types/marked": "https://gitpkg.now.sh/UziTech/DefinitelyTyped/types/marked?415785793c958a98fa8902c482fe8be7959f86f6" |
The types have been merged and it's looking good on my end now |
It seems like v4.0.0 still doesn't work with Webpack. It looks like Webpack is trying to import |
I'm also having issues. I'm not using webpack, typescript, babel or anything, just using ESM module to run my code in Express. v3 works correctly, if I upgrade to v4 and switch my import from
|
I also have the same issue when using When using |
marked 4.0.1 has been released that may help with ESM instead of commonJS issues. The Real node ESM modules using babel will need to configure for it (unrelated to first comment). |
It seems to fix my issue, thanks! |
@webstech This still doesn't work for me: const INITIAL_MARKED_OPTIONS = {
gfm: false,
headerIds: false,
}
// Reset Marked to the defaults and set custom options
marked.setOptions({
...marked.getDefaults(),
...INITIAL_MARKED_OPTIONS,
}) |
Did you restart the editor? The types change requires that for some setups (vscode/eslint in my case). Are you getting compile errors? Pasted your code into mine and there were no complaints. |
I was actually working on CodeSandbox. Tried a couple of times but couldn't get it working. Here's a demo: I tried to download the sandbox (
But I got this:
Proceeded with
The development server was launched, and a browser window opened with this: |
Sorry, I missed that. Tracked this down to a different change in
is causing the problem for react apps and possibly anyone using webpack. If it is removed or points to Found a possible solution .
Ran some tests (react and marked repo) with no problems. I do not have a test case where the commonJS file would be used for the browser. |
Related to the previous solution link, there is a mention of using |
For me #2276 broke marked. The ts compiler just couldn't find marked library anymore!! 4.0.0 is fine, but 4.0.1 doesn't work in my setup (typescript + webpack). I would be in favor of reverting that change or finding a fix that works for everyone. |
I think the current setup is pretty confusing because the As far as the issues people are having here, it's really difficult to tell what's going wrong without more details. I'd encourage anyone who is having an issue to create and share a repository to reproduce the issue It may be impossible to support all combinations of bundlers and CDNs since so many do weird things. I think the folks that are having trouble with Webpack are most likely using Webpack 4, which is somewhat broken in the way it does resolution. If you use Webpack 5, I expect it will work. |
@benmccann I tried your branch (by cloning it directly into the node_modules/marked dir). I still have an issue:
In the code (targetting the browser): import { marked } from 'marked'; This gives the error: TS2307: Cannot find module 'marked' or its corresponding type declarations. (works fine with 4.0.0) Trying I'm not that familiar with the export part of the package.json, but maybe it's missing something? Anyway, thanks for trying to fix this! :) If needed, I'll try and make a reproducible small repo. Right now files are here: import line and webpack config. |
I just did this for now
|
I'm also experiencing this issue on Webpack 5. I'm importing That package is then imported by my Webpack 5 library, that correctly installs If I manually change the import to point at the Any chance you could expose all the files in the |
@laustdeleuran are you importing with |
@UziTech sure am: import { marked } from 'marked';
marked.use({
...
}); |
@laustdeleuran it's hard to understand what might be wrong in your case because you're using an intermediate package and I can't see the source of that package. Could you please share it? It's quite likely the issue may be there |
@benmccann , that's fair, I wish I had a more reproducible setup. In short, we have a monorepo using import DOMPurify from 'isomorphic-dompurify';
import { marked } from 'marked';
marked.use({
renderer: {
/* ...some options here */
},
});
export const format = (markdown: string) =>
DOMPurify.sanitize(marked.parse(markdown, { breaks: true })); That package compiles that to CJS, which ends up looking something like: "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.format = void 0;
var _isomorphicDompurify = _interopRequireDefault(require("isomorphic-dompurify"));
var _marked = require("marked");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_marked.marked.use({
renderer: {
/* ...some options here */
}
});
const format = markdown => _isomorphicDompurify.default.sanitize(_marked.marked.parse(markdown, {
breaks: true
}));
exports.format = format; That module then gets imported in another project in the monorepo, which is a |
@benmccann, if I get rid of the "alias": {
"marked": "marked/lib/marked.esm.js",
}, Which in effect applies @emilmuller's fix to Webpack 5. |
Put up a basic stab at that fix in #2747. |
@laustdeleuran does it work any better if you change this:
To this?
Or maybe this?
There's still not enough info here to really understand what's going on. What's the |
import { use } from 'marked'; As far as I can tell, import * as marked from 'marked'; This just gets me the same result, as it just compiles to the same thing in CJS.
Fair, but I don't really know how to make a small repro for you. Here's the subpackage's {
"private": true,
"main": "./dist/src/index.js",
"types": "./dist/src/index.d.ts",
"dependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-typescript": "^7.15.0",
"@types/handlebars": "^4.1.0",
"@types/marked": "^4.0.8",
"babel-plugin-module-resolver": "^4.1.0",
"date-fns": "^2.29.3",
"handlebars": "^4.7.7",
"imask": "^6.3.0",
"isomorphic-dompurify": "^0.19.0",
"lodash": "^4.17.21",
"marked": "^4.2.12",
"mockdate": "^3.0.2",
"pluralize": "^8.0.0",
"tsc-alias": "^1.3.9",
"typescript": "^4.3.5"
},
"devDependencies": {
"@types/jest": "^27.4.1",
"@types/node": "^16.7.1",
"@typescript-eslint/eslint-plugin": "^4.29.2",
"@typescript-eslint/parser": "^4.29.2",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-airbnb-typescript": "^13.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.24.1",
"eslint-plugin-jest-dom": "^3.9.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-testing-library": "^4.11.0",
"jest": "^27.5.1",
"prettier": "^2.5.1"
},
"scripts": {
"lint": "pnpm run lint:eslint && pnpm run lint:tsc",
"lint:eslint": "eslint . --cache",
"lint:tsc": "tsc --noEmit",
"test": "TZ='Etc/UTC' jest",
"build": "tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias --project tsconfig.build.json -s && babel . --out-dir dist --extensions .ts,.tsx --ignore 'node_modules,dist,**/*.test.ts'",
"install": "pnpm run build"
}
} |
I managed to make a minimal-ish repo that reproduces the error: |
This seems like a bug in webpack. This is how webpack compiles marked in your minimal repo (Thanks for that by the way 💯). Than tries to call String.marked.use which throws the error. /***/ "../node_modules/.pnpm/marked@4.2.12/node_modules/marked/lib/marked.cjs":
/*!******************************************************************************!*\
!*** ../node_modules/.pnpm/marked@4.2.12/node_modules/marked/lib/marked.cjs ***!
\******************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
"use strict";
module.exports = __webpack_require__.p + "static/media/marked.79f9f27bbd94805ba150.cjs";
/***/ }), |
Or there is some webpack configuration that needs to be changed. I am not a webpack expert but it might be helpful to create an issue in their repo to see if someone has seen this before and has an easy fix. |
Okay. Thanks for looking into it. I've opened an issue in Webpack's issue tracker here, so we'll see what they say. |
Webpack has a lot of open issues, though, so wondering if they'll have he resources to look into it. I looked in the issue tracker for Which, in concert with @UziTech's comment about configurations, made me wonder if it's something in |
I looked into the repo @LukeNotable mentioned above, and it looks remarkably similar to mine. Seems like it at least rules out |
@UziTech @benmccann, my confidence in the Webpack maintainers getting back to us in a timely manner on this is decreasing. According to @UziTech's analysis, it seems like @benmccann's earlier PR might have been on the right track. I wonder if it makes sense to see if that's a viable path forward, instead of waiting on @webpack to look at the issue on their end? |
That PR won't help in your case because webpack is not using main. It is using the require export from Line 24 in 6164fb6
If we change that to esm than no one could use marked as a commons module. I think the correct solution here is to fix it in webpack and use webpack v4 until it is fixed. |
Actually it looks like this might actually be a create-react-app issue instead of webpack. facebook/create-react-app#12700 Either way working around it in marked doesn't seem like the right way to go. There is a work around in the cra issue. I haven't tried it but that looks like a better work around. |
Looping back around. I can confirm that this looks to be an issue in There's some more context in facebook/create-react-app#12700, including a couple of PRs to solve the issue, as well as a couple of workarounds. |
This solved it for me |
I am using Meteor, which has its own build system. Long story short: the only way I made it work was: // @ts-ignore
import { marked } from 'marked/lib/marked.esm'; Not very satisfying, but it works. |
Late to the party here, but ran into the same thing. The issue was the last 3 lines of marked.d.ts Make the following changes: Original export type * from "MarkedOptions";
export type * from "rules";
export type * from "Tokens"; Corrected export type { MarkedOptions } from "MarkedOptions";
export type { Rules } from "rules";
export type { Tokens } from "Tokens"; |
I'm using marked with Nuxt.js v2 and also had some trouble importing the module after upgrading from v5.1.2 to v9.1.0. I was importing the module in a Nuxt plugin with import {marked} from 'marked'; And during the build I got
After trying out a lot of different potential solutions, what ended up making it work was to add build: {
transpile: ['marked']
} |
Thanks @davidsandoz, following line solved this issue:
|
Marked version:
4.0.0
Describe the bug
I updated marked in our project from
^3.0.2
to4.0.0
(before it worked fine), and after the update I get an errormarked__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function
when using it. It seems that the module is no longer exported properly,I tried to change the import
import { marked } from 'marked'
as well as usingmarked.parse()
as shown in the readme, but that doesn't seem to help.To Reproduce
Steps to reproduce the behavior:
Use a webpack/npm project, import by means of
import marked from 'marked'
. Use themarked()
function.The text was updated successfully, but these errors were encountered: