webpack windows invalid character - node.js

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

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()]
};

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?

node js webpack Undefined envioronment variable

HHHi,
I'm trying to use the .env file to store the API id and key for the API I'm using and it's not working. My .env file is in the root of my working directory as well as the root of the repository where the .gitignore file is. It looks like this:
API_ID=XXXXXX
API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXX
I installed dotenv and in my index.js file in my server directory I call it like this:
const dotenv = require('dotenv');
dotenv.config();
then in my apiCall.js function I try to call the variables from the .env file like this:
const AYLIENTextAPI = require('aylien_textapi');
let textapi = new AYLIENTextAPI({
application_id: process.env.API_ID,
application_key: process.env.API_KEY
});
but the ID and Key are showing up as undefined. What am I doing wrong? I would really appreciate any help.
Thanks,
Mike
UPDATE:
this is my webpack.dev.js file:
const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/client/index.js',
output : {
libraryTarget: 'var',
library: 'Client'
},
mode: 'development',
devtool: 'source-map',
stats: 'verbose',
module: {
rules: [
{
test: '/\.js$/',
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/client/views/index.html",
filename: "./index.html",
}),
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
})
]
}
this is my package.json file:
{
"name": "example-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/server/index.js",
"build-prod": "webpack --config webpack.prod.js",
"build-dev": "webpack --config webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"aylien_textapi": "^0.7.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^2.3.5",
"webpack-dev-server": "^3.10.3",
"workbox-webpack-plugin": "^5.0.0"
}
}
figured it out. I can only access the environment variables on the server side.

Invalid configuration object -configuration.output.path after installing sass

I facing an issue while running webpack using the command npm run dev, after installing npm sass
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
Issue:
Invalid configuration object -configuration.output.path.
given my package.json and webpack.config.js.
Thanks in advance could somebody let me know what we went wrong, how could we resolve this issue.
Issue:
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path : ' dist',
filename : 'app.bundle.js'
},
module: {
rules: [
{ test: /\.scss$/, use: ['style-loader','css-loader', 'sass-loader'] }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Index Project Template',
minify: {
collapseWhitespace: true
},
hash: true,
template: './src/indextemp.ejs', // Load a custom template (ejs by default see the FAQ for details)
})
]
}
package.json
{
"name": "webpacks",
"version": "1.0.0",
"description": "Webpack Start",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
}
}

Why do I get this error when I run npm run build?

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' ] }
}
]
}
};

Resources