CODEWITHSUNDEEP
webpack
MonkBen
MonkBen

Reputation: 644

Webpack v5: Exclude on exclude no longer working

I'm migrating to webpack v5 and it appears that support for exclude within exclude is removed. I don't see anything about it in the migration guide though. Any ideas?

In webpack v4, I had the following in my webpack config file:

        {
            test: /\.(ts|js)$/,
            exclude: [
                {
                    // Exclude node_modules from running through babel-loader
                    test: path.resolve(__dirname, "node_modules"),
                    // Include (exclude from the exclusion) the MYCUSTOM folder.
                    // This is needed since MYCUSTOM itself isn't run through any transpilation but offered as a straight up typescript library.
                    exclude: path.resolve(
                        __dirname,
                        "node_modules/@MYORG/MYCUSTOM"
                    )
                }
            ],
            use: {
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    compact: false
                }
            }
        },

Now, in webpack v5 I get an error:

configuration.module.rules[1].exclude has an unknown property 'test'. These properties are valid: object { and?, not?, or? }

I'm not seeing any answers in the documentation as to why this was removed and what to use instead. Any suggestions?

Upvotes: 1

Views: 4049

Answers (3)

MonkBen
MonkBen

Reputation: 644

To exclude exclusions, use this configuration (example showing use for babel-loader and ts or js files).

    rules: [
      {
        test: /\.(ts|js)$/,
        exclude: [
          {
            // exclude all node_modules from running through babel-loader
            and: [path.resolve(__dirname, "node_modules")],
            // exception: include these node_modules
            not: [
              // add any node_modules that should be run through babel here
              path.resolve(
                rootPath,
                "node_modules/@MY_ORG/MY_PACKAGE1"
              ),
              path.resolve(
                  rootPath,
                  "node_modules/@MY_ORG/MY_PACKAGE2"
              ),
            ]
          }
        ],
        use: [
          {
            loader: "babel-loader"
          }
        ]
      }
    ]

Upvotes: 6

MonkBen
MonkBen

Reputation: 644

@Scott Martin, I tried that with no success. The only thing I found to work was using exclude with "not" and "and" as shown here:

                exclude: [
                {
                    and: [path.resolve(rootPath, "node_modules")],
                    not: [
                        path.resolve(
                            rootPath,
                            "node_modules/my_repo"
                        )
                    ]
                }
            ],

Upvotes: 3

Scott Martin
Scott Martin

Reputation: 1367

My config also had an exclude-in-exclude for the same reason, and I just ran into this issue when upgrading from Webpack 4 to 5. I have to agree, the documentation is really far too skimpy. (I've opened an issue asking them to add more examples!)

It seems that they've simplified the format and you specify exclude and include conditions directly. Try this:

{
    test: /\.(ts|js)$/,
    exclude: path.resolve(__dirname, "node_modules"),
    include: path.resolve(__dirname, "node_modules/@MYORG/MYCUSTOM"),
    // use: ...
},

Upvotes: 0

Related Questions