Typescript ModuleNotFound Exception occured during webpack

Question

This question about webpack - typescript and npm. My Folder structure :

.
-src
--apps
---TemplateInvestigate    
   Main.ts
-node_modules 
--parse-json 
   index.js
---vendor    
   parse.js    
   unicode.js

In TemplateInvestage Main.ts trying to import json parser :

import * as a from "../../../node_modules/parse-json/index.js";

My Webpack configuration is :

var ES5to3OutputPlugin = require("es5to3-webpack-plugin");
module.exports = {  
  entry: {

      'TemplateInvestigate':"./src/apps/TemplateInvestigate/Main.ts"
  },

  output: {
    filename: './dist/[name].jsx'
  },
  resolve: {
    extensions: [   '.ts']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
  ,plugins : [
    new ES5to3OutputPlugin()
  ]
}

tsConfig:

 "compilerOptions": {
 //   "module": "commonjs",
     "noImplicitAny": false
  ,  "noEmitOnError": true
   , "removeComments": false
   ,"moduleResolution": "node"
   ,"allowJs" : true
   ,"baseUrl": "."
  }



}

when I run webpack I got following error

ModuleNotFoundError: Module not found: Error: Can't resolve './vendor/parse'
in 'K:\projectFolder\node_modules\parse-json'
    at factoryCallback (C:\AppData\Roaming\npm\node_modules\webpack\
lib\Compilation.js:259:39)
    at C:\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleF
actory.js:234:19
    at onDoneResolving (C:\AppData\Roaming\npm\node_modules\webpack\
lib\NormalModuleFactory.js:59:20)
    at C:\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleF
actory.js:126:20
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn
c\dist\async.js:3694:9
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn
c\dist\async.js:359:16
    at iteratorCallback (C:\AppData\Roaming\npm\node_modules\webpack
\node_modules\async\dist\async.js:933:13)
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn
c\dist\async.js:843:16
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn
c\dist\async.js:3691:13
    at apply (C:\AppData\Roaming\npm\node_modules\webpack\node_modul
es\async\dist\async.js:21:25)
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\asyn
c\dist\async.js:56:12
    at C:\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleF
actory.js:121:22
    at onResolved (C:\AppData\Roaming\npm\node_modules\webpack\node_
modules\enhanced-resolve\lib\Resolver.js:70:11)
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at afterInnerCallback (C:\AppData\Roaming\npm\node_modules\webpa
ck\node_modules\enhanced-resolve\lib\Resolver.js:138:10)
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (C:\AppData\Roami
ng\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:181:46)
    at innerCallback (C:\AppData\Roaming\npm\node_modules\webpack\no
de_modules\enhanced-resolve\lib\Resolver.js:125:19)
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\tapa
ble\lib\Tapable.js:283:15
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\enha
nced-resolve\lib\UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at afterInnerCallback (C:\AppData\Roaming\npm\node_modules\webpa
ck\node_modules\enhanced-resolve\lib\Resolver.js:138:10)
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (C:\AppData\Roami
ng\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:181:46)
    at innerCallback (C:\AppData\Roaming\npm\node_modules\webpack\no
de_modules\enhanced-resolve\lib\Resolver.js:125:19)
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at C:\AppData\Roaming\npm\node_modules\webpack\node_modules\tapa
ble\lib\Tapable.js:283:15
    at innerCallback (C:\AppData\Roaming\npm\node_modules\webpack\no
de_modules\enhanced-resolve\lib\Resolver.js:123:11)
    at loggingCallbackWrapper (C:\AppData\Roaming\npm\node_modules\w
ebpack\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
resolve './vendor/parse' in 'K:\projectFolder\node_module
s\parse-json'
 **using description file: K:\projectFolder\node_modules\p
arse-json\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: K:\projectFolder\node_mod
ules\parse-json\package.json (relative path: .)
    using description file: K:\projectFolder\node_modules
\parse-json\package.json (relative path: ./vendor/parse)
      as directory
        K:\projectFolder\node_modules\parse-json\vendor\parse doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        K:\projectFolder\node_modules\parse-json\vendor\parse doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        K:\projectFolder\node_modules\parse-json\vendor\parse.ts doesn't exist**  

Note: There is nop type definition file for parse-json package that installed through npm .

Answer 1

The problem is that parse-json is a JavaScript module and it's very common to use an import such as ./vendor/parse which automatically resolves to ./vendor/parse.js by Node. In your webpack config you told webpack to only resolve .ts extensions. To fix that problem you have to add .js to resolve.extension as well:

resolve: {
  extensions: ['.ts', '.js']
},

On a side note, when you want to import from a module installed by npm, you shouldn't specify the exact relative path, but just its name, like so (I also gave it a better name than a):

import * as parseJson from "parse-json";

Basically when it's not a relative path you import from, then it will look inside node_modules (in the current directory and all parent directories), which would then reach your project's top level directory where the node_modules contain parse-json. And also you shouldn't specify that you want to import from the index.js in parse-json/index.js, because a module defines an entry point that is used when it is imported, which indeed in this case is the index.js.

For more information about module resolution have a look at: https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders