Angular invalid configuration(Webpack)

Question

I am learning angular for about a month. I am following a series of video that I've found in internet. I got stuck here in this error as shown in picture below.

webpack.server.config.js code

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

module.exports = {
entry: { server: './server.ts' },
resolve: { extentions: ['.js', '.ts'] },
externals: [/{node_modules|main\..*\.js}/],
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
},
module: {
    rules: {
        test: /\.ts$/,
        loader: 'ts-loader'
    }
},
plugins: [
    new webpack.ContextReplacementPlugin(
        /(.+)?angular(\\|\/)core(.+)?/,
        path.join(__dirname, 'src'),
        {}
    ),
    new webpack.ContextReplacementPlugin(
        /(.+)?express(\\|\/)(.+)?/,
        path.join(__dirname, 'src'),
        {}
    )
  ]
}

Package.json

GregL · Accepted Answer · 2021-01-15 02:51:47Z

1

The clues are right there in the error message. rules needs to be an array of objects, not a single object; and extensions is spelled with an s where you have a second t.

Here is the fixed version:

webpack.server.config.js code

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

module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] }, // CHANGED
externals: [/{node_modules|main\..*\.js}/],
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
},
module: {
    rules: [{                           // CHANGED
        test: /\.ts$/,
        loader: 'ts-loader'
    }]                                  // CHANGED
},
plugins: [
    new webpack.ContextReplacementPlugin(
        /(.+)?angular(\\|\/)core(.+)?/,
        path.join(__dirname, 'src'),
        {}
    ),
    new webpack.ContextReplacementPlugin(
        /(.+)?express(\\|\/)(.+)?/,
        path.join(__dirname, 'src'),
        {}
    )
  ]
}

answered Jan 15, 2021 at 2:51

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KiRa Over a year ago

Thank you it works. I have some error. But I try to solve it.

Collectives™ on Stack Overflow

Angular invalid configuration(Webpack)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related