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)

8 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.

2 Likes
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 /’

1 Like
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
8

The lesson is already a year out of date.
I have the same error Cannot GET / where I run the command npm run start

I rechecked all the files, everything is the same except for the package.json. Different versions of packages, although they are listed with an increase — It’s not clear to me why everything works in the solution-code.

"devDependencies": {
    "css-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }

V.S. what do we get with npm install command

"devDependencies": {
    "css-loader": "^6.7.2",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1" ← it's new one, which we need now and which are not in the tutorial
  }

Solution:

  1. Install HtmlWebpackPlugin
    npm install --save-dev html-webpack-plugin
  2. Add at the very beginning of the webpack.config.js file, before the module.exports
    const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. Add in webpack.config.js file in module.exports new item
    plugins: [new HtmlWebpackPlugin({ template: "./index.html" })]
  4. npm run build
  5. npm run start
  6. play the game
2 Likes