I am looking to use React application using MobX framework, into Electron.
I have success loading MobX with React, but when I try to wrap it with Electron, I have a console error message not allowed to load local resource
My package JSON :
{
"name": "electron-stuff",
"version": "1.0.0",
"description": "",
"main": "src/electron.js",
"scripts": {
"babel": "babel",
"webpack": "webpack",
"start": "electron . --allow-file-access-from-files"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"mobx": "^2.3.7",
"mobx-react": "^3.5.1",
"react": "^15.2.1",
"react-dom": "^15.3.0"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"react-addons-test-utils": "^15.3.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
My webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/main.js",
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
]
},
output: {
path: path.join(__dirname, "src"),
filename: "main.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Why does the electron saying that there he not allow to load local resource ? electron does not suppose to have access to local files? how can I solve this ?
Seems Like I accidentally route to the wrong path.
problem solved.
Related
I'm working on a React tutorial via Youtube and have matched his webpack.config and package.json files but I am getting a strange error when running webpack-dev-server
package.json
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.3.13",
"bootstrap-without-jquery": "^1.0.5",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^1.15.0"
},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC"
}
webpack.config
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
./src/js/client.js
import React from "react";
import ReactDOM from "react-dom";
import Bootstrap from 'bootstrap-without-jquery';
import Layout from "./pages/Layout";
const app = document.getElementById('app');
ReactDOM.render(<div>/Hello</div>, app);
The file structure matches the tutorial source code so I don't think that is an issue. However when I run npm run dev I get the following error
Webpack Error
If I comment out line 10 of client.js webpack compiles with no issue. (ReactDOM.render function)
You have Webpack 1 installed, which has all the loader configurations in config.module.loaders, but your config uses config.module.rules which was introduces in Webpack 2.
Installing Webpack 4 should resolve your issue.
npm install -D webpack#latest
New to webpack trying to understand how to make file structure, webpack.config.js and package.json work together, but not sure what is failing as the client.min.js(my outputted bunfdle file) is never regenerated upon NPM run dev
webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname+"/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
package.json:
{
"name": "appThing",
"version": "0.0.0",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"flux": "^2.1.1",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack": "^2",
"webpack-dev-server": "^2"
},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.7.0",
"webpack-cli": "^2.0.10"
},
"description": ""
}
File structure:
NPM run dev result:
webpack-dev-server does not generate files. It serves all assets from memory.
If you want to generate files, run webpack.
I am working on a reactjs project and using webpack-dev-server for running my app.
react-hot is not refreshing my browser whenever I change a some js file. Also, when refreshing my browser, changes don't appear. I have to turn off then on my webpack-dev-server.
Here is my package.json file :
{
"name": "someApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --inline",
"prod": "webpack -p"
},
"author": "someName",
"license": "ISC",
"dependencies": {
"axios": "^0.15.3",
"react": "^15.4.1",
"react-addons-css-transition-group": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-preset-react": "^6.3.13",
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.7.1",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.16.2"
}
}
Here is my webpack.config.js configuration :
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __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', loaders: ["react-hot", "babel-loader"]},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins: [HTMLWebpackPluginConfig]
};
You're missing this part in the entry part of webpack.config.js file:
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000',
'webpack/hot/only-dev-server',
]
I have the following webpack.config.js :
"use strict";
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: debug ? 'inline-sourcemap' : null,
devServer: {
inline: true,
port: 3333,
hot: true,
contentBase: "src/static/",
historyApiFallback: {
index: '/index-static.html'
}
},
entry: [
'webpack-dev-server/client?http://localhost:3000/',
'webpack/hot/only-dev-server',
'./src/app-client.js'
],
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
publicPath: "/js/",
filename: 'bundle.js'
},
module: {
loaders: [{
test: path.join(__dirname, 'src'),
loader: ['babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
}
},
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }
]
},
plugins: debug ? [] : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
}),
]
};
package.json
{
"name": "judo-heroes",
"version": "1.0.0",
"description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
"main": "src/server.js",
"repository": "git#github.com:lmammino/judo-heroes.git",
"scripts": {
"start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
"start-dev": "npm run start-dev-hmr",
"start-dev-single-page": "node_modules/.bin/http-server src/static",
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
"build": "NODE_ENV=development node_modules/.bin/webpack -d"
},
"author": "Luciano Mammino",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"ejs": "^2.5.1",
"express": "^4.14.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.6.1"
},
"devDependencies": {
"http-server": "^0.9.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}
I am trying to get the browser to refresh every time I make changes to some of the components, but the changes don't take place.
Your issue is probably that you don't get to the loader with test test: /\.jsx?$/, since the first loader matches.
Can you try to use react-hot in the first module?
{
test: path.join(__dirname, 'src'),
loader: ['react-hot','babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
}
},
A more precise test for this loader would be better in the long run though.
I simply had to run this command:
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
from
{
"name": "judo-heroes",
"version": "1.0.0",
"description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
"main": "src/server.js",
"repository": "git#github.com:lmammino/judo-heroes.git",
"scripts": {
"start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
"start-dev": "npm run start-dev-hmr",
"start-dev-single-page": "node_modules/.bin/http-server src/static",
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
"build": "NODE_ENV=production node_modules/.bin/webpack -p"
},
"author": "Luciano Mammino",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"ejs": "^2.5.1",
"express": "^4.14.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.6.1"
},
"devDependencies": {
"http-server": "^0.9.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}
I'm pretty new to using React and Webpack so I'm likely doing something wrong, but when I build with the -p production flag my file size is considerably bigger (3.26MB vs 2.23MB) than when I build without.
package.json:
{
"name": "myProject",
"version": "0.0.1",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"flux": "^2.1.1",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot",
"build": "webpack",
"build-p": "webpack -p"
},
"author": ""
}
webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "app.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
I had the same problem and it got solved by removing the 'debug' property from webpack.conf.js. In stead I call webpack with the -d flag when I'm developing (and not when building the production bundle), as that adds the debug property automatically.
I see that debug is a conditional in your config, but at least it solved the problem for me.