Rennnn
Rennnn

Reputation: 85

Webpack is throwing lots of errors from node modules when running watch-development

When running watch-development I am plagued with so many errors from my node modules and I'm not sure where to begin to even resolve some of them. Maybe something is wrong with my webpack configuration but I have tried looking for a solution for days now and have found nothing

Some of the errors:

      TS2307: Cannot find module 'rxjs-compat/operators/multicast'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts(1,15)
      TS2307: Cannot find module 'rxjs-compat/operators/observeOn'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts(1,15)
      TS2307: Cannot find module 'rxjs-compat/operators/onErrorResumeNext'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts(1,15)
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(37,3)
      TS2552: Cannot find name 'expect'. Did you mean 'expected'?
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(40,1)
      TS2582: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(42,3)
      TS2304: Cannot find name 'expect'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(45,3)

I have hundreds of errors like this all coming from my node modules, Mostly complaining it can't find a module, but also some complaining it cannot find name 'x'

this is my webpack config:

/// <binding />
"use strict";

module.exports = (env, options) => {


    const path = require('path');
    const webpack = require('webpack');
    const CleanWebpackPlugin = require('clean-webpack-plugin');

    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const VueLoader = require("vue-loader");

    let pathsToClean = ['dist/*.*', 'dist/fonts/*.*', 'dist/images/*.*'];

    let cleanOptions = {
        root: __dirname + '/wwwroot/',
        verbose: true,
        dry: false
    };

    return {
        mode: 'development',
        entry: {
            app: './wwwroot/VueApp/Home/app.ts',
            mainCss: './wwwroot/VueApp/CSS/site.scss'
        },
        devtool: 'source-map',
        plugins: [
            new CleanWebpackPlugin(pathsToClean, cleanOptions),
            new webpack.ProvidePlugin({
                Popper: ['popper.js', 'default'],
                moment: 'moment',
                vueResource: 'vue-resource',
                vueRouter: 'vue-router',
                vuex: 'vuex'
            }),
            new VueLoader.VueLoaderPlugin(),
            new MiniCssExtractPlugin({
                filename: "[name].bundle.css"
            })
        ],
        output: {
            publicPath: "/dist/",
            path: path.join(__dirname, '/wwwroot/dist/'),
            filename: '[name].bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /(node_modules)/,
                    query: {
                        presets: [
                            ['env', { targets: { uglify: true } }]
                        ]
                    }
                },
                {
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    loader: "ts-loader",
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        { loader: 'css-loader', options: { minimize: true, sourceMap: false } },
                        {
                            loader: 'sass-loader', options: { sourceMap: false } }
                    ],
                },
                {
                    test: /\.(svg|png|jpg|gif)$/, 
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8 * 1024,
                            name: './images/[name].[ext]'
                        }
                    }
                },
                {
                    test: /\.(eot|ttf|woff|woff2)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8 * 1024,
                            name: './fonts/[name].[ext]'
                        }
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        resolve: {
            alias: {
                vue: 'vue/dist/vue.js'
            },
            extensions: ['.ts', '.js', '.vue', '.json']
        }
    };
};



this is what my file structure looks like:

https://ibb.co/xjQMCX0

Upvotes: 0

Views: 845

Answers (0)

Related Questions