Learn Build Tools: Rock, Paper, Bundle Project extra dependencies required to run

Community Bug Reporting
#1

Learn Build Tools - Off-Platform Project: Rock, Paper, Bundle

https://www.codecademy.com/courses/learn-build-tools/articles/build-tools-webpack-project

Basically, I completed the entire project but it would not open properly in the browser when I ran ‘npm run start’
I diffed my files against the solution code and couldn’t find any significant differences. However, I did find a workaround. Installing html-webpack-plugin with npm and then importing it and pasting the following snippet into the webpack.config.js in the module.exports obect.

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],

After doing this, npm run start worked perfectly. I’m not sure why this is the case, but if anyone else has difficulty with it, this was how I solved it. (with the help of stackoverflow, of course)

6 Likes
#2

yeah something is up with this project. i tried to run build and am getting a ‘field browser doesn’t contain a valid alias configuration’ i even changed the folder structure to src and dragged everything in so the file paths would be correct and no dice.

1 Like
#3

Had the same problem.
By adding output and plug-in also implies the use of two new consts.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

Add this two lines to webpack.config
Outside of module-export object.

Thanks you for the debbug.

1 Like
#4

I’m running into an error when running npm run start. I am able to run npm run build successfully.
I have added the code that is mentioned perviously. Here is a screenshot of the error:

Screen Shot 2022-08-08 at 10.30.13 AM
Screen Shot 2022-08-08 at 10.30.13 AM2864×1144 379 KB

#5

Thank you for solving this. This solved the problem in my case.

Could you explain what this fix does, and how you came to this solution?
I never would have gotten to this on my own… :slight_smile:

The error i had was just a blank page with the text ‘Cannot GET /’

#6

Ran the plug-in but no luck for me unfortunately. Tried to change the file names too. Just keep getting Cannot Get error

#7

Try to add to webpack-config.js file follows:

devServer: {
            static: {
                directory: path.join(__dirname, '/')
            }
        },

and at the top of the file add:

const path = require('path');

And you will have something like that:

const path = require("path");

module.exports = {
	mode: "development",
	entry: "./code/main.js",
	devServer: {
		static: {
			directory: path.join(__dirname, "/"),
		},
	},
.
.
.
}
1 Like