CODEWITHSUNDEEP
typescriptwebpack
Knows Not Much
Knows Not Much

Reputation: 31566

HtmlWebpackPlugin not working for typescript application

This is my webpack.config.js

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

module.exports = {
   entry: './src/index.tsx',
   output: {
      path: path.resolve(__dirname, "build"),
      filename: 'bundle.js'
   },
   module: {
      rules: [
         {
            test: /\.tsx?$/,
            loader: "awesome-typescript-loader"
         }
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
         template: "./index.html"
      })
   ]
}

and this is my package.json

{
  "name": "react-ts-todo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.1.0",
    "@types/react-dom": "^16.0.4",
    "awesome-typescript-loader": "^4.0.1",
    "html-webpack-plugin": "^3.1.0",
    "typescript": "^2.8.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

I can easily start my webpack server using nom start but when I make a change to my file and try to refresh. My webpack dev server crashes with error

TypeError: Cannot read property '_tsInstances' of undefined
    at resolveInstance (/Users/user1/IdeaProjects/react-ts-todo/node_modules/awesome-typescript-loader/src/instance.ts:73:16)
    at /Users/user1/IdeaProjects/react-ts-todo/node_modules/awesome-typescript-loader/src/instance.ts:368:20
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user1/IdeaProjects/react-ts-todo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:25:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/user1/IdeaProjects/react-ts-todo/node_modules/tapable/lib/Hook.js:35:21)
    at Watching._go (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Watching.js:40:32)
    at Watching._invalidate (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Watching.js:164:9)
    at watcher.compiler.watchFileSystem.watch (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Watching.js:135:10)
    at Watchpack.watcher.once (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/node/NodeWatchFileSystem.js:43:4)

I googled and found this

https://github.com/s-panferov/awesome-typescript-loader/issues/541

But this doesn't have a clear actionable solution for me.

Upvotes: 4

Views: 3376

Answers (1)

Knows Not Much
Knows Not Much

Reputation: 31566

OK. I found the answer here. We need to upgrade the awesome typescript loader to

"awesome-typescript-loader": "^5.0.0-1"

The following package.json works fine.

{
  "name": "react-ts-todo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.1.0",
    "@types/react-dom": "^16.0.4",
    "awesome-typescript-loader": "^5.0.0-1",
    "html-webpack-plugin": "^3.1.0",
    "typescript": "^2.8.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

Upvotes: 4

Related Questions