As above so below
As above so below

Reputation: 799

Cannot find module 'path'

I'm attempting to learn Typescript and thought I should also make my webpack config in .ts. This is my webpack.config.ts:

import * as webpack from 'webpack';
import * as path from 'path';

const config: webpack.Configuration = {
    entry: path.resolve('src/main.ts'),

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },

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

    output: {
        filename: 'index.js',
        path: path.resolve( 'dist')
    }
}

export default config;

As well as my package.json:

  "main": "index.js",
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "webpack --config devtools/webpack.config.ts --display-error-details",
    "post-build": "webpack-dev-server --config devtools/webpack.config.ts --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^4.0.1",
    "ts-node": "^5.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  }
}

The error I get when running npm run build is:

TS2307: Cannot find module 'path'

I have also tried requiring path, but then I get a different error saying it cant find module require.

What seems to be the issue?

Upvotes: 62

Views: 83398

Answers (6)

Nurbol Alpysbayev
Nurbol Alpysbayev

Reputation: 21851

TypeScript needs typings for any module, except if that module is not written in TypeScript.

 npm i @types/node -D

You may also need to add "types": [ "node" ] in your tsconfig.json.

Upvotes: 142

Son Nguyen
Son Nguyen

Reputation: 4287

In my case, I'm using a TypeScript monorepo and none of the solutions here worked for me. Adding "typeRoots": ["../node_modules/@types"] to the compilerOptions of the tsconfig.json file within a specific project worked for me. The IDE now also recognizes the type of __dirname

Upvotes: 2

toddmo
toddmo

Reputation: 22396

I had to do all this

  1. [VS Code][Terminal] upgrade typescript: npm i typescript/@latest -g
  2. [VS Code][Terminal] install node types: npm i @types/node --save-dev
  3. [VS Code][tsconfig.json] add types: "compilerOptions": {types:["node"]}
  4. [VS Code][Explorer] delete package-lock.json and node_modules
  5. [VS Code][Terminal] install: npm install
  6. [VS Code] Restart VS Code
  7. [VS Code][Terminal] test: tsc

Upvotes: 0

Omar Dulaimi
Omar Dulaimi

Reputation: 1189

Using

"types": ["node"]

in tsconfig.json as mentioned in the comments, solved the issue for me.

Upvotes: 15

vipul patel
vipul patel

Reputation: 736

First of all no need of .ts extension for webpack config file. Its just internal purpose for building the bundle. Use normal .js file.

Webpack is not ran by browser, its by Node Js which runs webpack module and make bundle as per config.

Now Node Js understand its own module system is which is require

So it would be like below: require in below is Node Js module importing syntax.

const webpack = require('webpack');
const path = require('path');

Upvotes: -6

deadcoder0904
deadcoder0904

Reputation: 8683

Try using require syntax rather than import & change webpack.config.ts to the following code

webpack.config.ts

const webpack = require('webpack');
const path = require('path');

const config: webpack.Configuration = {
    entry: path.resolve('src/main.ts'),

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },

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

    output: {
        filename: 'index.js',
        path: path.resolve( 'dist')
    }
}

module.exports = config;

And then run npm run build

Upvotes: -5

Related Questions