CODEWITHSUNDEEP
javascriptreactjstypescriptwebpackstack-trace
JacksonCounty
JacksonCounty

Reputation: 135

How to debug runtime TypeError

I built a React+Typescript package using webpack. When I run it and check console in the browser, I see this mysterious stacktrace.

The error occurs within 1 second of starting up and is the first message in the console.

TypeError: n is not a function
    at bundle.js:2
    at Array.map (<anonymous>)
    at Gc.getBars (bundle.js:2)
    at Gc.drawOnCanvas (bundle.js:2)
    at X.drawOnCanvas (bundle.js:2)
    at X.componentDidUpdate (bundle.js:2)
    at X.componentDidMount (bundle.js:2)
    at hs (bundle.js:2)
    at Dl (bundle.js:2)
    at t.unstable_runWithPriority (bundle.js:2)

The problem is, I have no idea where in the code the error exists, since the stacktrace is very not informative.

How can I figure out which line of code is the problem?

Here's my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict" : true,
    "esModuleInterop": true,                        /* Enables emit 
    /* Advanced Options */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true,        /* Disallow inconsistently-cased references to the same file. */
    "jsx" : "react",
  }
}

Here's my webpack.config.js


const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");


const CopyPlugin = require("copy-webpack-plugin");


const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
});

module.exports = {
  entry: "./src/index.tsx",
  

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false
        }
      }
    ],
  },


  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    symlinks: true
  },

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },

  plugins: [
    htmlPlugin,
    new CopyPlugin({
      patterns: [
        { from: "public" }
      ],
    }),
  ],


  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000 ,

    
  },

};

Upvotes: 0

Views: 372

Answers (1)

dee
dee

Reputation: 2434

It would be helpful if you provide your webpack.config.js file

Generally, I would do

 node --inspect-brk=9229 ./node_modules/webpack/bin/webpack.js --config webpack.config.js --colors

To debug issues with the webpack config.

Official documentation suggests, node-nightly. I personally haven't used it.

Just add this to your webpack.config

module.exports = {
  entry: "./src/index.tsx",
  

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false
        }
      }
    ],
  },
  devtool: 'source-map',
  .....
  .....
}

Upvotes: 1

Related Questions