Electron and Webpack ENOENT: no such file or directory, open '/path.txt' - node.js

I am a beginner trying to use Electron (formerly Atom) and Reactjs bundled with Webpack. Everything was working fine until I tried to use Electron's remote module to access the mainWindow in my React components.
Trying to import this module, I get the infamous error:
Uncaught Error: ENOENT: no such file or directory, open '/path.txt'
I've tried reinstalling electron and I've checked node_modules/electron, and found that path.txt is there.
Here is my webpack.config.js:
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: {
app: ['webpack/hot/dev-server', './src/App.jsx'],
},
target: 'node',
output: {
path: './public/built',
filename: 'bundle.js',
publicPath: 'http://localhost:8080/built/'
},
devServer: {
contentBase: './public',
publicPath: 'http://localhost:8080/built/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: /src/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=[path][name].[hash].[ext]'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
And here is my package.json:
{
"name": "app",
"version": "0.1.0",
"main": "main.js",
"description": "description",
"license": "UNLICENSED",
"repository": {
"type": "git",
"url": "https://github.com"
},
"scripts": {
"start": "./node_modules/.bin/electron .",
"watch": "./node_modules/.bin/webpack-dev-server"
},
"dependencies": {
"electron": "^1.3.5",
"radium": "^0.17.1",
"react": "^15.0.1",
"react-dom": "^15.0.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.24.0",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
I suspect that it may have something to do with the start script in package.json as the path.txt is not in the same directory as node_modules/.bin/electron. However, I haven't figured out how to solve this.

in case it's not to late, you simply need to replace your "node" target with "electron-renderer" in your webpack.config.js

Just run command like below
cd node_modules/electron && node install.js
It will create path.txt file
For Mac the file contains like below
dist/Electron.app/Contents/MacOS/Electron

Related

How to configure webpack to deploy react application on heroku?

I have created a react application from scratch and I'm trying to deploy it on heroku but unfortunately I faced a lot of errors, however I came to the point where I need to add a start script to my package.json file according to the logs of heroku :
npm ERR! Missing script: "start"
I don't know what content to add to my start script command in the package.json because I don't know if it takes additional webpack configuration or not, here is the file :
{
"name": "APPNAME",
"version": "1.0.0",
"description": " web application, etc..",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build" : "webpack --mode production"
},
"repository": {
"type": "git",
"url": "gitrepo"
},
"author": "LOUKACH EL-Mehdi",
"license": "ISC",
"bugs": {
"url": "ISSUES"
},
"homepage": "readme",
"devDependencies": {
"#babel/cli": "^7.1.0",
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^5.2.7",
"style-loader": "^2.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"dependencies": {
"aos": "^2.3.4",
"bootstrap": "^5.1.3",
"express": "^4.18.1",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "^10.3.11"
}
}
I have a webpack.config.js file that allows me to parse the bundle.js file :
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
static : {
directory : path.join(__dirname, "public/")
},
port: 3000,
devMiddleware:{
publicPath: "https://localhost:3000/dist/",
},
hot: "only",
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
P.S : after browsing the internet, I found out about an express file can be added to the root directory of the project, please let me know if this is the way to go to deploy the application on heroku, thank you !

Webpack won't compile when I use an image url in scss

I'm trying to get a very simple project going with Material Design and WebPack, but I'm getting compile errors. I've been following this guide to set everything up:
https://material.io/develop/web/getting-started
I'm honestly baffled by this error. I have obviously looked online for a solution, but everything I found was related to linter. I don't use a linter.
Here's the error:
ERROR in ./app.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (5:73)
3 | import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
4 | import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
> 5 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL("./images/bckgnd_light.jpg", import.meta.url);
| ^
6 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
7 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
8 | // Module
My app.scss file only consists of:
#content {
background: url('./images/bckgnd_light.jpg') #e8e5d7;
}
My webpack.config.js:
const autoprefixer = require('autoprefixer');
module.exports = {
entry: ['./app.scss', './app.js'],
output: {
filename: 'bundle.js',
},
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer()
]
}
}
},
{
loader: 'sass-loader',
options: {
// Prefer Dart Sass
implementation: require('sass'),
// See https://github.com/webpack-contrib/sass-loader/issues/804
webpackImporter: false,
sassOptions: {
includePaths: ['./node_modules'],
},
},
}
],
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader'
},
],
},
};
package.json:
{
"name": "materialdesigntest",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"#material/button": "^14.0.0",
"#material/ripple": "^14.0.0",
"#material/textfield": "^14.0.0",
"material-components-web": "^14.0.0"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/eslint-parser": "^7.18.2",
"#babel/preset-env": "^7.18.6",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"postcss-loader": "^7.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"url-loader": "^4.1.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"author": "",
"license": "ISC"
}
After some more digging I found this thread:
https://github.com/peerigon/extract-loader/issues/111
Changing the css-loader to this solved the issue for me:
{
loader: 'css-loader',
options: {
esModule: false
}
},

502 server error when deploying React app to Google App Engine

Google App Engine newbie here.
I've deployed my React app to google, but when I try to preview it I get a 502 error:
Failed to load resource: the server responded with a status of 502 ()
app.yaml:
env: flex
runtime: nodejs
package.json:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "Minimal boilerplate for react",
"main": "index.js",
"scripts": {
"start": "node server.js",
"bundle": "./node_modules/.bin/webpack --config webpack.config.js",
"prestart": "npm run bundle"
},
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"engines": {
"node": "6.11.0",
"npm": "3.10.10"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.5",
"style-loader": "^0.16.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"axios": "^0.16.2",
"d3": "^4.9.1",
"express": "^4.15.3",
"pug": "^2.0.0-rc.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"webpack": "^3.3.0"
}
}
webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
}
Running out of ideas. Any help would be awesome!
Figured out the problem. Turns out I needed to move all the modules from devDependencies to dependencies!

Webpack 2 - create a Js file with all plugins

I have some issue to have a vendor.js file that will include all the plugins I used for my projet. I already read Managing jQuery plugin dependency in webpack but It seems the plugins I used are a little complex to be include.
Just to be clear, my app.js and my css are correctly builded butt not the vendor.js
Here is my package.json :
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env=dev --progress --watch --content-base src/app"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"postcss-cssnext": "^2.10.0",
"postcss-loader": "^2.0.5",
"postcss-modules-values": "^1.2.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"admin-lte": "git://github.com/almasaeed2010/AdminLTE.git#37c8bbb01998db487382e9d62cfb398511167f3a",
"bootstrap-daterangepicker": "git://github.com/dangrossman/bootstrap-daterangepicker.git#29bbf5a04df69fda363cedb534272ac344524e57",
"bootstrap-table": "^1.11.2",
"eonasdan-bootstrap-datetimepicker": "git://github.com/Eonasdan/bootstrap-datetimepicker.git#4.17.47",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"jquery": "^3.2.1",
"jquery-confirm": "git://github.com/craftpip/jquery-confirm.git",
"lobibox": "git://github.com/arboshiki/lobibox.git",
"lodash": "^4.17.4",
"moment-timezone": "^0.5.13",
"parsleyjs": "^2.7.1",
"push.js": "0.0.13",
"socket.io-client": "^1.7.4",
"tableexport.jquery.plugin": "git://github.com/hhurz/tableExport.jquery.plugin.git"
}
}
Here is my webpack.config.json :
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssPlugins = [
require('postcss-cssnext')(),
require('postcss-modules-values')
];
const scssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
];
const postcssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
{ loader: 'postcss-loader', options: { plugins: [...postcssPlugins] } }
];
// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
entry: {
app: './app.js',
// if any on these are just for css remove them from here and require(with absolute path) them from app.js
vendor: [
'babel-polyfill',
'admin-lte',
'admin-lte/bootstrap/js/bootstrap.min.js',
'lobibox/dist/js/notifications.min.js',
'admin-lte/plugins/fastclick/fastclick.js',
'moment',
'moment/locale/fr.js',
'moment-timezone',
'eonasdan-bootstrap-datetimepicker',
'bootstrap-table',
'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
'parsleyjs',
'parsleyjs/dist/i18n/fr.js',
'bootstrap-daterangepicker',
'socket.io-client',
'jquery-confirm',
'push.js',
'lodash',
'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
'tableexport.jquery.plugin'
]
},
//devtool: 'eval', // for test in the browser
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')//,
//pathinfo: true
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.html$/,
use: ['raw-loader', 'html-minifier-loader'],
exclude: /node_modules/
}, {
test: /\.json$/,
use: 'json-loader',
exclude: /node_modules/
}, {
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: scssLoader[0], // style-loader
use: scssLoader.slice(1) // [ 'css-loader', 'sass-loader' ]
})
},{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}, {
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}],
},
plugins: [
new ExtractTextPlugin({
filename: 'app.bundle.css',
allChunks: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
};
My app.js :
console.log("coucou");
// css
require('admin-lte/dist/css/skins/skin-blue.min.css');
require('admin-lte/dist/css/AdminLTE.min.css');
require('jquery-confirm/dist/jquery-confirm.min.css');
require('bootstrap-table/dist/bootstrap-table.min.css');
require('bootstrap-daterangepicker/daterangepicker.css');
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
require('admin-lte/plugins/select2/select2.min.css');
require('lobibox/dist/css/lobibox.min.css');
require('ionicons/dist/css/ionicons.min.css');
require('font-awesome/css/font-awesome.min.css');
require('admin-lte/bootstrap/css/bootstrap.min.css');
Thanks to help me how to fix this issue

NODE.JS: Why can't I get live reload with web pack?

IM SO FRUSTRATED RIGHT NOW, ive spent a whole day trying to get webpack to work, but every tutorial or documentation is terrible..it shouldnt be this hard..whats the point of these packages if they actually make you spend more time trying to configure them then saving time.
I just want the live reload to work. I've tried the inline method, iframe, hot module, the middleware with express. None of it works...Im using Node.js on atom, with safari browser.
I want it to work with express.
Can someone point me to a good tutorial...or explain step by step very simply..
Need help. please. no one every replies on these things! Thank you
GITHUB REPO LINK
webpack.config.js
const nodeExternals = require('webpack-node-externals');
module.exports =
{
entry: './app.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js',
},
devServer: {
port: 8000,
open: true,
inline: true
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
package.json
{
"name": "clinic8beauty",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"b": "webpack",
"s": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"es2015"
]
},
"author": "Kosta Pontidas",
"license": "ISC",
"dependencies": {
"body-parser": "^1.17.1",
"events": "^1.1.1",
"express": "^4.15.2",
"jquery": "^3.2.1",
"pug": "^2.0.0-beta.12",
"twilio": "^2.11.1",
"validator": "^7.0.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"node-sass": "^4.5.2",
"pug-html-loader": "^1.1.4",
"sass-loader": "^6.0.3",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4",
"webpack-hot-middleware": "^2.18.0",
"webpack-node-externals": "^1.5.4"
}
}
app.js requires
const express = require('express'),
app = express(),
events = require('events'),
eventEmitter = new events.EventEmitter(),
bodyParser = require('body-parser'),
validator = require('validator'),
client = require('twilio')('AC3cdbdc7ecb720d5521f41243450343e8',
'8f76c52d839dc25aa17ddc72b3b9d781');
You have target node in your config change it to web or remove it as default is web. It should fix your problem.
Can you try the following?
const nodeExternals = require('webpack-node-externals');
const path = require('webpack'); // <== added
module.exports =
{
entry: './app.js',
// target: 'node', <== deleted
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'dist'), //<== added
filename: 'app.bundle.js'
},
devServer: {
port: 8000,
open: true,
inline: true,
contentBase: [path.resolve(__dirname, 'dist')/* add other directories if needed */]
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
And run webpack-dev-server --progress instead of just webpack to start the server
Why not use nodemon globally and webpack to compile

Resources