Hi,
I have a React project that works perfectly fine in development. I have pushed the repo to github, connected it to Netlify and launched a deployment.
The deployment fails because it can’t find any page from app.tsx (they are imported as aliases).
The log is:
12:39:06 PM: $ yarn build
12:39:06 PM: yarn run v1.22.4
12:39:06 PM: $ webpack --node-env production
12:39:07 PM: Failed to load ./.env.
12:39:42 PM: assets by status 1.35 MiB [cached] 41 assets
12:39:42 PM: Entrypoint main = 941.e941524a4fcef9548d1f.bundle.js main.e1e4578451da67fb40a4.bundle.js 2 auxiliary assets
12:39:42 PM: orphan modules 1.47 MiB [orphan] 778 modules
12:39:42 PM: runtime modules 8.87 KiB 13 modules
12:39:42 PM: cacheable modules 2.51 MiB
12:39:42 PM: modules by path ./node_modules/ 1.84 MiB 262 modules
12:39:42 PM: modules by path ./src/ 682 KiB
12:39:42 PM: modules by path ./src/components/ 109 KiB 16 modules
12:39:42 PM: modules by path ./src/pages/ 349 KiB 12 modules
12:39:42 PM: modules by path ./src/containers/ 54 KiB 10 modules
12:39:42 PM: modules by path ./src/utils/ 28.7 KiB 8 modules
12:39:42 PM: modules by path ./src/api/ 77.2 KiB 2 modules
12:39:42 PM: modules by path ./src/stores/*.ts 2.88 KiB 2 modules
ERROR in ./src/app.tsx 6:0-30
Module not found: Error: Can't resolve 'pages/home' in '/opt/build/repo/src'
resolve 'pages/home' in '/opt/build/repo/src'
Parsed request is a module
using description file: /opt/build/repo/package.json (relative path: ./src)
aliased with mapping 'pages': '/opt/build/repo/src/pages' to '/opt/build/repo/src/pages/home'
using description file: /opt/build/repo/package.json (relative path: ./src)
My webpack config is:
/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const isProductionMode = (mode) => mode === "production";
module.exports = (env) => {
const nodeEnv = env.WEBPACK_SERVE ? "development" : "production";
return {
mode: nodeEnv,
entry: "./src/index.tsx",
output: {
path: path.join(__dirname, "./build"),
filename: "[name].[contenthash].bundle.js",
publicPath: "/",
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
alias: {
api: path.resolve(__dirname, "src/api/"),
assets: path.resolve(__dirname, "src/assets/"),
components: path.resolve(__dirname, "src/components/"),
containers: path.resolve(__dirname, "src/containers/"),
data: path.resolve(__dirname, "src/data/"),
i18n: path.resolve(__dirname, "src/i18n/"),
models: path.resolve(__dirname, "src/models/"),
pages: path.resolve(__dirname, "src/pages/"),
routes: path.resolve(__dirname, "src/routes/"),
src: path.resolve(__dirname, "src/"),
stores: path.resolve(__dirname, "src/stores/"),
utils: path.resolve(__dirname, "src/utils/"),
},
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.(png|jpg|jpeg|woff2)$/, use: ["file-loader"] },
{
test: /\.svg$/,
use: [
{ loader: "babel-loader" },
{
loader: "react-svg-loader",
options: {
jsx: true,
},
},
],
},
],
},
devServer: {
historyApiFallback: true,
port: 3000,
inline: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
favicon: path.join(__dirname, "./src/assets/images/favicon.png"),
}),
new Dotenv(),
],
optimization: {
minimize: isProductionMode(nodeEnv),
minimizer: isProductionMode(nodeEnv)
? [new TerserPlugin(), new CssMinimizerPlugin()]
: [],
splitChunks: {
chunks: "all",
},
},
};
};
The app.tsx page imports look like this (run perfectly fine locally):
const Contact = lazy(() => import("pages/Contact"));
const Infos = lazy(() => import("pages/Infos"));
const Home = lazy(() => import("pages/Home"));
// etc.
What is wrong here?