'How to load all javascript in a directory raw with webpack?

I have a bunch of non-module-ized javascript files that are third-party things that I can't (or rather, really don't want to) edit/customize. I'm trying to load them into my React page (that I created with create-react-app, and then ejected so that I can edit the webpack stuff).

Right now, I'm putting all of this third-party stuff into a special folder include, so that I can tell webpack to go get all of that stuff and package it special. This site suggested I used raw-loader but apparently that's deprecated so I've got the following:

module.exports =
  ...
  module: {
    ...
    rules: {
      ... 
        {
          test: /\.js$/,
          include: [
            path.resolve(__dirname, "include")
          ],
          type: "asset/source"
        },

I then import these files the usual way:

import drawing_utils from "./include/drawing_utils.js"

But when npm run building, I get complaints:

src/include/drawing_utils.js
  Line 7:47:    'globalThis' is not defined                                            no-undef
  Line 7:109:   Unexpected use of 'self'                                               no-restricted-globals
  Line 7:115:   Unexpected use of 'self'                                               no-restricted-globals
  Line 10:117:  Unexpected use of 'self'                                               no-restricted-globals

The source code for drawing_utils.js is minified (and I don't have access to the unminified version), so I'm not 100% sure how to delve further, but I'd rather not do that anyway because when I test these scripts in a static html page (loading them with <script>, they "just work".

How can I use webpack to load my third-party javascript files?

webpack

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to load all javascript in a directory raw with webpack?

Sources

Related Questions