We Keep Coding

Webpack on the backend: missing exports

I'm trying to use webpack on the backend to transpile this code (called sub.js):
export const foo1 = () => {
console.log("I'm foo1");
};
console.log('loaded');
I can compile it and then import it fine. On import (require) I see the 'loaded', but the imported object is empty and in particular has no function foo1.
This is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: `./sub.js`,
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: [
'#babel/plugin-proposal-class-properties'
]
},
}],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'backend.js'
},
mode: 'production',
};
My package.json:
{
"name": "sub",
"version": "1.0.0",
"description": "",
"main": "dist/backend.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.8",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.13.9",
"#babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
I test using:
> npx webpack && node --eval "r = require('./dist/backend.js'); console.log(r);"
asset backend.js 45 bytes [emitted] [minimized] (name: main)
runtime modules 396 bytes 2 modules
./sub.js 204 bytes [built] [code generated]
webpack 5.65.0 compiled successfully in 250 ms
loaded
{}
I was expecting to see:
loaded
{foo1: [Function]}
or similar.

Found the issue. Apparently you need to explicitly declare exported libraries in the output. Now that I've added this:
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'backend.js',
library: {
type: 'commonjs-module',
},
},
I get:
> npx webpack && node --eval "r = require('./dist/backend.js'); console.log(r);"
asset backend.js 192 bytes [emitted] [minimized] (name: main)
./sub.js 323 bytes [built] [code generated]
webpack 5.65.0 compiled successfully in 275 ms
loaded
{ foo1: [Function] }
as expected.
For reference https://webpack.js.org/configuration/output/#outputlibrary.

WebPack#5.38.1 with Babel-loader#8.2.2 error while building a react app

I am trying to set my development environment to start a project. at this point, I added webpack.config.dev.js file with some dependencies. Also, added babel-confing to the package.json directly instead of .babelrc file. I tried adding a couple of dependencies such as: "#babel/preset-env" and "#babel/preset-react" but didn't help. I appreciate it if anyone can help me understand how to fix this?
I am getting the below error while starting the webpack:
> start
> webpack serve --mode development --env development --hot --port 3000
ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /a/b/c/d/e/f/03/demos/<project-name>
✖ ｢wdm｣: asset main.js 408 KiB [emitted] (name: main)
runtime modules 25.9 KiB 10 modules
cacheable modules 339 KiB
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
modules by path ./node_modules/url/ 41.9 KiB
modules by path ./node_modules/url/node_modules/ 18.8 KiB 4 modules
modules by path ./node_modules/url/*.js 23.1 KiB 2 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
5 modules
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
ERROR in ./src/index.js 5:9
Module parse failed: Unexpected token (5:9)
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
|
| function Hi() {
> return <p>Hi.</p>;
| }
|
webpack 5.38.1 compiled with 1 error in 433 ms
ℹ ｢wdm｣: Failed to compile.
here is my package.json file:
{
"name": "ps-redux",
"description": "React and Redux Pluralsight course by Cory House",
"scripts": {
"start": "webpack serve --mode development --env development --hot --port 3000"
},
"dependencies": {
"bootstrap": "5.0.1",
"immer": "9.0.3",
"prop-types": "15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-toastify": "^7.0.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
},
"devDependencies": {
"#babel/core": "7.14.5",
"#babel/eslint-parser": "7.14.5",
"#babel/plugin-proposal-class-properties": "7.14.5",
"#babel/plugin-transform-react-jsx": "7.14.5",
"#babel/preset-env": "7.14.5",
"#babel/preset-react": "7.14.5",
"#testing-library/react": "11.2.7",
"#wojtekmaj/enzyme-adapter-react-17": "0.6.1",
"babel-loader": "8.2.2",
"babel-preset-react-app": "10.0.0",
"css-loader": "5.2.6",
"cssnano": "5.0.5",
"enzyme": "3.11.0",
"eslint": "7.28.0",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-react": "7.24.0",
"eslint-webpack-plugin": "2.5.4",
"fetch-mock": "9.11.0",
"html-webpack-plugin": "5.3.1",
"http-server": "0.12.3",
"jest": "27.0.4",
"json-server": "0.16.3",
"mini-css-extract-plugin": "1.6.0",
"node-fetch": "^2.6.1",
"npm-run-all": "4.1.5",
"postcss-loader": "5.3.0",
"react-test-renderer": "17.0.2",
"redux-immutable-state-invariant": "2.1.0",
"redux-mock-store": "1.5.4",
"rimraf": "3.0.2",
"style-loader": "2.0.0",
"webpack": "^5.38.1",
"webpack-bundle-analyzer": "4.4.2",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "3.11.2"
},
"engines": {
"node": ">=8"
},
"babel-cli": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
]
}
}
I also attached my project folder structure
and this is my webpack.config.dev.js file:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
process.env.NODE_ENV = "development";
module.export = {
mode: "development",
target: "web",
devtool: "cheap-module-source-map",
entry: "./src/index",
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/",
filename: "bundle.js",
},
devServer: {
stats: "minimal",
overlay: true,
historyApiFallback: true,
disableHostCheck: true,
headers: { "Access-Control-Allow-Origin": "*" },
https: false,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
favicon: "./src/favicon.ico",
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: ["babel-loader", "eslint-webpack-plugin"],
},
{
test: /(\.css)$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
extensions: [".js"],
},
};
My folder structure img:

'npm run build' by webpack, I got an error...help me

I got following error when I was transpiling the webpack.
**error message**
$ npm run build
> webpack
Hash: d3c6c864b2d5118a08d7
Version: webpack 4.8.3
Time: 399ms
Built at: 2018-06-04 20:51:32
1 asset
Entrypoint main = bundle.js
[0] ./src/index.js 249 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "../component/chatapp";
|
| ReactDOM.render(<App />, document.getElementById("root"));
|
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
+ 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! website#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the website#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\bca19\AppData\Roaming\npm-cache\_logs\2018-06-04T11_51_32_160Z-debug.log
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(path.resolve(__dirname, "src"), "index.js"),
output: {
path: path.resolve(__dirname, "public"),
filename: 'bundle.js'
},
mode: 'production',
resolve: {
extensions: ['js', '.jsx']
},
module: {
rules: [{
test: /\.(js|jsx)$/,
loader: "babel-loader",
include: [
path.resolve(__dirname + "component"),
path.resolve(__dirname + "src")
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
presets: ["react", "es2015"]
}
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
"css-loader",
"sass-loader"
]
})
}]
},
plugins: [
new HtmlWebpackPlugin({
title: "광talk",
filename: path.resolve(__dirname, "public", "index.html")
})
],
devtool: "inline-source-map",
devServer: {
contenBase: path.resolve(__dirname, "public"),
compress: true,
port: 3000
}
};
package.json
{
"name": "website",
"version": "1.0.0",
"description": "test website",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"express-handlebars": "^3.0.0",
"jquery": "^3.3.1",
"path": "^0.12.7",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"socket.io": "^2.1.1"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"zombie": "^6.1.2"
},
"babel": {
"presets": [
"es2015"
]
}
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "../component/chatapp";
ReactDOM.render(<App />, document.getElementById("root"));
chatapp.js
import React from "react";
class ChatApp extends React.Component {
render() {
return (
<div>mission success</div>
);
}
}
export default ChatApp;
I don't know why my codes are not working.

Maybe the path of the rule is wrong.Try
include: [
path.resolve(__dirname , "component"),
path.resolve(__dirname ,"src")
],

You are missing a dot before the file extension.
extensions: ['.js', '.jsx']

npm run dev compile but not generate bundle js

Trying to replicate an example that someone develops through a video to configure the development environment to work with React Js, I have encountered a problem, which em is very confusing, considering that I did everything in the same way .
After executing the npm run dev command, as I have it configured in the ** package.json **, the following error appears:
npm run dev
> reactnode#1.0.0 dev C:\Users\PterPmntaM\CursoReactJS\ReactNode_Scaffold
> nodemon --exec babel-node src/server.js
[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node src/server.js`
Live Reload listening on port 35729
app start over the port 8080
‼ ｢wdm｣: Hash: 13bdb96250e1132eff8a
Version: webpack 4.1.1
Time: 2340ms
Built at: 2018-3-17 15:29:23
Asset Size Chunks Chunk Names
bundle.js 97 KiB 0 [emitted] main
index.html 283 bytes [emitted]
Entrypoint main = bundle.js
[0] ./node_modules/fbjs/lib/emptyFunction.js 959 bytes {0} [built]
[1] ./node_modules/fbjs/lib/emptyObject.js 332 bytes {0} [built]
[2] ./node_modules/object-assign/index.js 2.06 KiB {0} [built]
[3] ./node_modules/react/index.js 190 bytes {0} [built]
[4] ./node_modules/fbjs/lib/focusNode.js 578 bytes {0} [built]
[6] ./node_modules/fbjs/lib/isTextNode.js 479 bytes {0} [built]
[7] ./node_modules/fbjs/lib/containsNode.js 923 bytes {0} [built]
[8] ./node_modules/fbjs/lib/shallowEqual.js 1.58 KiB {0} [built]
[9] ./node_modules/fbjs/lib/getActiveElement.js 912 bytes {0} [built]
[10] ./node_modules/fbjs/lib/EventListener.js 2.2 KiB {0} [built]
[11] ./node_modules/fbjs/lib/ExecutionEnvironment.js 935 bytes {0} [built]
[12] ./node_modules/react-dom/cjs/react-dom.production.min.js 90.5 KiB {0} [built]
[13] ./node_modules/react-dom/index.js 1.33 KiB {0} [built]
[14] ./node_modules/react/cjs/react.production.min.js 5.29 KiB {0} [built]
[15] ./src/client/index.jsx 567 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 531 KiB 0
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/client/index.html 606 bytes {0} [built]
i ｢wdm｣: Compiled with warnings.
Next, I will place part of the coigo where the error is supposed to be generated as it does not
package.json
{
"name": "reactnode",
"version": "1.0.0",
"description": "scaffoldproject",
"main": "index.js",
"scripts": {
"dev": "nodemon --exec babel-node src/server.js",
"build": "webpack"
},
"author": "PterPmntaM",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^3.0.6",
"node-sass": "^4.7.2",
"nodemon": "^1.17.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-middleware": "^3.0.1",
"webpack-livereload-plugin": "^2.0.0"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
webpack.config.js
import webpack from 'webpack';
import path from 'path';
import htmlWebpackPlugin from 'html-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
export default {
entry: './src/client/index.jsx',
output: {
path: path.resolve('src/js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({ template: './src/client/index.html' }),
new LiveReloadPlugin()
]
};
GitHub Repo

React, Webpack: bundle.js is not generated

Edit: The reason was that I was running webpack-dev-server, when running just webpack it worked.
I am using React and Webpack. The bundle.js is not generated. I found this question on SO that brought up the same issue, but I seem to have the required dependencies installed. Here is my webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
Here is my package.json:
{
"name": "plump",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fiskpatte/plump.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"bugs": {
"url": "https://github.com/fiskpatte/plump/issues"
},
"homepage": "https://github.com/fiskpatte/plump#readme",
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^2.1.1",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-router": "^2.4.0"
}
}
Any idea?
Edit. Output when running webpack:
Asset Size Chunks Chunk Names
bundle.js 1.19 MB 0 [emitted] main
0.63b359d04fe48d6168fa.hot-update.js 27.9 kB 0 [emitted] main
63b359d04fe48d6168fa.hot-update.json 36 bytes [emitted]
chunk {0} bundle.js, 0.63b359d04fe48d6168fa.hot-update.js (main) 1.11 MB [rendered]
[318] ./src/components/LoginPage.js 8.93 kB {0} [built]
[322] ./src/components/Lobby.js 12.2 kB {0} [built]
[323] ./src/components/SignUp.js 5.6 kB {0} [built]
[324] ./src/pages/Game.js 27.3 kB {0} [built]
+ 321 hidden modules
webpack: bundle is now VALID.

Theres probably something wrong with the output path .. can you try replacing the output path to ./dist

It is due to missing of some key-value pairs in scripts of package.json. Replace your scripts object with the following:
"scripts": {
"start": "npm run build",
"build": "webpack -p && webpack-dev-server"
},
"-p" means specially for production evnvironment of webpack.config.js. Then run this cmd: $ npm start
$ npm start will invoke npm run build cmd which in turn will invoke "webpack -p && webpack-dev-server"