I'm starting to use webpack, and I did a tiny project to try, but I'm finding an error that I don't know how to fix. When I run my index.html, it says that can't find bundle.js. I think is something wrong with the path, but I'm not sure. Hope someone can help me!
This is my structure
prueba1
node_modules
build
bundle.js
src
app.js
index.html
messages.js
style.css
package.lock.json
package.json
webpack.config.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Document</title>
<link href="style.css" />
</head>
<body>
<button id="connect">Conectar</button>
<script src="bundle.js"></script>
</body>
</html>
package.json
{
"name": "prueba1",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.51.1"
},
"devDependencies": {
"webpack-cli": "^4.8.0"
}
}
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
filename: "bundle.js",
path: __dirname + "/build",
},
};
The problem is that your index.html and your bundle.js are in different directories (src and build). You could simply move your index.html to build and it will work.
Or you let webpack do that work with the copy-webpack-plugin (https://www.npmjs.com/package/copy-webpack-plugin): install it using npm install copy-webpack-plugin --save-dev, and add this to your webpack.config.js:
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "src", to: "build" }
],
}),
],
};
Related
I am learning webpack to start out my react projects without create-react-app. Everything seems to work fine but when I open the console after npm run dev, I see the error message: Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".
Below are my project files.
webpack-react
├── dist
├── package-lock.json
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.js
│ └── index.js
├── webpack.config.js
└── .babelrc
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/index.js"></script>
</body>
</html>
App.js
function App() {
return (
<div>
<h1>Welcome to webpack</h1>
</div>
);
}
export default App;
index.js
import ReactDOM from "react-dom/client";
import App from "./App";
const root = document.querySelector("#root");
ReactDOM.createRoot(root).render(<App />);
.babelrc
{
"presets": [
"#babel/preset-env",
["#babel/preset-react", { "runtime": "automatic" }]
]
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV || "development",
entry: "./src/index.js",
output: {
filename: "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: [".js", "jsx", ".css"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: {
minimize: true,
},
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: "./public/index.html" }),
],
devServer: {
host: "localhost",
port: process.env.PORT || 3000,
open: true,
},
};
package.json
{
"name": "webpack-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack --mode production --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
},
"dependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
I find it weird that react files are rendered despite the message..
I believe the error comes from this line
<script type="module" src="../src/index.js"></script>
Since you are using Webpack to bundle, the injection is handled by Webpack.
Remove that line, the app should still work and the error should disappear.
Hello I am unable to see output in my chrome inspect element. Following are my files.
Output
Webpack.config.js
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js"
}
};
PACKAGE JSON
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "Gaurav Yadav guided by Jonas",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
TEST.JS
console.log("Export data");
export default 23;
INDEX.JS
// Global app controller
import num from "./test";
console.log(`${num} from test`);
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
</head>
<body>
<script>
src = "js/bundle.js";
</script>
</body>
</html>
My project folder name is FORKIFY. There are three subfolders dist, src , nodemodules and three files pacakage-lock.json, pacakage.json, webpack.config.js. Directory image dir.
Please let me know why my console in empty ?
I was following this video to code
https://www.youtube.com/watch?v=sBEryysS1Tg&list=PL15NLmjJalxydhO9orvXv_yvgZEfrDQvX&index=127
Where is the problem and in which file ??
Do i need to change my webpack config file ?
Your folder structure is incorrect.
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js"
}
};
The dist folder will get created when you run the webpack command and you have mentioned your index.html file is present in the dist folder.
Place your index.html file at the root level of your project. Also, if js is folder within dist, then add slash to treat as a directory i:e path: path.resolve(__dirname, "dist/js/")
Appropriate Folder Structure
node_modules
src
-js
- index.js
index.html
package.json
webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js/')
},
watch: true
}
// index.js
console.log('logging');
// index.html
<h1>WebPack works!!</h1>
<script src="dist/js/bundle.js"></script>
Run command webpack, which will create bundle.js file within dist/js/ folder and then open your index.html file in the browser.
My vuejs app's package.json looks like
package.json
{
"name": "vue_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.13",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.6",
"#vue/cli-plugin-eslint": "^3.0.0-beta.6",
"#vue/cli-service": "^3.0.0-beta.6",
"#vue/eslint-config-standard": "^3.0.0-beta.6",
"lint-staged": "^6.0.0",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-template-compiler": "^2.5.13"
},
"babel": {
"presets": [
"#vue/app"
]
},
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"#vue/standard"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}
}
Upon building the vue app, it generates an index.html file while looks like,
dist/index.html
<body>
<noscript><strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div
id=app></div>
<script type=text/javascript>
(function(r){var n=window["webpackJsonp"];window["webpackJsonp"]=function(e,u,c){for(var i,f,p,l=0,a=[];l<e.length;l++)f=e[l],t[f]&&a.push(t[f][0]),t[f]=0;for(i in u)Object.prototype.hasOwnProperty.call(u,i)&&(r[i]=u[i]);n&&n(e,u,c);while(a.length)a.shift()();if(c)for(l=0;l<c.length;l++)p=o(o.s=c[l]);return p};var e={},t={2:0};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,n,e){o.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(r){var n=r&&r.__esModule?function(){return r["default"]}:function(){return r};return o.d(n,"a",n),n},o.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},o.p="/",o.oe=function(r){throw console.error(r),r}})([]);
//# sourceMappingURL=/js/manifest.bb41d6d8.js.map
</script>
<script type=text/javascript src=/js/vendor.be88a6a7.js></script>
<script type=text/javascript src=/js/app.5edcb6c7.js></script>
</body>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>Flask + Vue.js Template</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
On running static files are failed to get fetched , ie. /js/vendor.be88a6a7.js returns 404 but it can be fetched by calling /static/js/vendor.be88a6a7.js url. So I have to prepend /static to all the static url paths. But I don't find any webpack.conf file located on that directory.
source code
In vue cli 3 the webpack config file is generated dynamically at runtime. It has been abstracted away. That is the reason you don't see a webpack config file.
You can find the webpack config file here:
<projectRoot>/node_modules/#vue/cli-service/webpack.config.js
This is the file that is dynamically resolved.
The output.publiPath is / by default in the webpack config file. If you want to check want is webpack config file looks like you can use vue inspect command in your command line or via vue ui -> click Tasks -> click inspect. It prints out a serialized format only meant for inspection of the config file.
But if you want to configure the webpack config you can make use of the vue.config.js file.
If you do not have vue.config.js file, then create it in root of your project.
Then add the following:
// vue.config.js
module.exports = {
configureWebpack: {
output: {
publicPath: '/static/'
}
}
}
Resources:
Vue-Cli 3 docs
Configuring Webpack
I am using a ReactJS tutorial from Here on setting up my first component.
Now the code in my files looks exacly the same:
//index.js
import React from "react";
import {
render
} from "react-dom";
class App extends React.Component {
render() {
return(
<div>
<h1> Hello </h1>
</div>
);
}
}
render( <App/> , window.document.getElementById('app'));
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ReactJS Basics</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/app/bundle.js"></script>
</body>
</html>
Also, this is my webpack.config.js file:
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
}
]
}
};
module.exports = config;
And package.json:
{
"name": "reactjs-basics",
"version": "1.0.0",
"description": "Lol",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
},
"keywords": [
"reactjs"
],
"author": "Alan",
"license": "MIT",
"dependencies": {
"babel-core": "^6.26.0",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
I am running the server with the npm start command from the package.json
But for some unknown reason, when rendering the app I get this error:
Uncaught Error: _registerComponent(...): Target container is not a DOM
element.
I really have no idea how to fix this issue, all the other similar problems here contain having the script tags above the hook div, which is not the real case here.
Has anyone here had similar problems to this?
Any help would be amazing
Apologies for what will likely be a beginners mistake. I have searched for days to try and find the answer, but am unable to successfully connect to a Firebase Database.
Extracts of all files are below.
I have installed node.js, then firebase init, firebase login, and then firebase serve.
I get the same result whether hosting locally, or after deploying to firebase hosting. I have tried the full paths to the firebase js files previously and similarly got the same result.
What do I need to do to be able to prove its connecting to Firebase ok?
Many many thanks!
index.html...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/4.0.0/firebase-database.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="app.js"></script>
<title>Page Title</title>
I'm the header ...
</head>
<body>
I'm the body...
<script> getDatabaseRef() </script>
</body>
</html>
app.js...
function getDatabaseRef(){
console.log('Script called');
var firebaseRef = firebase.Database().ref();
console.log(firebaseRef.ref);
window.alert(firebaseRef);
console.log('Script finished');
}
firebase.json....
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
package.json
{
"name": "jobsheetpoc",
"version": "1.0.0",
"description": "my JS proof of concept",
"main": "app.js",
"dependencies": {
"firebase": "^4.0.0"
},
"devDependencies": {
"firebase-server": "^0.10.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jim",
"license": "ISC",
"keywords": [
"job",
"sheet",
"poc"
]
}
Output in Browser...
Output in Browser Window
I have a strange feeling you made a typo. You have a capital Database in firebase.Database instead of a normal one (firebase.database).