js class syntax not working in node_modules library

Question

I see this error if the file is imported inside the library,but if you use the same scripts inside the project, then everything works out fine. I already tried maxNodeModuleJsDepth = 1, but this not work.

error text:

Uncaught Error: Module parse failed: Unexpected token (5:10)
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
| export default class NcaLayer
| {
>     socket;
| 
|     constructor(url)
    at eval (webpack-internal:///./node_modules/@dogovor24/dogovor24-components/helpers/nca-layer/NcaLayer.js:1)
    at Object../node_modules/@dogovor24/dogovor24-components/helpers/nca-layer/NcaLayer.js (app.js:2627)
    at __webpack_require__ (app.js:833)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js?!./node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts&:3)
    at Module../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js?!./node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts& (app.js:5387)
    at __webpack_require__ (app.js:833)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts&:2)
    at Module../node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts& (app.js:1945)
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8428 

NcaLayer.js:

import NcaLayerWebSocket from "@dogovor24/dogovor24-components/helpers/nca-layer/NcaLayerWebSocket.js";

export default class NcaLayer
{
    socket;

    constructor(url)
    {
        this.socket = new NcaLayerWebSocket(url);
    }
    
    signXml(storageName, keyType, xmlToSign, process)
    {
        this.socket.process = process;
        this.socket.send(JSON.stringify({
            "module": "kz.gov.pki.knca.commonUtils",
            "method": "signXml",
            "args": [storageName, keyType, xmlToSign, "", ""]
        }));
    }
}

here is my tsconfig file in project

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strictPropertyInitialization": false,
    "strictNullChecks":false,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

and tsconfig.json in my node module package

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "./*"
      ],
      "~/*": [
        "./*"
      ]
    },
    "removeComments": true,
    "strictNullChecks": true,
    "target": "esnext",
    "strict": false,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "noEmit": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
}

Answer 1

Note that the error is in a .js file (you're allowing JavaScript in your tsconfig.json). You're using class fields, which aren't quite part of JavaScript yet; specifically a public class field. (TypeScript has public class fields, but JavaScript doesn't [quite] yet.) Apparently your environment doesn't support public class fields yet, or your bundler isn't expecting to see them.

Options for resolving it:

1. With the code shown, you could just remove the socket; field definition. You're assigning to the field in the constructor, which will create it.

2. Alternatively, convert the file to TypeScript.

3. Alternatively, configure your bundler and/or Babel to transpile your JavaScript using class fields to JavaScript that doesn't use class fields (ES2020 or erarlier; I suspect at least public class fields will be in ES2021).