So I'm trying to use styles within a vuejs single file component. I've had this working before within a node app, but this is with a python/flask back end. (Not that I think it should matter). Vue renders the component correctly, and everything seems to be fine, but it's completely ignoring my style tags.
Here's my test.vue:
<template>
<div>
<span class="foobar">Hello {{ foo }}</span>
</div>
</template>
<script>
let my_component = {
data: function () {
return {
foo: "world"
}},
}
export default my_component
</script>
<style scoped>
.foobar {
color: red;
}
</style>
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test SFC Page</title>
</head>
<body>
<div id="test_component"></div>
<script src="/static/js/test.js"></script>
</body>
</html>
The contents of test.js:
import Vue from 'vue'
import TestComponent from './test.vue'
new Vue({
el: "#test_component",
render: h => h(TestComponent),
})
And my webpack config is very very simple. I basically used the same one that I used with my node/expressjs site because that worked, and webpack makes my head hurt.
const {VueLoaderPlugin} = require('vue-loader');
const config = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},
]
},
plugins: [
new VueLoaderPlugin(),
],
}
module.exports = config
But obviously I'm doing something wrong. After googling around (and spending significant time on stack overflow), it seems like it's implied that webpack will create a separate css file for this that I then have to include, but no one seems to talk about how you make it do that, and I couldn't find that in my already-working node/express app, so maybe it doesn't always do that?
When the vue loader encounters a style section in a vue SFC, what does it actually do with those styles? Does it somehow inject them via javascript into the page itself?
Oh, and I'm using this command to run the build:
npx webpack --display-error-details --entry ./static/test/test.js --config ./scripts/webpack.config.js -o ./build/site/static/js/test.js --mode=development
Last piece of info - Something's definitely working partially correctly, because my final HTML output is containing the extra data tag that scoped puts in there. According to chrome's inspector - the final HTML looks like this:
<div data-v-3d196e1c>
<span data-v-3d196e1c class="foobar">Hello world</span>
</div>
And finally my package.json:
"name": "my_app",
"version": "1.0.0",
"description": "Description Goes Here",
"main": "app.js",
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.6.12",
"vue-style-loader": "^4.1.2",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#gitlab.com/raphael_disanto/rpg.git"
},
"author": "RDSK",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/raphael_disanto/rpg/issues"
},
"homepage": "https://gitlab.com/raphael_disanto/rpg#readme"
}
So I'm totally lost. I don't know if I'm getting it wrong with webpack, or with vue, or somewhere in between! It's frustrating because I have this working on a different site, and I didn't think I did anything different this time...
I had this exact same problem, and changing
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},
to
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
fixed it.
you should use Stephen's recommendation, but be sure to add
npm install style-loader
Then
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
}, ```
Related
I've been trying my first steps with react.js and after playing around a bit (installing Bootstrap, adding some loaders for LESS & Co.) at some point the event handlers (onSubmit, onChange) stopped working. At first, I thought I just messed up my code.
However, when I copy the example for a controlled components form into a freshly initialized npm project with React 17.0.2, these handlers are still not working as expected. E.g. the onSubmit handler:
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
Neither does the alert show, nor is the default event handling prevented. The page simply reloads when I hit the submit button.
For example, if I put an alert into the constructor it is being shown.
Here is the full package.json
{
"name": "app-retry",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3"
}
}
and here is the full webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
dev: {
hot: true,
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// attach the presets to the loader (most projects use .babelrc file instead)
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
]
},
plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') })]
};
The index.js is
import React from "react";
import ReactDOM from "react-dom";
// lines as copied from the react example
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
and finally the index.html template
<html>
<head>
<title>Hello world App</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
What am I doing wrong? Is the example code wrong or is there a flaw in my setup?
I'm working through a basic Hello World React app. I'm working with webpack/babel, but upon building the project I'm getting an error, i'm also supplying the versions of the dependencies that I'm using.
index.js
var React = require('react');
var ReactDom = require('react-dom');
require('./index.css');
class App extends React.Component {
render() {
return (
<div>
Hello World!
</div>
)
}
}
ReactDom.render( <App/>, document.getElementById('app') );
package.json
{
"name": "github-battle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create": "webpack"
},
"babel": {
"presents": [
"env",
"react"
]
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.5.2",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: { loader: 'babel-loader', options: { presents: ['env', 'react'] } } },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Github Battle',
template: './app/index.html'
})
]
}
Error:
ERROR in Error: Child compilation failed: Module build failed:
ReferenceError: [BABEL] C:\workspaces\javascript\git
hub-battle\node_modules\lodash\lodash.js: Unknown option:
C:\workspaces\javascript\github-battle\package.json.presents. Check
out http://babeljs.io/doc s/usage/options/ for more information about
options. A common cause of this error is the presence of a
configuration options object without the corresponding preset name.
Example:
Invalid: { presets: [{option: value}] }
Valid: { presets: [['presetName', {option: value}]] }
For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
`
If there is more information you need about my hello world project please ask, i'm more than willing to try to work through this issue.
You should check the official way to init a React app, create-react-app. It handles all the tooling for you hence allows you to bootstrap an app very quickly and easily.
From your error, it looks like a Babel configuration issue.
I took a look at a simple React project of mine that had this set of babel devDependencies:
"devDependencies": {
"babel-core": "^6.24.0",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-react": "^6.23.0",
}
Perhaps you need to set the "babel-preset-latest" option.
I am just new to webpack and react , just going through the docs and created a example to work. Unfortunately i got stuck and not able to proceed . Th problem is the bundled file is not generated.
The files i created is
package.json
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
module.export = {
entry : './main.js',
output : {
path : './',
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
App.js
import React from 'react';
class App extends React.Component {
render(){
return <div>Hello</div>
}
}
export default App
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />,document.getElementById('app'));
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Setup</title>
</head>
<body>
<div id = "app"></div>
<script src ="index.js"></script>
</body>
</html>
I am getting that bundle is valid, but no index.js is generated.
can't run in localhost 3333
Thanks,
I think the problem is that you are not giving the absolute output path.
Try this:
var path = require('path');
module.exports = {
entry : './main.js',
output : {
path : path.join(__dirname, './'),
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
Hope it helps :)
In webpack.config.js, use module.exports instead of module.export. See Output filename not configured Error in Webpack
Also be noticed that your package.json lacks some dependencies. Here is the updated package.json that works:
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}
Replace your scripts object with the below:
"scripts": {
"start": "npm run build",
"build": "webpack -p && webpack-dev-server"
},
Then, run $ npm start
For me the problem was with package.json under that "scripts"
Here is the fix:
Inside your package.json file, under script add the following:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
First I ran the build then start.
yarn build
if you first build then your bundle.js file will be created and after that you can use this command:
yarn start
In case of no output file (bundle.js) and a successful build
Hash: 77a20ba03ab962a1f5be
Version: webpack 4.41.0
Time: 1039ms
Built at: 10/04/2019 5:24:48 PM
Asset Size Chunks Chunk Names
main.js 1.09 MiB main [emitted] main
Entrypoint main = main.js
[./react_rest/frontend/src/index.js] 35 bytes {main} [built]
+ 12 hidden modules
webpack :
module.exports = {
entry: './react_rest/frontend/src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
},
output: {
filename: 'main.js'
}
};
Try to use var path = require('path'); and allocating output directory
var path = require('path');
module.exports = {
entry: './react_rest/frontend/src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
},
output: {
path: path.join(__dirname,'./react_rest/frontend/static/frontend/'),
filename: 'main.js'
}
};
I have recently implmented webpack in my application and trying to load all tag files which are converted into js through srcipt src tag. Still the riot js is not able to mount tag file..any solutions for the same ?
When I manually load login_form.js file, riot is able to read it correctly.
HTML:
<html>
<body>
<script type="text/javascript" src="../public/libs/riot/riot.js"></script>
<script src="../public/dist/js.js"></script>
<login_form></login_form>
</body>
Andrew Van Slaars produced a great video I used to get started with Riot.js + Webpack.
https://www.youtube.com/watch?v=UgdZbT-KPpY
He also provides a "starter kit" git repo with Riot.js + webpack: https://github.com/avanslaars/riot-webpack-base
Both are very helpful and a good starting point.
The package.json shows what's required – N.B. the use of tag-loader not riotjs-loader. I found the tag loader works for me so haven't tried the riotjs-loader.
{
"name": "riot-webpack-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"riot": "^2.3.11"
},
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"tag-loader": "^0.3.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
The webpack.config file is fairly simple to start with:
var path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module:{
loaders:[
{
test: /\.js$/,
loader:'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.tag$/,
loader: 'tag',
exclude: /node_modules/
}
]
}
}
There is an official Riot tag loader for Webpack: https://github.com/riot/tag-loader
It supports hot module reloading as well.
module.exports = {
module: {
loaders: [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader',
query: {
hot: false, // set it to true if you are using hmr
// add here all the other riot-compiler options riotjs.com/guide/compiler/
// template: 'pug' for example
}
}
]
}
}
Then in your code:
import riot from 'riot'
import 'riot-hot-reload'
// riot will have now a new riot.reload method!!
I've just started following this tutorial.
I've gone through the first video three or four times now. When I try to run the application, I get the following error in the console:
ERROR in ./main.js
Module parse failed: /Users/newuser/projects/js101/react-egghead/main.js Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:16)
at Parser.pp.raise (/Users/newuser/projects/js101/react-egghead/node_modules/acorn/dist/acorn.js:920:13)
...
I've looked at similar questions on SO but none seem to have an answer for me.
Here's my webpack.config.js file:
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
moudle: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
This is what package.json looks like:
{
"name": "react-egghead",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.2",
"react-dom": "^15.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
And, although it's not mentioned in the video, I've added a .babelrc file: (which I have now removed)
{
"presets": ["es2015", "stage-0", "react"]
}
This is where the parse fails (line 5):
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('app'))
I really don't know what to try next. Is it a problem with my environment set up or is it a problem with the code in main.js?
Any help would be appreciated.
You have a typo in your webpack config. Instead of module you typed moudle, so your loader configs are actually ignored by webpack :)