How to add my own javascript file to react template (webpack config) #816

New Issue

fergalmoran · 2025-08-09T17:17:47Z

fergalmoran commented

2025-08-09 17:17:47 +00:00

Originally created by @bugproof on 4/20/2017

I generated react template with yeoman. I want to add my own javascript files to the bundle. I've created it in ClientApp/js/myscripts.js beside ClientApp/components/*.tsx. I don't know what to do to include it in my bundle. Webpack configuration is black magic to me. Could anyone help me?

There is webpack.config.js and webpack.config.vendor.js I can't see the difference in these 2 files. I feel like a lost sheep.

Currently I resolved it like this:

Added

...
  "compilerOptions": {
    "allowJs": true
...

to tsconfig.json and imported it in .tsx file like this:
import './js/myscripts.js'

But the script uses jQuery and now I get

myscripts.js:25 Uncaught ReferenceError: $ is not defined

Even if I import before like:


import $ from "jquery"; //or:
import * as $ from "jquery";

*Originally created by @bugproof on 4/20/2017* I generated react template with yeoman. I want to add my own javascript files to the bundle. I've created it in ClientApp/js/myscripts.js beside ClientApp/components/*.tsx. I don't know what to do to include it in my bundle. Webpack configuration is black magic to me. Could anyone help me? There is webpack.config.js and webpack.config.vendor.js I can't see the difference in these 2 files. I feel like a lost sheep. Currently I resolved it like this: Added ``` ... "compilerOptions": { "allowJs": true ... ``` to tsconfig.json and imported it in .tsx file like this: `import './js/myscripts.js'` But the script uses jQuery and now I get > myscripts.js:25 Uncaught ReferenceError: $ is not defined Even if I import before like: ``` import $ from "jquery"; //or: import * as $ from "jquery"; ```

fergalmoran closed this issue

2025-08-09 17:17:47 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#816