-2

We have a bunch of 1p(First party) JS packages which are used across web and mobile (React Native App). One thing we have noticed is the source map only works for the base package and not for the 1p packages as those are node dependencies added at compile time.

The 1p node modules are not captured as part of the source maps how do we enable for our packages alone? I tried using https://www.npmjs.com/package/source-map-loader but it dosent work and gives error at compile time .

Setup

enter image description here

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader

WebPack Config

devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      {
        test : /\.scss$/,
        use: {
          loader: 'sass-loader',
          options: {
            includePaths: ["./node_modules"]
          }
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  },

Edit 1

//https://www.typescriptlang.org/docs/handbook/compiler-options.html
{
  "compilerOptions": {
    "lib": ["es2016", "es6", "es5", "dom"],
    "declaration": true,
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    // Report errors for fallthrough cases in switch statement.
    "noFallthroughCasesInSwitch": true,
    // Report errors on unused locals.
    "noUnusedLocals": true,
    // Report errors on unused parameters.
    "noUnusedParameters": false,
    "moduleResolution": "node",
    // enabled to skip annoying issue with @types/react-native conflict with @types/node
    "skipLibCheck": true,
    "outDir": "es5",
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "."
  },
  "include": ["src/**/*", "tst/**/*"],
  "exclude": ["build", "dist", "node_modules/**/*", "tst/**/*"]
}
INFOSYS
  • 1,465
  • 9
  • 23
  • 50

1 Answers1

1

Hard to say with the information available, but this.getOptions has been introduced with webpack 5 and if your webpack version is still below updating it to version 5 should solve the problem.

matthiasgiger
  • 1,086
  • 9
  • 17
  • Unfortunately will not be update the version for webpack but as of now the versions we are using is ``` webpack-cli@3.3.11",``` and ```"webpack@4.43.0",``` – INFOSYS Mar 09 '21 at 06:17
  • 1
    Ok, what about downgrading the version of source-map-loader? Below version 2 it should work with webpack 4, try using `source-map-loader@1.1.3` does help? – matthiasgiger Mar 09 '21 at 06:22
  • let me try that .. source map loader version lesser is not a problem.. – INFOSYS Mar 09 '21 at 06:34
  • Please don't forget to accept the answer if downgrading source-map-loader to a version compatible with webpack 4 worked out, thanks. – matthiasgiger Mar 13 '21 at 09:33
  • Unfortunately no , that didn't work out it complied fine to be honest be post that the first party / my packages still showed the code in es4 and not in ts .. – INFOSYS Mar 14 '21 at 07:25
  • I have added the tsconfig for the 1p packages if that is something we need to check more thoroughly – INFOSYS Mar 14 '21 at 07:27