Why do I get this error when I run npm run build? - node.js

I first ran:
npm install babel-core babel-loader --save-dev
then I ran:
npm run build
and I got this following error:
> immutable-todo#1.0.0 build C:\Users\Ryan\Documents\to-do\immutable-redux- todo
> webpack
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.3
Time: 1285ms
+ 1 hidden modules
ERROR in ./src/app.js
Module build failed: Error: Couldn't find preset "react" relative to directory "C:\\Users\\Ryan\\Documents"
at C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation\file\options\option
-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (C:\Users\Ryan\Documents\to- do\immutable-redux-todo\node_modules\babel-core\lib\tran
sformation\file\options\option-manager.js:270:20)
at OptionManager.mergePresets (C:\Users\Ryan\Documents\to-do\immutable- redux-todo\node_modules\babel-core\lib\transf
ormation\file\options\option-manager.js:259:10)
at OptionManager.mergeOptions (C:\Users\Ryan\Documents\to-do\immutable- redux-todo\node_modules\babel-core\lib\transf
ormation\file\options\option-manager.js:244:14)
at OptionManager.init (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:374:12)
at File.initOptions (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation\f
ile\index.js:216:65)
at new File (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation\file\inde
x.js:139:24)
at Pipeline.transform (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation
\pipeline.js:46:16)
at transpile (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-loader\lib\index.js:41:20)
at Object.module.exports (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-loader\lib\index.js:
138:12)
Here is my package.json:
{
"name": "immutable-todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"immutable": "^3.8.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-redux": "^4.4.5",
"redux": "^3.4.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0"
}
}
I have been trying to search this four a long time with no luck, can you please help me understand what I am doing wrong and what I need to fix?
Thank you.
Here is my webpack.config.js:
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: [ 'es2015', 'react' ] }
}
]
}
};

Related

Working on a React App with a team using VSCode, when I save my code I don't see the updates, but my teammates can see theirs just fine

So I am working on my react web app with a team. We are all using Git/Gitlab.
Everyone was instructed to clone the project using git, and we all did so.
The problem is that when I run the project on VS CODE, I try to edit the file, save the file, and hope to see the changes In real time. But in order for me to see it, I have to turn off the project with Ctrl+C and redo "npm run dev", have it recompile, and then I'll see my changes after a minute.
Everyone else on the other hand can see their changes in real time.
Our file path is..
/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned
(I'm running a linux sub system (ubuntu) as well
So we run
npm install
AND
npm run dev
in the above location
Then we run...
npm install
AND
npm run start
in
/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned(this is the folder I cloned)/server (this is the backend folder)
Full Disclosure, I have been tinkering with VS Code like changing the integrated terminal using WSL, zsh and powerlevel9k extensions. But other than that, I don't see what the problem is.
Addition:
package.json
{
"name": "react-penny-earned",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack-dev-server --mode development",
"build": "npx webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.8.3",
"#babel/core": "^7.8.3",
"#babel/helper-compilation-targets": "^7.15.4",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"react-hot-loader": "^4.12.19",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"#babel/runtime": "^7.8.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.50",
"#mui/material": "^5.0.2",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^16.12.0",
"react-google-charts": "^3.0.15",
"react-icons": "^4.2.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
}
}
package.json (server)
{
"name": "react-ecosystems-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npx babel-node src/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "1.19.0",
"cors": "2.8.5",
"express": "4.17.1",
"uuid": "3.3.3"
},
"devDependencies": {
"#babel/core": "7.7.5",
"#babel/node": "7.7.4",
"#babel/preset-env": "7.7.6"
}
}
***Not sure if this should impact anything considering my teammates have the exact same configuration on their system
Webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
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: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true,
historyApiFallback: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};

Why is contextBridge not being imported in my Electron app?

I'm writing an Electron app with React and Typescript, using Webpack, Babel and ESLint but I'm having trouble setting:
mainWindow = new BrowserWindow({
title: "Biomech",
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
sandbox: true,
preload: path.join(__dirname, "./preload.js"),
nativeWindowOpen: true,
},
});
which I want as a security measure.
The reason being that, if I set the webPreferences as specified above, I need to use contextBridge and a preload script that binds the functions that are using IPC to the window. And the problem is that contextBridge is not being properly imported in my preload.ts:
import { contextBridge, ipcRenderer } from "electron";
import { readFileSync } from 'fs';
import { History } from 'history';
import { LIST_DRIVE_FILES_CHANNEL, LOAD_PREV_TEST_RESULTS_CHANNEL, OAUTH2_ACCESS_TOKEN_REQUEST_CHANNEL } from "../src/constants/ipcChannels";
import { VISUALIZE_RESULTS_PATH } from "../src/constants/urls";
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"api", {
exchangeCodeForAccessToken: (code: string) => {
ipcRenderer.invoke(OAUTH2_ACCESS_TOKEN_REQUEST_CHANNEL, code);
},
listDriveFiles: (accessToken: string) => {
ipcRenderer.invoke(LIST_DRIVE_FILES_CHANNEL, accessToken);
},
openDirectoryDialog: (history: History) => {
ipcRenderer.invoke(LOAD_PREV_TEST_RESULTS_CHANNEL).then((dialog: any) => {
if (dialog.canceled) { // canceled with one l is correct
return;
} else {
const selectedDirectory = dialog.filePaths[0];
console.log(readFileSync(selectedDirectory + "/README.md", 'utf-8'));
history.push(VISUALIZE_RESULTS_PATH);
}
})
}
}
);
The way I see it it's properly used like the examples I've seen here in SO, or in the Electron docs. But when I run my main process script: npm run dev:electron which is specified in my package.json:
{
"name": "electron-react-ts-app",
"version": "1.0.0",
"description": "Electron + React + Typescript",
"main": "./dist/main.js",
"preload": "./dist/preload.js",
"scripts": {
"dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
"dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
"dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.js --mode development",
"build:electron": "NODE_ENV=production webpack --config webpack.electron.config.js --mode production",
"build:react": "NODE_ENV=production webpack --config webpack.react.config.js --mode production",
"build": "npm run build:electron && npm run build:react",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
},
"keywords": [],
"license": "MIT",
"build": {
"files": [
"dist/",
"node_modules/",
"package.json"
],
"productName": "Example",
"appId": "com.example.app",
"directories": {
"output": "dist"
}
},
"devDependencies": {
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#babel/preset-typescript": "^7.9.0",
"#types/electron-devtools-installer": "^2.2.0",
"#types/react-router-dom": "^5.1.7",
"#types/regenerator-runtime": "^0.13.0",
"dpdm": "^3.6.0",
"electron": "^11.2.1",
"electron-builder": "^22.7.0",
"electron-devtools-installer": "^3.1.1",
"eslint": "^7.18.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.1",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"react-router-dom": "^5.2.0",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
},
"dependencies": {
"#babel/core": "^7.12.10",
"#popperjs/core": "^2.6.0",
"#types/node": "^14.14.22",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"bootstrap": "^4.5.3",
"chokidar": "^3.5.1",
"core-js": "^3.8.3",
"css-loader": "^5.0.1",
"electron-fetch": "^1.7.3",
"fsevents": "^2.3.1",
"ini": "^2.0.0",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"style-loader": "^2.0.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
},
"lint-staged": {
"*.+(js|jsx)": "eslint --fix",
"*.+(json|css|md)": "prettier --write"
}
}
I get the following error: Cannot read property 'exposeInMainWorld' of undefined
webpack 5.19.0 compiled successfully in 1793 ms
App threw an error during load
TypeError: Cannot read property 'exposeInMainWorld' of undefined
at Object../electron/preload.ts (/Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:24:53)
at __webpack_require__ (/Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:128:41)
at /Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:252:11
at Object.<anonymous> (/Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:254:12)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
at Module.load (internal/modules/cjs/loader.js:992:32)
at Module._load (internal/modules/cjs/loader.js:885:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12738)
at Module.require (internal/modules/cjs/loader.js:1032:19)
I've checked out this repo regarding Electron security and it doesn't look like he's doing things too different, at least at first glance, but I'm clearly messing something up.
Here's my webpack config (webpack.electron.config.js) in case it's useful:
const path = require("path");
module.exports = [
{
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
devtool: "source-map",
entry: {
main: {
import: "./electron/main.ts",
dependOn: "preload"
},
preload: "./electron/preload.ts"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
},
target: "electron-main",
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
node: {
__dirname: false,
},
},
];
I think the issue resides in you webpack.config file:
entry: {
main: {
import: "./electron/main.ts",
dependOn: "preload"
},
preload: "./electron/preload.ts"
},
Might be that webpack tries to resolve all "preload.ts" dependency at compile time, plus tries to bundle it together with main.ts file. And in such case it will never get access to contextBridge. The preload.js file should only be run in a separate "context" - "Isolated World" as they refer in the docs.
What I would try is:
remove the dependOn: and preload: lines from you webpack config.
convert preload.ts file to JS (ie. to CommonJS format) - try doing that with TS CLI for now
Your preload.js file should look more or less like this:
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld(
'electron',
{
doThing: () => ipcRenderer.send('do-a-thing')
}
)
copy preload.js to a __dirname (in my case it was /dist)
run electron again
That was the only way I could access "contextBridge" object.

Fixing Webpack's Watch Option

I had code that worked just fine, but now I've updated some packages, especially webpack, and I'm getting some warnings that I'd like to remove.
When I run the command npm run watch, I get the following error:
[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
My package.json is as follows:
{
"name": "simple-flask-react-template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"author": "jadiker",
"license": "None",
"homepage": "https://github.com/rbarbaresco/simple-flask-react-template#readme",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.2.1",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"jquery": "^3.5.1",
"popper.js": "^1.14.7",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^5.11.1",
"webpack-cli": "^3.3.10"
},
"babel": {
"presets": [
"env",
"react"
]
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"query-string": "^6.11.1",
"react-router-dom": "^5.1.2"
}
}
My webpack.config.js is as follows:
const webpack = require('webpack');
const config ={
mode: 'development',
entry: {
login: './js/login.jsx',
signup: './js/signup.jsx',
index: './js/index.jsx',
search: './js/search.jsx',
ask: './js/ask.jsx',
question: './js/question.jsx',
help: './js/help.jsx',
test: './js/test.jsx',
},
devtool: 'inline-source-map',
output: {
path: __dirname + '/dist/bundle',
filename: '[name].bundle.js',
},
resolve:{
extensions:[
'.js',
'.jsx',
'.css'
]
},
module:{
rules:[
{
test:/\.jsx?/,
exclude:/node_modules/,
use:'babel-loader'
},
{
test:/\.(jpe?g|png|gif|svg)$/i,
loader:"file-loader",
},
{
test:/\.css$/,
use:[
'css-loader'
],
},
]
}
};
module.exports = config;
What can I change in the code in order to get that warning to go away?

How to fix 'Plugin/Preset files are not allowed to export objects, only functions.' on 'npm run' when setting up Webpack for React?

I am running through a React tutorial and have hit this problem when I run npm run on my project. The larger error code is:
ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /S8L27nodeproject/node_modules/babel-preset-react/lib/index.js
Looking at similar questions I thought my versions of Babel were not up-top-date, seeing as babel-loader is a different version to the others, but when I run npm outdated they appear fine.
My package.json file is:
{
"name": "s8l27nodeproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p",
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"webpack": "^4.25.1",
"webpack-dev-server": "^3.1.10"
},
"devDependencies": {
"#babel/core": "^7.1.5",
"webpack-cli": "^3.1.2"
}
}
Whilst my webpack.config.js file is:
module.exports = {
entry: [
'./src/index.jsx'
],
output: {
filename: './bundle.js'
},
module: {
rules: [{
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
}
Would anyone know what I could do to fix this problem?

webpack windows invalid character

I am creating a simple react project using webpack npm and babel.
I am able to install all the dependencies using npm.
when I try to start the webpack-dev-server, it errors out.
Can someone please suggest a way out.
I use the command npm run dev to start, defined in the package.json
here is my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var config = {
entry: "D:\github\UI\ReactWebpackBabel\app\index.jsx",
output: {
path: "D:\github\UI\ReactWebpackBabel\build",
filename: 'bundle.js',
publicPath: '/':
},
devtool: 'source-map',
devServer: {
inline: true,
contentBase: BUILD_DIR,
port: 3333
},
module: {
loaders: [{
test: /\.jsx?/,
include: "D:\github\UI\ReactWebpackBabel\app\index.jsx",
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015', 'react']
}
}]
}
}
and here is my package.json
{
"name": "reactwebpackbabel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "D:\\github\\UI\\ReactWebpackBabel\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js --config D:\\github\\UI\\ReactWebpackBabel\\code\\ReactWebpackBabel\\webpack.confg.js",
"build": "webpack --config D:\\github\\UI\\ReactWebpackBabel\\code\\ReactWebpackBabel\\webpack.confg.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-class": "^15.6.2",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"webpack": "^3.8.0",
"webpack-dev-server": "^2.9.2"
}
}
You should use webpack-dev-server.cmd not *.js file. Especially on Windows ;)
It stays here -> node_modules/.bin/webpack-dev-server.
It should also run without full path. Npm script will locate it in node_modules.
Check out getting started: https://github.com/webpack/webpack-dev-server

Resources