Reputation: 799
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
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
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
Reputation: 22396
I had to do all this
npm i typescript/@latest -g
npm i @types/node --save-dev
"compilerOptions": {types:["node"]}
npm install
tsc
Upvotes: 0
Reputation: 1189
Using
"types": ["node"]
in tsconfig.json
as mentioned in the comments, solved the issue for me.
Upvotes: 15
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
Reputation: 8683
Try using require
syntax rather than import
& change webpack.config.ts
to the following code
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