Having recently started diving into typescript and webpack programming, I must admit that my background in this area is limited. Despite searching through similar questions on Stack Overflow, none of the solutions provided so far have resolved my issue:
I am using vscode, and during my build process, I encounter the following warnings:
WARNING in ./src/amxcanvas.ts 3:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
WARNING in ./src/amxmisc.ts 3:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./src/amxcanvas.ts
Since I am faced with errors (module not found) when running the resulting javascript code, I believe addressing these warnings should be my first step.
This is the webpack.config.js file I am using:
var path = require("path");
module.exports = {
entry: path.join(__dirname, '/src', '/amxcanvas.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'amxcanvas.bundle.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'var',
library: 'AmxCvs'
}
};
The content of amxcanvas.ts begins as follows:
import * as drawable from "./amxdrawables";
import * as misc from "./amxmisc";
export function amxCanvasInit(canvasId:string, shapes:drawable.IDrawable[]) {
var s = new CanvasState(document.getElementById(canvasId), shapes);
}
The content of amxmisc.ts starts like this:
export function generateUUID(): string {
return "";
}
var gripSize:number = 7;
I have been struggling with this for almost a week now. Can anyone spot what I might be doing incorrectly?