I can’t seem to figure out why I’m getting this console error when trying to run my plugin:
vendor-core-98e7eff694049858.min.js.br:15 ReferenceError: 'module' is not defined
at <anonymous> (PLUGIN_21_SOURCE)
at <anonymous> (PLUGIN_21_SOURCE:1)
at call (native)
at <eval> (PLUGIN_21_SOURCE:3)
webpack.config.js
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, argv) => {
const mode = argv.mode === 'production' ? 'production' : 'development';
const devtool = mode === 'production' ? false : 'inline-source-map';
return [
{
// Plugin code (Main Thread)
mode,
devtool,
entry: {
code: './src/code.ts',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
use: 'raw-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
},
{
// Plugin UI
mode,
devtool,
entry: {
ui: './src/ui.ts',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
exclude: /node_modules/,
},
{
test: /\.html$/,
use: 'html-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
fallback: {
fs: false,
path: false,
},
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
chunks: ['ui'],
inject: 'body',
}),
],
},
];
};
Pretty new to plugin development so not entirely sure even what to look into. Any guidance would be insanely helpful!