Hello again. I found a solution to my problems. Hereās my code. Just a note that my webpack knowledge is rather beginner.
The highlights here is that I installed npm i moralis @walletconnect/web3-provider process, defined process and Buffer in the plugins, and defined empty fallback modules for crypto stream assert http https os
With this code I verified I can build the dev bundle, initialize Moralis, and login with metamask without throwing an error.
package.json
{
"name": "webpack-starter",
"version": "1.0.0",
"description": "A light foundation for your next frontend project based on webpack.",
"scripts": {
"lint": "npm run lint:styles; npm run lint:scripts",
"lint:styles": "stylelint src",
"lint:scripts": "eslint src",
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js",
"start": "webpack serve --config webpack/webpack.config.dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wbkd/webpack-starter.git"
},
"keywords": [
"webpack",
"startkit",
"frontend",
"es6",
"javascript",
"webdev"
],
"author": "webkid.io",
"license": "MIT",
"bugs": {
"url": "https://github.com/wbkd/webpack-starter/issues"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.15.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^9.0.1",
"cross-env": "^7.0.3",
"css-loader": "^6.2.0",
"eslint": "^7.32.0",
"eslint-webpack-plugin": "^3.0.1",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.0",
"node-sass": "^6.0.1",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-webpack-plugin": "^3.0.1",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@walletconnect/web3-provider": "^1.6.5",
"core-js": "^3.16.1",
"d3": "^7.0.0",
"moralis": "^0.0.39",
"process": "^0.11.10"
}
}
webpack.common.js
const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: Path.resolve(__dirname, '../src/scripts/index.js'),
},
output: {
path: Path.join(__dirname, '../build'),
filename: 'js/[name].js',
},
optimization: {
splitChunks: {
chunks: 'all',
name: false,
},
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [{ from: Path.resolve(__dirname, '../public'), to: 'public' }]
}),
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, '../src/index.html'),
}),
new webpack.ProvidePlugin({ process: 'process/browser' }),
new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] })
],
resolve: {
alias: {
'~': Path.resolve(__dirname, '../src'),
},
fallback: {
'crypto': false,
'stream': false,
'assert': false,
'http': false,
'https': false,
'os': false
}
},
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
},
],
},
};
src/index.js
import '../styles/index.scss';
import Moralis from 'moralis';
if (process.env.NODE_ENV === 'development') {
require('../index.html');
}
Moralis.initialize(INSERT_APP_ID);
Moralis.serverURL = INSERT_SERVER_URL;
async function login() {
let user = Moralis.User.current();
if (!user) {
user = await Moralis.Web3.authenticate();
}
console.log('logged in user:', user?.get('ethAddress'));
}
async function logout() {
await Moralis.User.logOut();
window.location.reload();
}
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logout;
