CODEWITHSUNDEEP
typescriptvisual-studio-code
tony09uk
tony09uk

Reputation: 2991

cannot redeclare block-scoped variable 'jQuery'

The question

How do I stop VS Code from showing declare var jQuery:any; as an error?

More info

vs code cannot redeclare block-scoped variable 'jQuery'

What i've done

After a quick search I found a suggestion this, which suggests that the jQuery variable has already been defined elsewhere in the same code block. So I delete this reference. VS Code stops complaining but the console show the below error and my app will not compile.

ERROR in src/app/app.config.ts(34,25): error TS2304: Cannot find name 'jQuery'. src/app/pages/pages.component.ts(31,27): error TS2304: Cannot find name 'jQuery'.

So I re-add the line i just removed and my application complies but I get the below error in the browser (in dev tools console)

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:11:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:11:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4736)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

So I terminate the app and restart it. Now the app runs with no errors but VS Code shows that same problem again.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Upvotes: 4

Views: 3270

Answers (2)

lwallent
lwallent

Reputation: 242

I assume you have two problems.

The first being declaring jQuery (you are already using @types/jquery, right?). VS Code is probably right about it already being declared. So remove that.

The second problem is that some of your components cannot find jQuery when running webpack, right?

Here I would suggest you use the ProvidePlugin in your webpack config:

//=============================================
// Provide PLUGIN - making things available
//=============================================
const provideVars = new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    'window.jQuery': 'jquery'
}); 

module.exports = {
  ...
  plugins: [
    provideVars
  ],
  ...

};

Upvotes: 1

Mayurkumar Patel
Mayurkumar Patel

Reputation: 42

May be below steps will solve your problem. Let me know your comments.

1.) install jquery types and jquery from npm

npm install jquery
npm install @types/jquery

2.) add jquery to .angular-cli.json

      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
      ],

3.) declare in your pages.component.ts file.

declare let $: any;
declare let jQuery: any;

Upvotes: 1

Related Questions