How to build express use webpack? - express

I am a beginner, just started to learn express and webpack, I tried to use the initial express file
Trying to use webpack for packaging, I keep getting errors
The reason for this is because I want to run my system in a non-node.js environment
Is my direction wrong?
The express project is create with express --view=ejs myapp
I didn't make any changes
webpack.config.js
const path = require('path');
const clientConfig = {
resolve: {
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
entry: {
'index': './app.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}
module.exports = [clientConfig];
package.json
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"webpack": "webpack"
},
"browser": {
"crypto": false
},
"dependencies": {
"cookie-parser": "~1.4.4",
"crypto-browserify": "^3.12.0",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"path": "^0.12.7",
"twig": "~0.10.3"
},
"main": "app.js",
"devDependencies": {
"webpack": "^5.26.3",
"webpack-cli": "^4.5.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Thanks for any guidance and comments

You can't run Express in a non-nodejs environment. Express depends upon the nodejs run-time library such as the http module so it can't run without that library. webpack can't overcome that.
You can use webpack to build either plain Javascript with no external dependencies or with dependencies that you have independent libraries for that can be included in the webpack bundle or with dependences that are present in whatever environment you want to run it in.

Related

Local package dependencies conflicting with the main project dependencies

I started learning about how to create our own npm package and i created one. Now in this package, i want to create a dialog box for react native apps using typescript. Here are my files;
Package.json
{
"name": "rn-dialog",
"version": "1.0.0",
"description": "This is a simple dialog box package for react native app",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [
"react-native",
"react-native-dialog",
"rn-dialog",
"rn-dialog-box",
"react",
"react-native-dialog-box",
"popup"
],
"author": "Irfanwani <irfanwani347#gmail.com>",
"license": "ISC",
"files": [
"lib"
],
"peerDependencies": {
"react": ">=18.0.0",
"react-native": ">=0.69.6"
},
"devDependencies": {
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.4",
"typescript": "^4.8.4"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"jsx": "react-native",
"lib": ["dom", "ESNext"],
"declaration": true,
"sourceMap": true,
"outDir": "./lib",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
},
"exclude": ["node_modules"],
"include": ["./src/**/*.tsx", "./src/**/*.ts"]
}
index.tsx (inside the src folder)
import React from "react";
import { Text, View } from "react-native";
const Dialog = () => {
return (
<View>
<Text>This is from Dialog</Text>
<Text>Hope it works, inshaallah!!!</Text>
</View>
);
};
export default Dialog;
As you can see my devDependencies to build this component and after installing them, i also get react and react native installed with latest versions.
So when i try to pull this package locally into my project (expo project), it gives an error;
React Native version mismatch.
JavaScript version: 0.70.2 Native version: 0.69.0
I tried to run npm install --production on my package but it didn't work.
Any help will be appretiated!
You may want to change your devDependencies to:
"devDependencies": {
"#types/react": "^18.0.0",
"#types/react-native": "^0.69",
"typescript": "^4.8.4"
}
After searching a lot, i came across this answer and this helped.
We only need a package called install-local which installs local packages as other remote packages.

wrangler dev failed using #cfworker/web

I'm trying to deploy a project on Cloudflare workers using wrangler. I'm using the #cfworker/web package for routing. I've only setup a route at / for testing but it doesn't seem to work.
Here's the dev output:
> wrangler dev
./node_modules/#cfworker/web/dist/application.js 31:30
Module parse failed: Unexpected token (31:30)
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
| }
| catch (err) {
> console.error(err?.stack ?? err);
| if (err instanceof HttpError) {
| return err.toResponse();
# ./node_modules/#cfworker/web/dist/index.js 3:0-33 3:0-33
# ./src/index.ts
Error: webpack returned an error. Try configuring `entry` in your webpack config relative to the current working directory, or setting `context = __dirname` in your webpack config.
my package.json:
{
"name": "my-project",
"main": "./src/index.ts",
"scripts": {
"dev": "wrangler dev",
"preview": "wrangler preview --watch",
"build": "wrangler build",
"publish": "wrangler publish"
},
"devDependencies": {
"#babel/cli": "^7.13.16",
"#babel/core": "^7.14.0",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
"#babel/plugin-proposal-optional-chaining": "^7.13.12",
"#babel/plugin-transform-runtime": "^7.13.15",
"#babel/preset-env": "^7.14.1",
"#babel/preset-typescript": "^7.13.0",
"#cloudflare/workers-types": "^2.2.2",
"babel-loader": "^8.2.2",
"typescript": "^4.2.4",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0"
},
"dependencies": {
"#cfworker/web": "^1.6.11"
}
}
my webpack.config.js:
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.ts',
output: {
filename: 'worker.js',
path: path.join(__dirname, 'dist'),
},
performance: {
hints: false,
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-typescript',
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
],
},
},
],
},
}
I can't figure out if there's something wrong with my webpack config or if there something else.
I managed to get it working by changing the webpack config at line
exclude: /(node_modules|bower_components)/,
to
include: /(node_modules\\#cfworker\\web|src)/,
It seems that the #cfworker/web module is using optional chaining and nullish coalescing and was excluded from the babel-loader.

How to add PostCSS PreCSS plugin to project

I am new in PostCSS and I don't know, how to add preCSS plugin. Basically, I am using Tailwind, where is recommend PostCSS. But till today, I always used Sass in my projects. With this preCSS plugin, I can use Sass syntax - that's the goal.
My packagake.json
{
"name": "zs-skalova-layout-only",
"version": "1.0.0",
"description": "",
"main": "tailwind.config.js",
"scripts": {
"dev": "postcss css/tailwind.css -o tailwind-compil.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.1.0",
"postcss": "^8.2.1",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.2"
},
"devDependencies": {
"precss": "^4.0.0"
}
}
and here is my postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
precss: {},
}
}
No Webpack, Gulp or etc. solutions please.
Thanks for your help

Issue using extract-text-webpack-plugin

I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : './src/app.js',
output : {
filename : './dist/bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename : 'app.bundle.css'
}),
]
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
app.js:
var css = require('../css/app.scss');
console.log("This is a test Hi from webpack !!!");
I able to generate a new css file for the compiled sass files
please go through repo for your reference working example
your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files
live example

ES6 Export with Babel

Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.
I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.
I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.
src/index.js
const test = "test";
export default test;
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: [
"babel-polyfill",
"./src/index"
],
output: {
//path: path.join(__dirname, "lib"),
//filename: "[name].js"
filename: "./lib/index.js"
},
// import bare, .js, and .jsx files
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: "source-map",
module: {
loaders: [
{
loader: "babel-loader",
// only load src
include: [
path.resolve(__dirname, "src")
],
// only compile .js and .jsx files
test: /\.jsx?$/,
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
//plugins: ["transform-decorators-legacy"],
presets: ["es2015", "stage-0", "react"]
}
},
]
},
debug: true
};
package.json
{
"name": "test-package",
"version": "0.0.1",
"description": "test",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"es6"
],
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"homepage": "https://github.com/xxx/xxx#readme",
"dependencies": {
"babel-polyfill": "^6.5.0",
"babel-runtime": "^6.5.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack -p
other project
npm i ../test-package
(verify actually installed, search for "test" in lib/index.js and find what should be the export)
import test from "test-package";
console.log(test);
console.log(Object.keys(test));
output: empty object, empty array
Why not trying
import * as test from "test-package";
And then
console.log(test);