Visual Studio 2019 will not build TypeScript with webpack-source

Viewed 1207

My issue seems like Visual Studio is trying to import modules it should not. This is the error I am getting. I am trying to setup webpack with visual studio. The webpack build works fine. The visual studio typescript build fails.

Severity    Code    Description Project File    Line    Suppression State
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Nester.MvcUI    C:\...\MvcUI\node_modules\@types\webpack-sources\lib\CachedSource.d.ts  3   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Nester.MvcUI    C:\...\MvcUI\node_modules\@types\webpack-sources\lib\CompatSource.d.ts  1   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\ConcatSource.d.ts  4   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\OriginalSource.d.ts    4   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\PrefixSource.d.ts  1   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\RawSource.d.ts 1   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\ReplaceSource.d.ts 1   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\Source.d.ts    4   
Error   TS2792  Build:Cannot find module '.'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? MvcUI   C:\...\MvcUI\node_modules\@types\webpack-sources\lib\SourceMapSource.d.ts   3   

All the code lines are an import from '.'

import { SourceLike } from '.';

I found this thread but this solution did not work. VS Code shows module not found even though WebPack build works. Even more errors are thrown if I change it.

this is my tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "module": "ES6",
    "jsx": "react",
    "allowJs": true,
    "outDir": "./tsdist/",
    "moduleResolution": "Classic"
  },
  "include": [
    "./TSApp/**/*"
  ],
  "exclude": [ "wwwroot", "node_modules" ]
}

This is my webpack.config.js

"use strict";
const { join } = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const { HotModuleReplacementPlugin } = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path')

module.exports = {
    entry: "./TSApp/file.ts",
    devtool: 'inline-source-map',
    output: {
        path: path.resolve("wwwroot/js"),
        filename: "site.js"
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-browser.js'
        },
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9999
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.(scss|css)$/,
                use: ["vue-style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.s(c|a)ss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        // Requires sass-loader@^7.0.0
                        options: {
                            implementation: require('sass'),
                            indentedSyntax: true // optional
                        },
                        // Requires sass-loader@^8.0.0
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                indentedSyntax: true // optional
                            },
                        },
                    },
                ],
            }
        ]
    },
    //loaders: [
    //    {
    //        test: /\.jsx?$/,
    //        loader: "babel-loader"
    //    }
    //],
    plugins: [
        //new CleanWebpackPlugin(),
        //new HtmlWebpackPlugin({
        //    template: "./src/index.html"
        //}),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
};
0 Answers
Related