How to declare third party modules as globals so i wont need to import?(Webpack5 with typescript)

Viewed 276

In my React with Webpack project, i declare some modules as globals so i don't have to import them every time i want to use them.

In my Webpack file:

plugins: [
        new webpack.ProvidePlugin({
            '_': 'lodash',
            'React': 'react',
            'moment': 'moment'
        })
   ]

Now i can use _,React,moment everywhere without importing it explicitly.

After adding Typescript to the project i get errors as this:

'moment' refers to a UMD global, but the current file is a module. Consider adding an import instead.

'_' refers to a UMD global, but the current file is a module. Consider adding an import instead.

My tsconfig file:

{
"compilerOptions": {
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
},
"include": [
    "src/index.tsx"
  ]
}

How can i tell typescript that these libraries are already global and that they exist?

1 Answers

Managed to solve this by adding the following to my tsconfig file

"allowUmdGlobalAccess": true,
Related