Unexpected token in index.js

[hellow554]

ERROR in ./node_modules/@ltd/j-toml/index.js 439:27
Module parse failed: Unexpected token (439:27)
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
|               weak.set = weak.set;
|               const properties = getOwnPropertyDescriptors(freeze(freeze(class extends Array$1 {
>                       static [Symbol.species] = class extends null { constructor () { return DELETED; } };
|                       constructor () { return super(); }
|                       get slice () { }
 @ ./src/pages/upload.tsx 14:0-35 22:15-25
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 26:11-28:5
 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

Code:

import TOML from "@ltd/j-toml";

function parseToml(content) {
    try {
        const toml = TOML.parse(content, 1.0, "\n");
    } catch (e) {
        console.error(e);
    }
}

I'm not entirely sure what is going on here. What information do you need to debug this?

[LongTengDao]

@hellow554 Welcome to use @ltd/j-toml!

Usually, you should report the versions of @ltd/j-toml and webpack you are using. But here we skip.

It seems that, your bundler cannot handle some es6 syntax (to parse or polyfill), which had been supported by latest runtime environment.

Please try to pack these one by one, to locate which syntax(s) is not supported yet (if it's not necessary, I can replace that (or those) with older syntax):

console.log(class {});

console.log(class extends null {
    constructor () { return []; }
});

console.log(class extends Array {});

console.log(class extends Array {
    constructor () { return super(); }
});

console.log(class {
    static key () {}
});

console.log(class {
    static key = 'value';
});

console.log(class {
    static ['key'] = 'value';
});

console.log(Symbol.species);

console.log(class extends Array {
    static
    [Symbol.species]
    =
    Array;
});

console.log(class extends Array {
    static
    [Symbol.species]
    =
    class extends null {
        constructor () {
            return [];
        }
    };
});

If you can do it twice, with latest version webpack (I don't know what version you are using now), it would be best. Maybe the latest version webpack had already supported them. (I only use rollup, so I'm not familiar with webpack.)

Anyway, I had go ahead removed code above in the new published @ltd/j-toml version. But if you don't ensure the problem, I'm afraid that you will meet the same problem soon in other place, even in rest code inside @ltd/j-toml.

[hellow554]

Hey @LongTengDao

that's a very good post, thank you very much! I'm using gatsby version 3.3.0, which is the latest version as of today. It uses webpack@5.33.2 (at least what I've found with npm list).

I'm not entirely sure which version of ecmascript it uses.

---

I tested each of your examples, here are the results:

console.log(class {}); ✔️ 

console.log(class extends null {
    constructor () { return []; }
}); ✔️ 

console.log(class extends Array {}); ✔️ 

console.log(class extends Array {
    constructor () { return super(); }
}); ✔️ 

console.log(class {
    static key () {}
}); ✔️ 

console.log(class {
    static key = 'value';
}); ✔️ 

console.log(class {
    static ['key'] = 'value';
}); ✔️ 

console.log(Symbol.species); ✔️ 

console.log(class extends Array {
    static
    [Symbol.species]
    =
    Array;
}); ✔️ 

console.log(class extends Array {
    static
    [Symbol.species]
    =
    class extends null {
        constructor () {
            return [];
        }
    };
}); ✔️ 

All of your examples work perfectly fine.

---

With the latest 1.10.0 version it throws a different error:

ERROR in ./node_modules/@ltd/j-toml/index.js 1088:1
Module parse failed: Unexpected character '#' (1088:1)
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
| class OffsetDateTime extends Datetime {
|
>       #ISOString        ;
|       #value       ;
|

[hellow554]

Here's an MCVE:

cd $(mktemp -d)
npm init -y
npm install webpack webpack-cli @ltd/j-toml
mkdir src
cat <<EOF > src/index.js
import TOML from "@ltd/j-toml";
const table = TOML.parse("", 1.0, "\n");
EOF
npx webpack

[LongTengDao]

@hellow554 Try again (version 1.11.0)

[hellow554]

ERROR in ./node_modules/@ltd/j-toml/index.js 1120:21
Module parse failed: Unexpected token (1120:21)
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
| class OffsetDateTime extends Datetime {
|
>       [_ISOString]        ;
|       [_value]       ;
|
 @ ./src/index.js 1:0-31 2:14-24

(have you tried it with the MCVE from this post?)

[LongTengDao]

@hellow554 Aha! Finally I found what throws all the time!

The webpack doesn't support class field syntax which is stage 3 by default.

(It's so strange that all the test samples above passed...)

Anyway, v1.12.0 passed. (I had never used webpack before, it wasted me so many time for first use...)