'fs' package is just a placeholder because 'fs' is a built-in Node function, but this package looks for an 'fs' package which causes webpack compilation to fail. Specifically it says:
Module not found: Error: Can't resolve 'fs' in 'C:\Users\...\node_modules\wordlist-english'
[1] ERROR in ./node_modules/wordlist-english/index.js 3:10-23
I have tried numerous solutions suggested online such as editing webpack config, package.json and env variables, as well as using patch-package to point this package to 'fs-extra' or 'graceful-fs' instead. The last solution is the only one that made any difference, but that led to issues with 'graceful-fs' and 'jsonfile' that couldn't be fixed by patch-package so it's really not viable. I also tried adding node: { fs: 'empty' }
to webpack.config.js instead of having "browser": { "fs": false }
in my package.json - no joy.
{
"name": "wordle",
"version": "0.1.0",
"description": "A replica of NYT Wordle game",
"main": "server.js",
"private": true,
"dependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@extra-fs/constants": "^3.0.67",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"assert": "^2.1.0",
"axios": "^1.5.0",
"bootstrap": "^5.3.2",
"constants-browserify": "^1.0.0",
"cors": "^2.8.5",
"dictionary-en": "^3.2.0",
"express": "^4.18.2",
"express-validator": "^7.0.1",
"fs": "^0.0.1-security",
"fs-extra": "^11.1.1",
"fs.realpath": "^1.0.0",
"graceful-fs": "^4.2.11",
"import-meta-resolve": "^3.0.0",
"jsonfile": "^6.1.0",
"path": "^0.12.7",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.2",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2",
"sass": "^1.68.0",
"sass-loader": "^13.3.2",
"stream-browserify": "^3.0.0",
"web-vitals": "^2.1.4",
"wordlist-english": "^1.2.1"
},
"scripts": {
"server": "nodemon server",
"dev": "concurrently \"npm run server\" \"npm run start\" --trace-warnings --stats-children",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
"prepare": "husky install",
"postinstall": "npx patch-package"
},
"repository": {
"type": "git",
"url": "https://github.com/jaxrein/wordle.git"
},
"author": "Jax Reinagel",
"type": "module",
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
"browser": {
"fs": false,
"path": false,
"os": false,
"net": false,
"tls": false
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
"devDependencies": {
"@babel/core": "^7.23.0",
"@babel/plugin-transform-private-property-in-object": "^7.22.11",
"@babel/preset-env": "^7.22.20",
"babel-jest": "^29.7.0",
"concurrently": "^8.2.1",
"cross-env": "^7.0.3",
"dotenv-webpack": "^8.0.1",
"eslint-config-prettier": "^9.0.0",
"husky": "^8.0.3",
"jest": "^27.5.1",
"lint-staged": "^14.0.1",
"nodemon": "^3.0.1",
"prettier": "3.0.3",
"process": "^0.11.10"
}
}
const webpack = require('webpack');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
mode: isDevelopment ? 'development' : 'production',
context: path.join(__dirname, '/wordle/src'),
devtool: 'eval-source-map',
entry: ['./index.jsx'],
output: {
path: path.join(__dirname, '/wordle/public/'),
filename: 'bundle.js',
publicPath: '/client/public/',
},
devServer: {
static: {
directory: path.join(__dirname, '/wordle/'),
watch: true,
},
compress: true,
port: 3000,
hot: true,
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: [
/\.wexbim$/,
/\.docx$/,
/\.csv$/,
/\.mp4$/,
/\.xlsx$/,
/\.doc$/,
/\.avi$/,
/\.webm$/,
/\.mov$/,
/\.mp3$/,
/\.pdf$/,
],
use: ['file-loader'],
type: 'javascript/auto',
},
{
test: /\.(png|jpg)$/,
dependency: { not: ['url'] },
use: ['url-loader?limit=200000'],
type: 'javascript/auto',
},
{
test: /\.(gif)$/,
use: [
{
loader: 'file-loader',
options: {
query: {
name: 'assets/[name].[ext]',
},
},
},
],
type: 'javascript/auto',
},
{
test: /\.jsx\.html$/,
exclude: /node_modules/,
use: ['babel!react-pure-html-component'],
},
{
test: /\.css$/,
use: ['css-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.jsx.html'],
modules: [path.join(__dirname, 'node_modules')],
alias: {
process: "process/browser"
},
fallback: {
'process/browser': false,
"fs": false,
"os": false,
"path": false,
"assert": require.resolve("assert/"),
"stream": require.resolve("stream-browserify"),
"constants": require.resolve("constants-browserify"),
},
plugins: [
new context.webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
resource.request = resource.request.replace(/^node:/, '')
}),
new webpack.ProvidePlugin({
process: 'process',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env)
}),
new Dotenv()
],
target: 'node',
devtool: options.devtool,
},
}