error: cannot find module html-webpack-plugin - javascript

I am in the process of working through a tutorial on Webpack, but after adding in HtmlWebpackPlugin and trying to run Webpack again, I get the following error:
Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:489:15)
...
I have tried installing the plugin both locally and globally and I get the error both times.
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./app.js", // bundle entry point
output: {
path: path.resolve(__dirname, 'dist'), // output directory
filename: "[name].js" // name of generated bundle
},
plugins : [
new HtmlWebpackPlugin({
template: "index.html",
inject: "body"
})
]
};
//package.json
{
"name": "hyperlocalnola",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1"
}
}
//app.js
var msg = require("./contents.js");
document.write(msg);
//contents.js
module.exports = "hello friend!";
Sorry about the wall of text for what is probably something very simple, but I cannot find what is causing this anywhere. Thanks in advance.

Related

Webpack is not loading Css, Images and font

I am trying to load the Css, Images and fonts using the webpack. Here is my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: "main.js",
path: path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
};
This is my package.json
{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
}
This is my index.js. When I uncomment the ./styles.css import I get the
main.js:290 Uncaught Error: Automatic publicPath is not supported in this browser in chrome console and my js imports doesn't work but it dosen't throw me error while building project when I run npm run build commmand in terminal. I tried using css import in each js module-- in home.js etc--file but that also doesn't work.
// import './style.css';
import { homeContent, removeIntroContent } from './Modules/home.js';
import { aboutContent, removeAboutContent } from './Modules/about.js';
import { reviewsContent, removeReviewContent } from './Modules/reviews.js';
const home = document.getElementById("home-btn");
const review = document.getElementById("review-btn");
const about = document.getElementById("about-btn");
homeContent();
home.addEventListener("click",()=>{
removeReviewContent();
removeAboutContent();
const id = document.getElementById("intro-content");
if(id != null) return;
homeContent();
});
review.addEventListener("click",()=>{
removeAboutContent();
removeIntroContent();
const id = document.getElementById("reviews");
if(id != null) return;
reviewsContent();
});
about.addEventListener("click",()=>{
removeReviewContent();
removeIntroContent();
const id = document.getElementById("about");
if(id != null) return;
aboutContent()
});
I have pushed the code to github if anyone want to look at file structure
Here is the link
ps: If I use the link tag to add css to html it works exactly as I want it to but that defeats the purpose of using webpack
I am having trouble with Webpack as well and I came across your question. I don't have a sure solution to your problem, but I hope to steer you in the right direction.
At first glance, I am wondering if editing your package.json file to use your webpack-config when you run 'npm run build' instead of the default webpack config. This could help activate the loaders you are trying to use, or atleast populate error messages that would allow you to investigate further. Editing your package.json would look like:
"scripts": {
"test": "echo \\\"Error: no test specified\\\" && exit 1",
"watch": "webpack --watch",
"build": "webpack --config ./webpack-config.js"
}
Your dependencies make sense and your file path for style.css seems correct, so I am wondering if Webpack does not know how to load your styles, fonts, images without your config file.
Can read more about Webpack configuration here.
https://webpack.js.org/configuration/
Hope I was able to help, good luck! If you have any further questions I'd be happy to help, as I'm learning Webpack too.

Running into error when trying to run npm run dev command

I'm trying to follow a tutorial non javascript, so I'm trying to run webpack from node script but I've been getting this weird error, I've searched online but couldn't find the solution
the error:
C:\Users\Ahmad Usman\Desktop\9-forkify\webpack.config.js:2
const path = require("path");
^
below is the code (they are in different files though)
// INDEX.JS FIle
import num from "./test";
console.log(`num: ${num}`);
// TEST.JS FILE
console.log('imported module');
export default 23;
// PACKAGE.JSON
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "Ahmad Usman",
"license": "ISC",
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
//WEBPACK.CONFIG.JS
const path = require("path");
const path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js",
},
mode: "development",
};
and here is a screenshot of my command line interface
commandline screenshot1
and commandline screenshot2
Thanks
The error says :
SyntaxError: identifier 'path' has already been declared
So if you remove duplicate code it should work:
//WEBPACK.CONFIG.JS
const path = require("path");
const path = require("path"); <-- declared twice
module.exports = {
entry: "./src/js/index.js",
output: {

npx webpack command cannot find module webpack.config.js

I'm following the official Webpack getting started guide and I get an error on the Using a Configuration section. It says to create a webpack.config.js file with:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I then run the following command:
npx webpack --config webpack.config.js
The error I get is:
Cannot find module '/Users/Documents/Web_Development/tone/webpack.config.js'
The guide does not seem to give any ideas of what could be wrong here. Also my code editor is telling me there is an error with const path = require('path'); saying "Expected a JSON Object, array or literal;
My Directory structure:
webpack.config.json
package.json.lock
package.json
node_modules/
dist/
index.html
main.js
src/
index.js
package.json:
{
"name": "tone",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
The solution was to change the webpack.config.json file to webpack.config.js.
You have to make sure that the webpack.config.js file is in the root of your project.

Webpack Initialization Fails

I just got into Webpack following an online tutorial.
Whenever I run npm run dev the web pack doesn't run and gives me the error: Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output has an unknown property 'fileName'. These properties are valid:
object { auxiliaryComment?, chunkFilename?, webassemblyModuleFilename?, globalObject?, crossOriginLoading?, jsonpScriptType?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, chunkCallbackName?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
-> Options affecting the output of the compilation.outputoptions tell webpack how to write the compiled files to disk.
Here are my files:
package.json
{
"name": "forkify",
"version": "1.0.0",
"description": "Forkify Project",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "Sanjay",
"license": "ISC",
"devDependencies": {
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
"dependencies": {}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
fileName: 'bundle.js'
},
mode: 'development'
}
your output object is wrong. ( fileName => filename )
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js'
},
mode: 'development'
}

babel-loader 6.0.0 doesn't work correct

I am using webpack this is my
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
watch: true,
watchOptions: {
aggregateTimeout: 100
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: "babel-loader"
}]
}
}
and this my file from entry point
app.js
import React from 'react'
without anything, just simple line of code.
When i am trying to run webpack from command line and i got the next error
app.js Line 1: Unexpected token You may need an appropriate loader to
handle this file type. | import React from 'react';
package.json
{
"name": "a-b-c",
"version": "1.0.0",
"main": "server.js",
"dependencies": {
"babel-loader": "^6.0.0",
"react": "^0.14.1",
"webpack": "^1.12.2"
},
"devDependencies": {
"babel-core": "^6.0.14"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Also, when i changed ES6 syntax in my app.js file to ES5 then it works well.
Any suggestions?
Thanks in advance.
I've found out. The problem was with babel-loader and to fix this issue you need to install
npm install babel-loader babel-core babel-preset-es2015
and add to your webpack.config.js file next lines
loader: 'babel?presets[]=es2015'
Source of information
Thanks

Categories