Error for ReactJs.Net server side rending with ES6 - reactjs.net

I have been working withe ReactJs.Net and MVC5 application and facing issues with server side rending while using ES6 and babel transpiler. I used expose-loader for exposing the component globally. But it is working only in ES5 syntax . If I use ES6 and Webpack for bundling i am getting the below error in #Html.React() function.
Error while rendering "Hello" to "react_Hq6cd5QfaUu26XrhGgZA": Script threw an exception: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?
Code for ~Jsx/Components/Helloworld.jsx
import React, {Component} from 'react';
export default class Helloworld extends Component {
render() {
return (
<div>Hello {this.props.name} ,This is my first react component.</div>
);
}
}
Code for ~Jsx/server.jsx
import Hello from 'expose?Hello!./components/Helloworld' ;
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports =
{
entry: ['./Jsx/server.jsx'],
output: { path: './build', filename: 'main.js' },
module: {
loaders: [
{
test: /\.jsx$/,
loader: ['babel-loader'],
include: path.resolve(__dirname, 'Jsx'),
query: {
presets: ['es2015', 'react']
}
},
]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
//watch:true
}
RectConfig.cs
ReactSiteConfiguration.Configuration
.SetLoadBabel(false)
.AddScriptWithoutTransform("~/build/main.js");
The above code works fine if i use the below ES5 syntax for Helloworld component
var React=require('react');
var Helloworld = React.createClass({
render: function() {
return (
<div>
Hello {this.props.name} ,This is my first react component.
</div>
);
}
});
module.exports=Helloworld;
Please help me if someone knows the solution.

Related

Vue/Webpack fails to compile image

I've searched around and applied all kinds of methods but still can't get Webpack and Vue to successfully compile an image asset addressed in a .vue file.
I've tried fiddling with file-loader, url-loader, different ways of referencing the image and importing left and right, even if it doesn't show in the code below. I figured I should ask to get a conclusive and educational answer.
Note that everything works just fine when the image is removed from the code.
Error
ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-8959d626","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/js/component.vue
Module not found: Error: Can't resolve './assets/img/test.jpg' in 'D:\Projects\Web\src\js'
# ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-8959d626","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/js/component.vue 28:27-59
# ./src/js/component.vue
# ./src/js/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/main.js
webpack: Failed to compile.
component.vue
<template>
<div>
<img src="./assets/img/test.jpg">
</div>
</template>
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import component from './component.vue';
Vue.config.devtools = true;
Vue.use(VueRouter);
const routes = [{
path: '/component',
component: component
}
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
router
});
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/js/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public/dist'),
publicPath: '/public/dist/'
},
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// `vue-loader` options
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
File structure
src
- assets
-- img
--- test.jpg
- js
-- component.vue
-- main.js
The path must be relative. Since you are at js folder, you must navigate up using ..:
<img src="../assets/img/test.jpg">
Breakdown:
It's just like regular folder navigation. Since the <template> is at src/js/component.vue, to get to test.jpg, you do:
Initial file: src/js/component.vue
Starting folder: src/js/
../ now you are at src/
../assets now you are at src/assets
../assets/img now you are at src/assets/img
../assets/imgtest.jpg now you get src/assets/img/test.jpg
Reference:
As pointed by #AkinHwan in the comments, a great resource/reference for the assets behaviors is https://vuejs-templates.github.io/webpack/static.html

How use vue-loader without vue-cli

I am trying to put together the absolute bare minimum example of a Vue project that uses webpack to transpile .vue files.
My goal is to understand each build step in detail. Most tutorials advise to use vue-cli and use the webpack-simple config. And although that setup works, it seems overkill for my simple purpose. For now I don't want babel, linting or a live web server with hot module reloading.
A minimal example with just import Vue from 'vue' works! Webpack compiles the vue library and my own code into one bundle.
But now, I want to add vue-loader to the webpack config, so that .vue files will get transpiled. I have installed vue loader:
npm install vue-loader
npm install css-loader
npm install vue-template-compiler
And I have added vue-loader to the webpack config:
var path = require('path')
module.exports = {
entry: './dev/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
I have created hello.vue
<template>
<p>{{greeting}} World</p>
</template>
<script>
export default {
data:function(){
return {
greeting:"Hi there"
}
}
}
</script>
And in my app I import 'hello'
import Vue from 'vue'
import hello from "./hello.vue";
new Vue({
el: '#app',
template:`<div><hello></hello></div>`,
created: function () {
console.log("Hey, a vue app!")
}
})
The loader does not seem to pick up the .vue files, I get the error:
Module not found: Error: Can't resolve './hello.js'
EDIT
When trying to import hello from 'hello.vue' I get the error:
Unknown custom element: <hello> - did you register the component correctly?
Am I missing a step? Am I importing the .vue component the right way? How do I use the hello.vue component from app.js?
First, you are not importing the file correctly. You should import it like so:
import Hello from './hello.vue'
Secondly, after you import the component you'll still need to register it somehow. Either do this globally Vue.component('hello', Hello), or on the Vue instance:
new Vue({
el: '#app',
template:`<div><hello></hello></div>`,
components: { 'hello': Hello },
created: function () {
console.log("Hey, a vue app!")
}
})
As a side note, if you want to be able to import the file without having to specify the .vue extension, you can specify that the .vue extension should be resolved in your config file.
In that case, the resolve object in your config file should look like this:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.vue', '.json']
}
Here's the documentation on resolve.extensions.
In addition to #thanksd answer:
As of vue-loader v15, a plugin is required:
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
}
https://vue-loader.vuejs.org/guide/
Tagging on some more info here along with #lukebearden and #thanksd. Set up a Vue app from the ground up, it's basic and I tore out some of the styling along the way cause I didn't want to deal with it: but it compiles that JS:
https://github.com/ed42311/gu-vue-app
Can confirm about the plugin, and I haven't added the resolve, but now I will :)
Let me know if you have any thoughts.

Bloated JS output with Webpack and Vue

I'm getting started with Vue's Single File Components. I created a simple Hello World which I bundle with Webpack (I'm also new to it) but I am really astonished by the bloated resulting file.
This is my component at src/js/components/app.vue:
<template>
<div class="message">{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
}
}
}
</script>
and my src/js/index.js:
import Vue from 'vue';
import App from './components/app.vue';
new Vue({
el: '#app',
components: { App }
});
And this is my webpack.config.babel.js:
import path from 'path';
module.exports = {
entry: path.resolve(__dirname, 'src') + '/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
}
}
}
],
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
I use Vue 2.3.4 and Webpack 3.0.0. My resulting main.js file (which works fine) is >10.000 lines of code!
Is this normal?
Am I doing something wrong?
Am I missing something?
Yes. Remember it will also be bundling Vue itself, which unminified is 9685 lines of code.
It will also be doing a bunch of other magic to convert your ES2015 code to ES5 and creating a render function from your .vue template.

how to implement reactjs global configuration

I am trying to follow this link about setting up global configuration. And I am unable to make it work. When I run my reactjs component I get an error that Config is undefined.
my webpack.config file looks like this:
module.exports = {
entry: './src/app.js',
externals: {
'Config': JSON.stringify({
optionsService: 'http://localhost:8080/options'
})
},
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: [ 'es2015', 'react' ] }
}
]
}
};
and I've tried using it like this:
import React from 'react';
import Config from 'Config';
// these also fail
// const Config = require('Config');
// var Config = require('Config');
// let Config = require('Config');
export default class MyComponent extends React.Component {
render() {
return (
<div>
{Config.optionsService}
</div>
);
}
}
I've also tried the commented out lines, to no available.
What am I doing wrong?
Thank you
Matt
$ npm install react-global-configuration
After install:
import config from 'react-global-configuration';
config.set({ foo: 'bar' });
getting your value
import config from 'react-global-configuration';
config.get('foo');

Webpack cannot resolve module error

So I am trying to compile a vue file.
But I am getting the following error
and I don't know why. My main.js file contains the following
// Vue things
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
// Vue Components
import dashboard from 'components/dashboard-component'
new Vue({
el: "body",
components: {
dashboard
},
methods: {
}
})
and my components folder is in the same folder as main.js.
This is my vue component:
<template>
Hello
</template>
<script>
// Exports
export default {
components: {
dashboard
},
props: {
},
data: function (argument) {
},
ready() {
},
methods: {
}
}
</script>
which is under components/dashboard-component as index.vue.
What am I doing wrong ?
Thank you.
You need to import Vue files. So you need to save your component to components/Dashboard/Dashboard.vue and import it like so:
import Dashboard from './components/Dashboard/Dashboard.vue'
new Vue({
el: "body",
components: {
Dashboard
},
methods: {
}
})
Don't forget the ./ in front of the components folder in order for this to work
For convinient, I would usual add .vue to resolved extensions Array, and set alias for directories that would be used frequently:
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'data': path.resolve(__dirname, '../data'),
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'views': path.resolve(__dirname, '../src/views'),
'components': path.resolve(__dirname, '../src/components')
}
},
So I can use import dashboard from 'components/dashboard-component'; in my project.

Resources