Reputation: 9
I've built a react front end application that draws data from a Wordpress site via the WP REST API. It was working great for weeks, but I messed with my webpack config and package.json to try to get it working on Atlas through WPEngine. They don't offer support for trial users. I've git pulled down a prior version, but I still can't get it working locally. My browser isn't able to find the root. I've checked my port and it hasn't changed. I can't figure out why it's not finding the site and just returning 404 in the console and "Cannot get /" in the page. I tried uninstalling and reinstalling all dependencies, too. Any advice? I'm sure I'm missing something stupid.
Here's my package.json, with some info redacted:
"name": "react-workshop",
"version": "1.0.0",
"description": ":fire: Boilerplate React Application",
"main": "index.js",
"proxy": "<REDACTED>",
"scripts": {
"preinstall": "npx npm-force-resolutions",
"webpack-dev-server": "webpack-dev-server",
"dev": "webpack serve --mode=development",
"prod": "webpack --mode=production",
"build": "npm run prod",
"start": "npm run prod"
},
"repository": {
"type": "git",
"url": "git+<REDACTED>"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "<REDACTED>"
},
"homepage": "<REDACTED>",
"dependencies": {
"axios": "^1.7.2",
"cors": "^2.8.5",
"css-loader": "^5.2.6",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"file-loader": "^6.2.0",
"node-polyfill-webpack-plugin": "^4.0.0",
"path-browserify": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.23.1",
"react-router-dom": "^6.23.1",
"react-scripts": "^5.0.1",
"stream": "^0.0.3",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"util": "^0.12.5"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/preset-env": "^7.14.4",
"@babel/preset-react": "^7.24.7",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.1",
"node-sass": "^9.0.0",
"path": "^0.12.7",
"process": "^0.11.10",
"react-error-overlay": "^6.0.9",
"sass": "^1.77.6",
"sass-loader": "^14.2.1",
"webpack": "^5.92.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
and my webpack config:
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const webpack = require('webpack');
const dotenv = require('dotenv');
dotenv.config();
module.exports = {
context: __dirname,
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'main.js',
publicPath: "./"
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jp?g|svg|gif)$/,
use: [{
loader: "file-loader"
}]
}
]
},
plugins: [
new NodePolyfillPlugin(),
new HtmlWebPackPlugin({
template: path.resolve( __dirname, 'public/index.html' ),
filename: 'index.html'
}),
new webpack.ProvidePlugin({
process: 'process/browser.js',
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env)
})
],
resolve: {
alias: {
components: path.resolve(__dirname, './../src/components'),
assets: path.resolve(__dirname, './../src/assets'),
},
fallback: {
path: require.resolve("path-browserify") }
}
};
Upvotes: 0
Views: 38