How to fix Module parse failed: Unexpected token

[tunq1]

Hi everyone, I used node-html-parse for project reactjs with nextjs.
But when I import node-html-parse, it shows this error.

./node_modules/node-html-parser/dist/esm/nodes/node.js
Module parse failed: Unexpected token (13:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| writable: true,
| configurable: true,

        value: range ?? [-1, -1]

| });
| }

Please help me resolve this error.
Thank all.

[nonara]

That's a webpack config issue. Specifically, it's due to using ES6 syntax in your webpack config. See: https://stackoverflow.com/questions/63759629/simple-webpack-build-fails-because-of-new-es-syntax

Simple solution is to upgrade to Webpack 5, which readily supports ES2020 syntax.

[tunq1]

That's a webpack config issue. Specifically, it's due to using ES6 syntax in your webpack config. See: https://stackoverflow.com/questions/63759629/simple-webpack-build-fails-because-of-new-es-syntax

Simple solution is to upgrade to Webpack 5, which readily supports ES2020 syntax.

Next.js has adopted webpack 5 as the default for compilation.

[nonara]

Ah, I see. Well, the issue is related to webpack not being able to recognize ES2020, so I assume there is a config setup needed to ensure that it can.

I would search related to webpack 5 failing to parse nullish coalescing for javascript. Hope that helps!

[haruharuharuby]

I faced the same error when I use this library with "nuxt": "^2.15.7".
I've just solved it as my workaround.

It looks indeed correct that (maybe latest) webpack can not recognize ESNext(=Es2020).

This will be solved by the previous version of this library(ex v3.3.6) as workaround.

Because this version seems to publish JS as older ECMA version.

Therefore webpack can recognize it.

[nonara]

@taoqf If it's going to cause issues for a few people, an easy fix is to change the build:esm npm run script to target es2019 instead of esnext. Targeting esnext is generally not a good idea for live code, anyway, so it might make sense to make the change.

[taoqf]

@nonara es2019 could not be used
error TS6046: Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'

[nonara]

Ah ok. I believe it's target that needs to be changed (-t flag). Might want to check to see if the nullish coalescing (??) is still in the esm output file. Target tells the compiler what type of source to produce in the final result. Module, I think, has to do with the import / export syntax.

If it's still there you can probably just set the t flag to es2019 and it should be good.

[taoqf]

https://github.com/taoqf/node-html-parser/releases/tag/v4.1.2