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!!
Related
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',
],
}, ```
Update:
Code pushed to https://github.com/gsouvik/react_spa_experiment
Initial Post:
I know there are hundreds of threads out there, some had typos in webpack config, some used the loaders in a wrong way, some got it solved, some still open. But after numerous tries I still cannot get this working, a simple "Hello World" using Webpack 4, React js.
What I did
I was following this video tutorial line by line:
React & Webpack 4 from scratch
My package.json
{
"name": "my_react_experiment_2",
"version": "1.0.0",
"description": "Basic react with webpack ",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --hot",
"build": "webpack --mode production"
},
"author": "Souvik Ghosh",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
My .babelrc
{
"presets": ["env", "react"]
}
My directory structure
Expected behaviour
I fire up the dev server npm run dev. Expected to see my shiny new React js page saying "My first React Webpack project" (from the component /components/App.js)
Actual Behavior
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "./components/App";
|
ReactDOM.render(, document.getElementById('root'));
| //ReactDOM.render('Hello User ', document.getElementById('root'));
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main2
If required I can share the codebase via a git repo. Any help is greatly appreciated.
The issue is with typo in your webpack config file.
You have module.export which is not correct. It should be module.exports
Working example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
I have to add the css file externally. Tried with the code import "./Login.css"; which is located in the base path. Cant able to get the file, which turns the error like below.
You may need an appropriate loader to handle this file type.
.Login {
padding: 60px 0;
}
I updated in webpack config also.
Webpack config:
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
In JSX File:
import React from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
Package.json,
{
"name": "reactapp",
"version": "1.0.0",
"description": "Tetser",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-bootstrap": "^0.32.1",
"react-dom": "^15.6.1"
}
}
I tried atmost everything, but no solution. Anyone clarify, please.
You will need to add css-loader and style-loader to your dev dependencies in package.json
Link to webpack docs:
https://webpack.js.org/concepts/loaders/#using-loaders
The way I do it (ex: import fonts from fonts.com) :
create a css file,
import external css in local css file
import local css file in js
I have a project which is set up so that it builds with reactand jsx. It works fine to build it using node_modules/webpack/bin/webpack.js --config webpack.config.js and I can run the result in the browser with no problems. However, when I run npm test and view the test runner in the browser, I get the error: "Uncaught ReferenceError: require is not defined at dashboard-tests.js:3". It seems that webpack is compiling my tests (but not my normal code) into a version of javascriptthat can't be run in browsers.
Here are the relevant files:
.babelrc:
{
"presets": ["es2015", "react"]
}
testem.json:
{
"framework": [
"jasmine"
],
"launch_in_dev": [
"PhantomJS"
],
"launch_in_ci": [
"PhantomJS"
],
"serve_files": [
"tmp/**/*-test{,s}.js"
],
"on_start": "babel static_source --out-dir tmp",
"on_exit": "yes | rm -r tmp"
}
package.json:
{
"main": "index.js",
"scripts": {
"test": "testem"
},
"dependencies": {
"jquery": "^3.2.1",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-feather": "^1.0.7"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"jasmine-es6": "^0.4.3",
"testem": "^1.18.4",
"webpack": "^3.6.0"
}
}
webpack.config.js:
var path = require("path");
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: './static_source/js/index.js',
output: {
path: path.resolve('./app/static/js/'),
filename: "compiled.js"
},
plugins: [],
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
],
}
}
dashboard-tests:
import React from 'react';
import ReactDOM from "react-dom";
import TestUtils from "react-dom/test-utils";
import Dashboard from './dashboard';
describe('Dashboard', function() {
it('exists', function() {
expect(Dashboard).not.toBe(undefined);
});
it('renders arrows', function() {
var dashboard = <Dashboard />;
var renderedDashboard = TestUtils.renderIntoDocument(dashboard);
var arrowsDiv = TestUtils.findRenderedComponentWithClass('arrows');
expect(arrowsDiv).not.toBe(undefined);
});
});
You are using Babel to compile your test source files. Babel is just a transpiler, it takes ES+ files and translates them to ES5 files. Because import does not exist in ES5 Babel replaces them with require().
To fix the problem you need to bundle your source file into one, using Webpack.
You will need a separate Webpack configuration file, let's call it webpack.config.test.js. In this file we need to instruct Webpack to fetch all your static_source/**/*-test{,s}.js files as entry-points.
You will need the glob module : npm install glob --save-dev.
Then add the webpack.config.test.js file with this content :
var path = require("path");
var glob = require('glob');
var webpack = require('webpack');
module.exports = {
context: __dirname,
// we look for all file ending with -test(s?).js and return the absolute path
entry: glob
.sync('./static_source/js/**/*-test{,s}.js')
.map(function(file) { return path.resolve(__dirname, file) }),
output: {
// save the resulting bundle in the ./tmp/ directory
path: path.resolve('./tmp/'),
filename: "compiled.js"
},
plugins: [],
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
],
}
}
On the testem.json file replace the on_start with a before_test to Webpack, and the serve_files to map to the bundled file.
"before_tests": "webpack --config webpack.config.test.js ",
"serve_files": [
"tmp/compiled.js"
],
When testem will be launched it will trigger the Webpack test compilation.
Now you should have a tmp/compiled.js file with all your test files bundled. You may need to do some tweaking but it should basically works.
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'
}
};