My project is built on top of this setup: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
Running webpack compiles a bundle that functions correctly in the browser.
However, running webpack --watch to recompile on file changes results in an error in the browser:
Uncaught ReferenceError: exports is not definedUpon inspecting the outputs of both commands, it appears that webpack --watch does not encompass the webpack bootstrap code or my modules — only the transpiled entry file.
webpack
- Includes all of my modules in a single file and utilizes webpack's module require method.
- For example:
var io = __webpack_require__(20);
webpack --watch
- Only includes my entry module - no other modules or usage of
__webpack_require__. - For example:
var io = require("socket.io-client");
Versions: - webpack: 3.7.1 - tsc: 1.8.10
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enabling sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
}