Invalid configuration object - configuration.resolve.plugins[0] misses the property 'apply'

[themaskedavenger]

trafficstars

When adding the webpack plugin, I'm getting an error saying:

Webpack threw error: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.␊
     - configuration.resolve.plugins[0] misses the property 'apply'. Should be:␊
       function␊
       -> The run point of the plugin, required method.,

Using Webpack 5.24.4

webpack config:

{
    entry,
    target: 'web',
    output: {
      path: outputDir,
      filename: '[name].js',
    },
    mode: process.env.NODE_ENV as 'development' | 'production' | 'none' | undefined,
    resolve: {
      extensions: [
        '.ts',
        '.tsx',
        '.js',
        '.jsx',
        'ttf',
        'eot',
        'otf',
        'svg',
        'png',
        'woff',
        'woff2',
      ],
      plugins: [new TsConfigPathsPlugin() as any],
    },
    module: {
      rules: [
        {
          test: /\.(ttf|eot|otf|svg|png)$/,
          loader: 'file-loader',
        },
        {
          test: /\.(woff|woff2)$/,
          loader: 'url-loader',
        },
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            sourceType: 'unambiguous',
            presets: [
              [
                '@babel/preset-env',
                {
                  corejs: '3.0.0,',
                  useBuiltIns: 'usage',
                },
              ],
              '@babel/preset-react',
              '@babel/preset-typescript',
            ],
            plugins: [
              'css-modules-transform',
              [
                'babel-plugin-react-scoped-css',
                {
                  include: '.scoped.(sa|sc|c)ss$',
                },
              ],
              '@babel/plugin-proposal-class-properties',
            ],
          },
        },
        {
          test: /\.(sc|c|sa)ss$/,
          use: [
            'style-loader',
            'css-loader',
            'scoped-css-loader',
            'sass-loader',
          ],
        },
      ],
    },
  }

Similar to https://github.com/dividab/tsconfig-paths-webpack-plugin/issues/61, except it is stopping Webpack from compiling.

Note: am using typescript and manually calling webpack, so importing the plugin like: import TsConfigPathsPlugin from 'tsconfig-paths-webpack-plugin';. When I inspect the object created by const p = new TsConfigPathsPlugin(), it doesn't have an apply method, although I can evaluate and p.apply returns a function.

[jonaskello]

@themaskedavenger what version of the plugin are you using?

@Brian-McBride perhaps you can take look at this if it is something that should be supported by your PR?

[themaskedavenger]

Thanks for the quick response! Currently using version 3.4.1.

[Brian-McBride]

Webpack 5 has some seriously screwed-up typing. The project is doing this insane thing where they use comments to "auto-generate" types. It seems way more work than just writing modules in typescript.

Apply is in the class. Maybe, there is a case where the plugin didn't create an instance properly and the error was in a try/catch without any output. It could just be that TsconfigPathPlugin didn't get constructed.

Also, in your code, you have TsConfigPathsPlugin instead of TsconfigPathsPlugin To me, that indicates that you might be pulling a very old version from somewhere. Looking back at the git-logs, that was changed a few years ago.

You can set up a test like this and see what is up. I should really check to see if someone wrote a good webpack testing library.

  it(`Test to ensure Apply exists and is working`, async (done) => {
    const webpackSettings: Configuration = {
      entry: `${__dirname}/../../example/src/index.ts`,
      target: "web",
      output: {
        path: path.join(__dirname, "../../temp"),
        filename: "[name].js",
      },
      mode: "development",
      resolve: {
        extensions: [
          ".ts",
          ".tsx",
          ".js",
          ".jsx",
          "ttf",
          "eot",
          "otf",
          "svg",
          "png",
          "woff",
          "woff2",
        ],
        plugins: [
          new TsconfigPathsPlugin({
            configFile: `${__dirname}/../../example/tsconfig.json`,
          }),
        ],
      },
      module: {
        rules: [],
      },
    };
    // Build compiler
    const compiler = webpack(webpackSettings);
    const pluginInstance = compiler?.options?.resolve?.plugins?.find(
      (plugin) => plugin instanceof TsconfigPathsPlugin
    );
    if (!pluginInstance) {
      return done(`TsconfigPathsPlugin not loaded in webpack settings`);
    }
    expect(pluginInstance instanceof TsconfigPathsPlugin).toBeTruthy();
    expect((pluginInstance as TsconfigPathsPlugin).apply).toBeDefined();

    inspect(pluginInstance, false, 5, true);
    // Run compiler
    compiler.run((err, stats) => {
      if (err) {
        done(err);
        return;
      }
      expect(stats).toBeDefined();
      const details = stats?.toJson();
      expect(details?.errorsCount).toEqual(0);
      done();
    });
  });