My react site (not using create-react-app) builds but won't load

app name: https://reverent-babbage-164d88.netlify.app/

Update: I moved the index.html to the root folder and that loads. Unfortunately, the app is still not booting up. It’s loading the index page but not booting the app. Nice. :slight_smile:

the build says “site is live” but the site doesn’t load. It’s a plain react app–not using create-react-app. Is there anything special I need to do to have netlify load the site? Currently, I launch it locally using npm run start. Do I need to create some metadata describing how to start the app?

Page Not Found

Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

2:17:20 PM: Build ready to start
2:17:22 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
2:17:22 PM: build-image tag: v3.4.1
2:17:22 PM: buildbot version: e1f4178b0d9779ebad1b11d5b54739f82fed3c22
2:17:22 PM: Building without cache
2:17:22 PM: Starting to prepare the repo for build
2:17:22 PM: No cached dependencies found. Cloning fresh repo
2:17:23 PM: Preparing Git Reference refs/heads/master
2:17:24 PM: No build command found, continuing to publishing
2:17:24 PM: Starting to deploy site from ‘/’
2:17:24 PM: Creating deploy tree
2:17:24 PM: Creating deploy upload records
2:17:24 PM: 0 new files to upload
2:17:24 PM: 0 new functions to upload
2:17:24 PM: Starting post processing
2:17:24 PM: Post processing - HTML
2:17:24 PM: Post processing - header rules
2:17:24 PM: Post processing - redirect rules
2:17:24 PM: Post processing done
2:17:24 PM: Site is live
2:17:24 PM: Finished processing build request in 2.679841394s

P.S.,
I did buy a domain and am pointing to it. I just did it in the last 4 hours.However, not even
this link https://reverent-babbage-164d88.netlify.app/ launches it
domain: www.enhuff.com

thanks in advance

I think we need some more information. What is your build directory (usually its public)? How are you deploying the site (through the cli, or wired up to a git repo)?

Just from looking at those logs, I see **2:17:24 PM: No build command found, continuing to publishing**. In your repo what do you have as your npm run build command in your package.json?

Here’s my package.js build: “build”: “node_modules/.bin/webpack --mode production”
I’m using npm run build as my build command. here’s my webpack config.

module.exports = {
devtool: 'source-map',
entry: "./index.js",
output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js",
    publicPath: '/'
},
module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-react',{
                    'plugins': ['@babel/plugin-proposal-class-properties']}]
            }
        }
    }, {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
            {
                fallback: 'style-loader',
                use: ['css-loader']
            }
        )
    },
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader'
            }
        ]
    }
    ],

},
plugins: [
    new HtmlWebPackPlugin({
        hash: true,
        filename: "index.html",  //target html
        template: "./index.html" //source html
    }),
    new ExtractTextPlugin({ filename: 'css/style.css' }),
 
]

}

Also, the build now says:

5:01:21 PM: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
5:01:21 PM: This can impact web performance.
5:01:21 PM: Assets:
5:01:21 PM: index_bundle.js (1.08 MiB)
5:01:21 PM: css/style.css (997 KiB)
5:01:21 PM: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
5:01:21 PM: Entrypoints:
5:01:21 PM: main (2.05 MiB)
5:01:21 PM: index_bundle.js
5:01:21 PM: css/style.css
5:01:21 PM:
5:01:21 PM: WARNING in webpack performance recommendations:
5:01:21 PM: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
5:01:21 PM: For more info visit https://webpack.js.org/guides/code-splitting/

What do you have configured as your ‘deploy folder’ on netlify?

I decided to use create-react-app and now I’m getting this:

9:10:09 PM: Treating warnings as errors because process.env.CI = true.
9:10:09 PM: Most CI servers set it automatically.
9:10:09 PM:
9:10:09 PM: Failed to compile.
9:10:09 PM:
9:10:09 PM: ./src/components/Map.js
9:10:09 PM: Line 11:7: ‘mapStyles’ is assigned a value but never used no-unused-vars
9:10:09 PM: Line 47:13: ‘arr’ is constant no-const-assign
9:10:09 PM: Line 117:26: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
9:10:09 PM: ./src/screens/room/TextContainer.js
9:10:09 PM: Line 15:33: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
9:10:09 PM: ./src/components/MenuWrapper.jsx
9:10:09 PM: Line 15:58: Expected to return a value at the end of arrow function array-callback-return
9:10:09 PM: Line 20:55: Expected ‘!==’ and instead saw ‘!=’ eqeqeq
9:10:09 PM: ./src/screens/Login.js
9:10:09 PM: Line 16:19: ‘errorCode’ is assigned a value but never used no-unused-vars
9:10:09 PM: Line 17:19: ‘errorMessage’ is assigned a value but never used no-unused-vars
9:10:09 PM: Line 49:46: Using target="_blank" without rel=“noopener noreferrer” is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
9:10:09 PM: ./src/screens/Home.js
9:10:09 PM: Line 27:5: React Hook useEffect has missing dependencies: ‘GeoFirestore’, ‘auth.currentUser.uid’, and ‘db’. Either include them or remove the dependency array react-hooks/exhaustive-deps
9:10:09 PM: Line 33:45: Unexpected mix of ‘&&’ and ‘||’ no-mixed-operators
9:10:09 PM: Line 34:44: Unexpected mix of ‘&&’ and ‘||’ no-mixed-operators
9:10:09 PM: Line 137:19: Redundant alt attribute. Screen-readers already announce img tags as an image. You don’t need to use the words image, photo, or picture (or any specified custom words) in the alt prop jsx-a11y/img-redundant-alt
9:10:09 PM: ./src/screens/Map.js
9:10:09 PM: Line 2:10: ‘ResponsiveImage’ is defined but never used no-unused-vars
9:10:09 PM: Line 2:27: ‘ResponsiveImageSize’ is defined but never used no-unused-vars
9:10:09 PM: ./src/App.js
9:10:09 PM: Line 47:15: ‘isAnonymous’ is assigned a value but never used no-unused-vars
9:10:09 PM: Line 92:59: Expected to return a value at the end of arrow function array-callback-return
9:10:09 PM: Line 97:59: Expected ‘!==’ and instead saw ‘!=’ eqeqeq
9:10:09 PM: npm ERR! code ELIFECYCLE
9:10:09 PM: npm ERR! errno 1
9:10:09 PM: npm ERR! enhuff@0.1.0 build: react-scripts build
9:10:09 PM: npm ERR! Exit status 1
9:10:09 PM: npm ERR!
9:10:09 PM: npm ERR! Failed at the enhuff@0.1.0 build script.
9:10:09 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
9:10:09 PM: npm ERR! A complete log of this run can be found in:
9:10:09 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-09-06T01_10_09_687Z-debug.log
9:10:09 PM:
9:10:09 PM: ┌─────────────────────────────┐
9:10:09 PM: │ “build.command” failed │
9:10:09 PM: └─────────────────────────────┘
9:10:09 PM:
9:10:09 PM: Error message
9:10:09 PM: Command failed with exit code 1: npm run build
9:10:09 PM:
9:10:09 PM: Error location
9:10:09 PM: In Build command from Netlify app:
9:10:09 PM: npm run build
9:10:09 PM:
9:10:09 PM: Resolved config

the deploy folder is: build

I finally fixed the problem and managed to optimize a few things. “All warnings are treated as errors” was the culprit. In my package.json file, I added CI=false. Until I fix some of the warnings, this will do. Thanks

CI=false react-scripts build
2 Likes

Ayy, nice one @billp72!