Related
I have a vue 3 project, Where I created a custom element. But font-awesome component is not working inside that custom element.
main.ts
import {createApp, defineCustomElement} from 'vue';
import App from './App.vue';
import router from './router.ts';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import MyElement from './component/MyElement.ce.vue';
const myCustomElement = defineCustomElement(MyElement);
customElements.define(`my-custom-element`, myCustomElement);
const app = createApp(App);
app.use(router);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount("#app");
App.vue
<template>
<div>
<my-custom-element />
</div>
</template>
<script>
export default {
name:'MainApp'
}
</script>
./component/MyElement.ce.vue
<template>
<div>
<h1>my element should work with icon</h1>
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
</template>
<script>
import { library } from '#fortawesome/fontawesome-svg-core';
import { faTwitter } from '#fortawesome/free-brands-svg-icons';
library.add(faTwitter);
export default {
name: "MyElement",
}
</script>
<style>
h1{
color: red;
}
</style>
webpack.config.js
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, './src/main.ts'),
output: {
path: path.resolve(__dirname, './dist'),
},
devServer: {
hot: true,
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.join('./', 'index.html') },
],
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options:{
compilerOptions:{
isCustomElement: (tag) => tag.includes('-')
}
}
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.css$/i,
use: ["css-loader"],
},
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
inject: 'body',
}),
]
}
package.json
{
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-brands-svg-icons": "^6.2.1",
"#fortawesome/free-regular-svg-icons": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"#fortawesome/vue-fontawesome": "^3.0.2",
"#vue/compiler-sfc": "^3.2.41",
"fine-uploader": "^5.16.2",
"fine-uploader-wrappers": "^1.0.1",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.4.1",
"typescript": "^4.8.4",
"vue": "^3.2.41",
"vue-loader": "^17.0.0",
"vue-router": "^4.1.6",
"webpack": "^5.74.0",
"webpack-dev-server": "^4.11.1"
},
"devDependencies": {
"css-loader": "^6.7.2",
"webpack-cli": "^4.10.0"
},
"scripts": {
"start": "webpack-dev-server --mode development"
}
}
Everything works including the style but FontAwesomeIcon is not working as it is supposed to.
This is what it shows in the browser
Can anyone point me in the right direction? Any help would be appreciated.
checkout if your icon available in fontawesome version 6.2.1
Turns out there is an npm package vue3-webcomponent-wrapper. I implemented it and used i tag of font-awesome which solved my issue. I don't know if this is the perfect solution but this is the only solution I found.
My goal:
I am creating a React component library in JavaScript with Webpack 5 and Babel 7 that is published to npm. I want consumers to import individual components into their React apps. I also want to add a development server for stakeholders to add components to the component library.
When running the app locally with 'npm run build && npm run serve' (npx webpack serve) I keep getting this error message:
ERROR in ./src/index.js 20:2
Module parse failed: Unexpected token (20:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| root.render(
> <App />
| );
Here is my setup:
./webpack.config.common.js
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
MyCoolButton: './src/components/buttons/MyCoolButton',
RandomButton: './src/components/buttons/RandomButton',
StyledButton: './src/components/buttons/StyledButton',
theme: './src/tokens/Theme'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
runtimeChunk: 'single',
},
resolve: {
alias: {
path: path.resolve(__dirname, 'src')
},
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
// The test property identifies which file or files should be transformed
test: /\.(js|jsx)$/,
resolve: {
extensions: [".js", ".jsx"]
},
exclude: /[\\/]node_modules[\\/]/,
// The use property indicates which loader should be used to do the transforming.
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
},
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
],
},
};
./webpack.config.prod.js
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(commonConfig, {
mode: 'production',
// do not include source maps on prod build
// devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Load css to separate file
MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
optimization: {
// minimize: true,
minimizer: [
// For webpack#5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin({
test: /\.foo\.css$/i,
}),
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the `compress` and `output`
ecma: 8,
},
compress: {
ecma: 5,
inline: 2,
},
mangle: {
// Find work around for Safari 10+
safari10: true,
},
output: {
ecma: 5,
comments: false,
}
},
// Use multi-process parallel running to improve the build speed
parallel: true,
}),
],
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'styles.[contenthash].css',
})
],
// As you publish your code as React component, apart from set React as peer dependency you have to set the react as externals to use the react at the consumer library.
externals: {
'react': {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React'
},
'react-dom': {
commonjs: 'react-dom',
commonjs2: 'react-dom',
amd: 'ReactDOM',
root: 'ReactDOM'
}
},
});
./babel.config.js
{
"plugins": [
"babel-plugin-module-resolver"
],
"presets": [
["#babel/preset-env"], // instead of "#babel/preset-es2015",
["#babel/preset-react"]
]
}
./src/index.js
export {default as MyCoolButton} from './components/buttons/MyCoolButton';
export {default as RandomButton} from './components/buttons/RandomButton';
export {default as StyledButton} from './components/buttons/StyledButton';
export {theme} from './tokens/Theme';
import './tokens/theme.scss'; // need import to generate minified css flat file
// kitchen sink for component development
import React from "react";
import { createRoot } from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('app');
const root = createRoot(rootElement);
root.render(
<App />
);
App.jsx
import React, { Component } from 'react';
import StyledButton from "./components/buttons/StyledButton";
import RandomButton from "./components/buttons/RandomButton";
class App extends Component {
render() {
return (
<div>
<div className='container body'>
<div className='row'>
<div className='col-12 text-center mb-4 mt-4'>
<h1>Welcome to the Kitchen Sink Page</h1>
</div>
<div className='col-6'>
<RandomButton />
</div>
<div className='col-6'>
<StyledButton />
</div>
</div>
</div>
</div>
);
}
}
export default App;
and my package.json
...
"peerDependencies": {
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"babel-core": "^6.0.0",
"webpack": "^4.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.0",
"#babel/core": "^7.17.2",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#semantic-release/changelog": "^6.0.1",
"#semantic-release/commit-analyzer": "^9.0.2",
"#semantic-release/git": "^10.0.1",
"#semantic-release/npm": "^9.0.0",
"#semantic-release/release-notes-generator": "^10.0.3",
"#testing-library/react": "^12.1.2",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.5",
"babel-plugin-module-resolver": "^4.1.0",
"commitizen": "^4.2.4",
"css-loader": "^6.6.0",
"css-minimizer-webpack-plugin": "^3.4.1",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.8.0",
"eslint-plugin-jest": "^26.1.0",
"eslint-plugin-react": "^7.28.0",
"jest": "^27.5.0",
"path": "^0.12.7",
"prop-types": "^15.6.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"sass": "^1.49.7",
"sass-loader": "^12.4.0",
"semantic-release": "^19.0.2",
"style-loader": "^1.3.0",
"styled-components": "^5.3.3",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"babel-plugin-styled-components": "^2.0.2",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.5.3",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"terser-webpack-plugin": "^5.3.1",
"webpack-merge": "^5.8.0"
},
...
I have browsed countless stackoverflow posts and answers, blog posts and I am having a hard time debugging this 'unexpected token' error.
I am new to Webpack so if anyone can see if I am doing something wrong in the Webpack config files, in way the React app is being bundled, or by loading Babel loaders, I would really appreciate some pointers.
I'm trying to rollup a Vue component which uses some vuetify components. For MWE purpose I have a very simple component, CountButton.vue, which is just a wrapper over <v-btn>
<template>
<div class="">
<v-btn #click="count"> test {{amount}} </v-btn>
</div>
</template>
<script>
import {VBtn} from 'vuetify/lib' // <---- for tree shaking & a la carte
export default {
components: {
VBtn
},
data: () =>({
amount: 0
}),
methods:{
count() {
this.amount += 1
}
}
}
</script>
I then used rollup to bundle this component with the following rollup.entry.js file:
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
import CountButton from './components/CountButton.vue'
const components = {
CountButton,
}
function install(Vue) {
if (install.installed) return;
install.installed = true;
Object.keys(components).forEach(name => {
Vue.component(name, components[name])
});
}
const plugin = {
install,
}
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
GlobalVue.use(Vuetify)
}
export default components
export const strict = false
export {
CountButton,
}
and rollup.config.js file:
// rollup.config.js
import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import { terser } from "rollup-plugin-terser";
import minimist from 'minimist';
import async from 'rollup-plugin-async';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
import css from 'rollup-plugin-css-only'
import pkg from './package.json';
const argv = minimist(process.argv.slice(2));
const config = {
input: './dev/src/rollup.entry.js',
external: [
// 'vue',
],
output: {
name: 'pub',
exports: 'named',
globals: {
'vue': 'Vue',
},
},
plugins: [
vue({
compileTemplate: true,
template: { optimizeSSR: false },
}),
async(),
postcss(),
nodeResolve({
mainFields: [
'module', 'main', 'jsnext',
]
}),
commonjs({
// non-CommonJS modules will be ignored, but you can also
// specifically include/exclude files
include: 'node_modules/**', // Default: undefined
// search for files other than .js files (must already
// be transpiled by a previous plugin!)
extensions: [ '.js', '.coffee' ], // Default: [ '.js' ]
namedExports: {
}, // Default: undefined
// sometimes you have to leave require statements
// unconverted. Pass an array containing the IDs
// or a `id => boolean` function. Only use this
// option if you know what you're doing!
ignore: [ 'conditional-runtime-dependency' ]
}),
babel({
exclude: 'node_modules/**',
externalHelpers: true,
runtimeHelpers: true,
plugins: [
['wildcard', { exts: ['vue'], nostrip: true, },],
// '#babel/plugin-external-helpers',
// '#babel/plugin-transform-runtime'
],
presets: [
['#babel/preset-env', { modules: false, },],
],
}),
],
};
// Only minify browser (iife) version
if (argv.format === 'iife') {
// config.plugins.push(terser()); // commented out for debugging
}
export default config;
Then, in my static HTML, I have:
<meta charset="utf-8">
<title>pub demo</title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="./pub.min.js" async="false"></script>
<pub-count-button></pub-count-button>
<count-button/>
</script>
Also package.json:
{
"name": "pub",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"build:wc": "npx vue-cli-service build --target wc --name pub 'dev/src/components/*.vue'",
"build:r": "npm run build:r:unpkg & npm run build:r:es & npm run build:r:umd",
"build:r:umd": "rollup --config rollup.config.js --format umd --file dist/pub.umd.js",
"build:r:es": "rollup --config rollup.config.js --format es --file dist/pub.esm.js",
"build:r:unpkg": "rollup --config rollup.config.js --format iife --file dist/pub.min.js"
},
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-unit-jest": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"#babel/core": "^7.1.0",
"#babel/plugin-external-helpers": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.1.0",
"#babel/runtime": "^7.0.0-beta.55",
"babel-core": "7.0.0-bridge.0",
"babel-plugin-wildcard": "^5.0.0",
"babel-runtime": "^6.26.0",
"core-js": "^2.6.2",
"css": "^2.2.4",
"from": "^0.1.7",
"import": "0.0.6",
"minimist": "^1.2.0",
"nodemon": "^1.18.9",
"register-service-worker": "^1.6.2",
"rollup": "^0.66.2",
"rollup-plugin-async": "^1.2.0",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-css-only": "^1.0.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^4.3.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"rollup-plugin-terser": "5.1.2"
}
}
The result of this example is that in index.html:
ReferenceError: process is not defined
found in pub.min.js
which corresponds to:
var config = ({
/**
* Option merge strategies (used in core/util/options)
*/
// $flow-disable-line
optionMergeStrategies: Object.create(null),
/**
* Whether to suppress warnings.
*/
silent: false,
/**
* Show production mode tip message on boot?
*/
productionTip: process.env.NODE_ENV !== 'production', <---
Here is a MWE repo
How I got here?
1. have a very simple component, CountButton.vue, which is just a wrapper over the Vuetify component , imported a la carte (see dev/src/components/CountButton.vue)
2. Then I configured rollup (rollup.config.js) and tried to bundle my "package" (just this component) with /dev/src/rollup.entry.js
3. then I rolled up npm run build:r
4. then I tried to use the component: (dist/demo.html)
Got a problem when updating from vuetify LTS to vuetify 2.0.0-beta.5.
Before all worked great, vuetify styles were loading from app.scss
Error:
[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot
read property 'dark' of undefined"
TypeError: Cannot read property 'dark' of undefined
[Vue warn]: Error in render: "TypeError: Cannot read property 'dark'
of undefined"
I've uninstalled vuetify, then install and update it to a beta version like this https://stackoverflow.com/a/49250912
package.json
{
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.9.0",
"#mdi/font": "^3.7.95",
"#symfony/webpack-encore": "^0.22.0",
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.8",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.8",
"webpack-dev-server": "^3.2.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server --hot --disable-host-check --host 174.28.1.5 --public 174.28.1.5:8080",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"apexcharts": "^3.8.1",
"chart.js": "^2.8.0",
"core-js": "^3.1.4",
"vue-apexcharts": "^1.4.0",
"vue-google-signin-button": "^1.0.4",
"vue-telegram-login": "^2.1.0",
"vuetify": "^1.5.14",
"vuex": "^3.1.1"
}
}
webpack.config.js
var path = require('path');
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('styles', './assets/css/app.scss')
.enableSassLoader()
.enableVueLoader()
.addEntry('landing', './assets/js/modules/landing/main.js')
.addEntry('main', './assets/js/modules/dashboard/main/main.js')
.addEntry('main-m', './assets/js/modules/dashboard_m/main.js')
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableVersioning(Encore.isProduction())
.enableSingleRuntimeChunk()
;
main_config = Encore.getWebpackConfig();
main_config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = main_config;
main.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import VueApexCharts from 'vue-apexcharts';
import Dashboard from './Dashboard';
import store from './store/index'
Vue.component('current-session', () => import('./DashboardModule'));
Vue.use(Vuetify, {
iconfont: 'fa'
});
Vue.use(VueApexCharts);
Vue.component('apexchart', VueApexCharts);
require('apexcharts');
require('vue-apexcharts');
new Vue({
el: '#dashboard-m',
store,
components: {Dashboard},
render: a => a(Dashboard),
});
app.scss
#import "~#fortawesome/fontawesome-free/css/all.min.css";
have made a try to fix it by adding vuetify-loader, not that i have made it correctly but it still not working, here my updates:
webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
// .enableSassLoader() - turned off it
.addLoader({
test: /\.s(c|a)ss$/,
use: [
'style-loader',
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true, // optional
}
}
]
})
delete node-sass from package.json
So when a have added this
<v-app id="inspire" :dark="false">
i have solved my problem with <v-app> tag, but got that another components do not load default props
like this:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property
'register' of undefined"
or this:
[Vue warn]: Error in getter for watcher "showOverlay": "TypeError:
Cannot read property 'width' of undefined"
Thanks jacek (Vuetify core team)
Here right way to add vuetify to Vue:
// v2.0
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
const opts = { ... }
Vue.use(Vuetify)
new Vue({
vuetify: new Vuetify(opts)
}).$mount('#app')
I am working on a react project. I am trying to use react hot loader in it. Everything in the project works fine but I am not able to see the changes in the browser as I make any changes in my component. I followed the official documentation for setting up hot loader. But it is not working. My content gets loaded in browser (localhost:3000) though. What should I do so that hot loader starts showing the changes. Here are my files.
App.js
import React from 'react';
import Userlist from '../containers/user-list';
import UserDetail from '../containers/user-detail';
require('../../scss/style.scss');
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
const App = () => (
<MuiThemeProvider>
<div>
<RaisedButton label="Default" />
<h2>
Usernamess
</h2>
<Userlist/>
<hr/>
<h2>
User Detail
</h2>
<hr/>
<UserDetail/>
</div>
</MuiThemeProvider>
);
export default App;
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./dev/js/index.js'
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'dev')
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
package.json
{
"name": "react-redux-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"license": "ISC",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"cross-env": "^1.0.8",
"css-loader": "^0.23.1",
"expect": "^1.20.1",
"material-ui": "^0.15.4",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.8.0",
"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.11.0"
},
"devDependencies": {
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-stage-0": "^6.5.0",
"react-transform-hmr": "^1.0.4",
"react-hot-loader": "^1.3.0"
}
}
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
});
An abstract from hot loader official thread https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md
"The following modules couldn't be hot updated: (They would need a full reload!)
If you get this warning when editing a root component, this may be because you don't export anything from it, and call React.render from there. Put your root component in a separate file (e.g. App.jsx) and require it from index.js where you call React.render."
So I made changes in my App.js
export default class App extends Component {
render() {
return (
<MuiThemeProvider>
<div>
<RaisedButton label="Default" />
<h2>
Usernamess
</h2>
<Userlist/>
<hr/>
<h2>
User Deta
</h2>
<hr/>
<UserDetail/>
</div>
</MuiThemeProvider>
);
}
}