I have a react/typescript app configured with webpack. When I am starting it up, I get an error from the js-sha256 package. I don't have that package directly, it's a dependency of the keycloak-js package. Not sure what to do as I am aware I am using an old keycloak-js version but when I set it to the latest, it is still showing the same error.
Error
ERROR in ./node_modules/js-sha256/src/sha256.js 20:53-60
Module not found: Error: Can't resolve 'process/browser' in '/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/js-sha256/src'
resolve 'process/browser' in '/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/js-sha256/src'
Parsed request is a module
using description file: /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/js-sha256/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/js-sha256/src/node_modules doesn't exist or is not a directory
/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/js-sha256/node_modules doesn't exist or is not a directory
/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/node_modules doesn't exist or is not a directory
looking for modules in /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules
/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/process doesn't exist
/Users/dandold/Workspace/businesses/buddydata/node_modules doesn't exist or is not a directory
/Users/dandold/Workspace/businesses/node_modules doesn't exist or is not a directory
/Users/dandold/Workspace/node_modules doesn't exist or is not a directory
/Users/dandold/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./node_modules/keycloak-js/dist/keycloak.js 21:38-58
@ ./src/services/UserService.ts 7:0-35 14:15-23
@ ./src/index.tsx 6:0-53 11:0-24
ERROR in ./node_modules/js-sha256/src/sha256.js
Cannot read properties of undefined (reading 'module')
TypeError: Cannot read properties of undefined (reading 'module')
at ProvidedDependencyTemplate.apply (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/dependencies/ProvidedDependency.js:122:61)
at JavascriptGenerator.sourceDependency (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/javascript/JavascriptGenerator.js:206:12)
at JavascriptGenerator.sourceModule (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/javascript/JavascriptGenerator.js:112:9)
at JavascriptGenerator.generate (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/javascript/JavascriptGenerator.js:98:8)
at NormalModule.codeGeneration (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/NormalModule.js:1204:22)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3329:22
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Cache.js:91:34
at Array.<anonymous> (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Cache.js:91:19
at Hook.eval [as callAsync] (eval at create (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
at Cache.get (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Cache.js:75:18)
at ItemCacheFacade.get (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/CacheFacade.js:111:15)
at Compilation._codeGenerationModule (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3322:9)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3229:11
at arrayIterator (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:3467:9)
at timesSync (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:3463:5)
at runIteration (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3209:13)
at Compilation._runCodeGenerationJobs (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3284:3)
at Compilation.codeGeneration (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3191:8)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:3018:11
at Hook.eval [as callAsync] (eval at create (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/Hook.js:18:14)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:2968:36
at Hook.eval [as callAsync] (eval at create (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/Hook.js:18:14)
at Compilation.seal (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:2959:27)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compiler.js:1187:20
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:2757:4
at eval (eval at create (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:29:1)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:2830:7
at Object.each (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:2850:39)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:361:18
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:2830:7
at Object.each (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/neo-async/async.js:2850:39)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:51:16
at Hook.eval [as callAsync] (eval at create (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/tapable/lib/Hook.js:18:14)
at Compilation.finish (/Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compilation.js:2714:28)
at /Users/dandold/Workspace/businesses/buddydata/app.buddydata.io/node_modules/webpack/lib/Compiler.js:1182:19
at processTicksAndRejections (node:internal/process/task_queues:78:11)
@ ./node_modules/keycloak-js/dist/keycloak.js 21:38-58
@ ./src/services/UserService.ts 7:0-35 14:15-23
@ ./src/index.tsx 6:0-53 11:0-24
webpack 5.75.0 compiled with 2 errors in 4626 ms
ℹ ｢wdm｣: Failed to compile.
Package.json
{
"main": "src/index.js",
"scripts": {
"start": "TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack serve"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.17.9",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@headlessui/react": "^1.4.1",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"axios": "^1.2.1",
"keycloak-js": "11.0.3",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-datepicker": "^4.2.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.3.0",
"redux": "^4.2.0",
"redux-axios-middleware": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.4.1",
"svg-sprite-loader": "^6.0.11"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-decorators": "^7.16.7",
"@babel/plugin-proposal-export-default-from": "^7.18.9",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.9",
"@types/redux-logger": "^3.0.9",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.7.2",
"babel-loader": "^8.2.1",
"babel-plugin-module-resolver": "^4.1.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^3.0.0",
"file-loader": "^6.2.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^5.5.0",
"image-webpack-loader": "^8.1.0",
"mini-css-extract-plugin": "^2.6.1",
"prop-types": "^15.7.2",
"react-refresh": "^0.14.0",
"redux-devtools-extension": "^2.13.9",
"style-loader": "^1.0.0",
"ts-node": "^10.3.0",
"typescript": "^4.6.2",
"webpack": "^5.74.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^3.11.2"
}
}
webpack.config.ts
import path from 'path'
import webpack, { Configuration as WebpackConfiguration } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import CopyPlugin from 'copy-webpack-plugin'
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration
}
const { PUBLIC_PATH = `https://localhost:8080/`, NODE_ENV = 'development' } = process.env as {
PUBLIC_PATH?: string
NODE_ENV?: Configuration['mode']
}
const buildConfig = async (): Promise<Configuration> => {
const config: Configuration = {
mode: NODE_ENV,
devtool: 'hidden-source-map',
entry: '@/index.tsx',
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
extensions: ['.ts', '.tsx', '.js'],
},
output: {
publicPath: PUBLIC_PATH,
path: path.resolve(__dirname, '.tmp'),
filename: '[name].js',
chunkFilename: '[name].js'
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
exclude: /\.module\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
// For styles/helpers/_fonts.sass
url: (url): boolean => !url.startsWith('/fonts/'),
importLoaders: 2,
modules: {
mode: 'local',
localIdentName: '[local]',
},
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
quietDeps: true,
},
},
},
],
},
{
test: /\.module\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
url: (url): boolean => !url.startsWith('/fonts/'),
importLoaders: 2,
sourceMap: false, // turned off as causes delay
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
quietDeps: true,
},
},
},
],
},
{
test: /\.(gif|png|jpe?g)$/,
use: ['file-loader', 'image-webpack-loader'],
},
{
test: /\.svg$/,
oneOf: [
{
include: /(\/node_modules\/@cloudbees\/)|(\/assets\/images\/icons\/svg\/)/,
exclude: /\/semantic-ui-css\//,
use: 'svg-sprite-loader',
},
{
use: ['file-loader', 'image-webpack-loader'],
},
],
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader',
exclude: /\/semantic-ui-css\//,
options: {
name: 'fonts/[name].[ext]',
},
},
{
test: /\.(eot|ttf|woff|woff2|)$/,
include: /\/semantic-ui-css\//,
loader: 'file-loader',
options: {
name: 'fonts/semantic/[name].[ext]',
},
},
],
},
plugins: [
new MiniCssExtractPlugin(),
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
new CopyPlugin({
patterns: [
{ from: "public/keycloak/keycloak.json" },
{ from: "public/keycloak/silent-check-sso.html" },
{ from: 'assets' }
],
}),
// When running locally, if you want to allow env vars declared on the command line
// to be visible in code via process.env, add them here.
new webpack.EnvironmentPlugin({}),
],
}
if (NODE_ENV === 'development') {
config.devtool = 'eval-cheap-module-source-map'
config.devServer = {
headers: { 'Access-Control-Allow-Origin': '*' },
public: 'http://localhost:8080',
disableHostCheck: true,
hot: true,
hotOnly: true,
}
const ReactRefreshPlugin = (await import('@pmmmwh/react-refresh-webpack-plugin'))
.default
config.plugins.push(new ReactRefreshPlugin())
config.plugins.push(
// fix "process is not defined" error
new webpack.ProvidePlugin({
process: 'process/browser',
})
)
//Make possible to link ("yarn link") a dependency that has react as peerDependency (eg react-honeyui)
//See https://stackoverflow.com/a/31170775
config.resolve.alias['react'] = path.resolve(__dirname, 'node_modules/react')
} else {
config.performance = {
hints: 'error',
maxEntrypointSize: 6000000,
maxAssetSize: 4800000,
}
}
return config
}
export default buildConfig
tsconfig-for-webpack-config.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true
}
}
.babelrc.js
module.exports = (api) => {
// This caches the Babel config by environment.
api.cache.using(() => process.env.NODE_ENV)
const plugins = [
[
'module-resolver',
{
alias: {
'@': './src',
},
},
],
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-export-default-from',
]
if (api.env('development')) {
plugins.push('react-refresh/babel')
}
if (api.env('test')) {
plugins.push('@babel/plugin-transform-runtime')
}
return {
plugins,
presets: ['@babel/env', '@babel/typescript', '@babel/react'],
}
}
This is my setup and from what I can see it's all in order, but obviously it's not! Can anyone point me in the right direction so I can get this compiled and running
yarn add processsolved the issue for me