I follow this example(http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301) to start one reactj app, so this is my
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
tempalte : __dirname + '/app/index.html',
filename : 'index.html',
inject : 'body'
})
module.exports = {
entry: [
'./app/index.js'
],
output: {
path : __dirname + '/dist',
filename : "index_bundle.js"
},
module : {
loaders :[
{test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
]
},
plugins : [HtmlWebpackPluginConfig]
}
And this is my index.html template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> teste</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
and this is my index.html generated by webpack
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script></body>
</html>
Note: my are removed, so when I try to run my app I got the error:
Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
How can I fix to don`t remove my div?
I using
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"html-webpack-plugin": "^2.15.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
tks
A typo in the template key in your configuration means that it is using a default template and not the one you were trying to include. The default behavior makes this error difficult to spot.
tempalte : __dirname + '/app/index.html'
should be
template : __dirname + '/app/index.html'
Related
I'm using Snowpack + Svelte. After upgrading to Snowpack 3 is not working anymore and I can't configure mount in snowpack.config.js properly.
Don't understand exactly why it cannot find App.js also it's trying to find .jsx, .ts...
[404] /_dist_/screens/App.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="global.css">
<script type="module" defer src="_dist_/main.js"></script>
</head>
<body>
</body>
</html>
And then in my snowpack.config.js
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: '/',
src: '/_dist_',
},
plugins: [
'#snowpack/plugin-svelte',
'#snowpack/plugin-dotenv',
],
routes: [
/* Enable an SPA Fallback in development: */
// {"match": "routes", "src": ".*", "dest": "/index.html"},
],
optimize: {
/* Example: Bundle your final build: */
// "bundle": true,
},
packageOptions: {
/* ... */
},
devOptions: {
/* ... */
},
buildOptions: {
/* ... */
},
alias: {
components: './src/components',
screens: './src/screens',
lib: './src/lib'
},
};
I also tried:
mount: {
// Same behavior as the "src" example above:
"src": {url: "/dist"},
// Mount "public" to the root URL path ("/*") and serve files with zero transformations:
"public": {url: "/", static: true, resolve: false}
},
So now it's complaining less but still not working
[snowpack] [404] /_dist_/main.js
Files structure
root
--node-modules
--public
----global.css
----index.html
--src
----components
----lib
----screens
----main.js
--snowpack.config.js
...
package.json
"devDependencies": {
"#snowpack/plugin-dotenv": "^2.0.5",
"#snowpack/plugin-svelte": "^3.5.0",
"#snowpack/web-test-runner-plugin": "^0.2.1",
"#testing-library/svelte": "^3.0.3",
"#web/test-runner": "^0.12.2",
"chai": "^4.2.0",
"smart-webcomponents": "^9.0.0",
"snowpack": "^3.0.10",
"svelte": "^3.31.2",
"svelte-i18n": "^3.3.0"
}
Any help or idea will be really appreciated.
Just add .svelte when you import your components.
import App from 'screens/App.svelte'
Please, check this https://github.com/snowpackjs/snowpack/pull/2014#issuecomment-756624333 if you wanna dive deeper.
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.
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
When I run my npm run build or npm run build-dev
It creates the index.html and manage2.bundle.js and manage2.css files in the root. I need to move those files into the static directory.
So the generated index.html below will actually work, with the correct paths:
<!doctype html>
<html lang="en">
<head>
<title>Manage2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="The TickerTags backend manage app">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Source+Sans+Pro:200,600" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
<link href="/static/manage2.css" rel="stylesheet"></head>
<body>
<div id="manage2"></div>
<script type="text/javascript" src="/static/manage2.bundle.js"></script></body>
</html>
How is this acomplished? webpack.config below
const fs = require('fs');
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const dist = path.resolve(__dirname, "dist");
const src = path.resolve(__dirname, "src");
const environment = process.env.NODE_ENV;
const stream = fs.createWriteStream("src/services/environment.js");
stream.once('open', function(fd) {
stream.write('const env = "'+environment+'"\n');
stream.write('export default env');
stream.end();
});
module.exports = {
context: src,
entry: [
"./index.js"
],
output: {
path: dist,
filename: "manage2.bundle.js",
publicPath: '/static/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: ["css-loader", "sass-loader"],
publicPath: dist
})
}
]
},
devServer: {
hot: false,
quiet: true,
publicPath: "",
contentBase: path.join(__dirname, "dist"),
compress: true,
stats: "errors-only",
open: true
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html"
}),
new ExtractTextPlugin({
filename: "manage2.css",
disable: false,
allChunks: true
}),
new CopyWebpackPlugin([{ from: "static", to: "static" }])
]
};
// new webpack.DefinePlugin({ env: JSON.stringify(environment) })
My npm scripts
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --history-api-fallback",
"prod": "NODE_ENV=production webpack-dev-server -p",
"build": "NODE_ENV=production webpack -p",
"build-dev": "NODE_ENV=production webpack -d",
This config is saving the *.js and *.css to the static folder.
output: {
// the output bundle
filename: '[name].[hash].js',
// saves the files into the dist/static folder
path: path.resolve(__dirname, 'dist/static'),
// set static as src="static/main.js as relative path
publicPath: 'static/'
},
With the HtmlWebpackPlugin you can generate a html file from a template. With this config in the Webpack plugins section the index.html is saved to the dist. folder with the correct path to the *.js and *.css.
plugins: [
// is only working with npm run build
new HtmlWebpackPlugin({
title: '',
// save index.html one director back from the output path
filename: '../index.html',
template: 'index.template.ejs',
hash: false
}),
],
index.template.ejs
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
</body>
</html>
Results in
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
</title>
<link href="static/main.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="static/main.js"></script>
</body>
</html>
Your output.path is incorrect. It should be path.resolve(__dirname, 'dist', 'static').
And since now your output.path points to dist/static, set publicPath back to /.
I already read SO damn much tutorials, tickets etc, and i just cannot resolve it...
I have a React project with webpack. And i try to use .scss files for styling.
So i have this webpack.config.js:
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devServer: {
contentBase: "./src"
},
entry: [
'babel-polyfill',
'./src/app'
],
output: {
publicPath: '/',
filename: 'app.bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
//Babel
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ["es2015", "react"],
}
},
//Sass
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('src/style.css', {
allChunks: true
})
],
debug: true
};
And a App.scssFile in src/:
body {
margin: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
color: pink;
}
h2 {
color: greenyellow;
}
Than in my index.html I include the css file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aline</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
</head>
<body >
<div id="content"></div>
<script src="../app.bundle.js"></script>
</body>
</html>
Than i call webpack-dev-server --inline --hot --quiet.
Than chrome always tells me it cannot find the css file, and it seems webpack just doesnt care about my scss file....
my package.json dependencies would be:
"devDependencies": {
"babel-core": "6.17.0",
"babel-loader": "6.2.5",
"babel-plugin-transform-runtime": "6.15.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-runtime": "6.11.6",
"css-loader": "0.25.0",
"extract-text-webpack-plugin": "1.0.1",
"node-sass": "3.10.1",
"sass-loader": "4.0.2",
"style-loader": "0.13.1",
"webpack": "1.13.2",
"webpack-dev-server": "1.16.2"
},
Got the answer on Twitter by a webpack develeoper itself! It was my own stupidity. I am still learning about webpack etc, and I forgot how webpack is working.
It builds a tree out of dependencies, so logically it needs know the scss files in some way... so i told my enter point (app.js) per require about my scss file, and TADA. There it goes.
I havent thought about that, because all the tutorials using the ExtractTextPlugin explain it collects all the scss files and makes a single css out of it. So I was like "oh it collects all my scss files out of my folders. Nice!" But yeah... nah xD it collects it from the tree not the disk :p