I have been provided a code base which has reactJS included in chunks, it is not a complete reactJS project. I do not have much experience with webpacks, reactJS, nodeJS. Since there is no "start" command in "scripts" of package.json, it won't run the project. Upon opening index.html, all I see is the non-react part, the reactJS components are not showing on the browser. I will share with you my package.json and webpack.config.js files, please kindly let me know how to run it on node server.
Package.json:
"main": "webpack.config.js",
"scripts": {
"build": "webpack && uglifyjs ./assets/build/postadd.js -c -m -o ./assets/build/postadd.min.js "
}
webpack.config.js:
debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: "inline-sourcemap" ,
entry: {
postadd: "./js/postadd/main.js",
search: "./js/search/main.js"
},
output: {
path: __dirname+ "/assets/build/",
filename: "[name].js"
}
There is no command in scripts other than "build". If you need any more details please let me know, I am stuck.
Related
Pasted below is a node:buffer error that I've received when using a link to a local route in nextjs. Anyone know how to solve this?
I see: https://github.com/vercel/next.js/discussions/33982
thanks!
node:buffer
Module build failed: UnhandledSchemeError: Reading from "node:buffer" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
So I had this problem too - the discussion above links you to file-type, which is where I actually eventually fell on the answer for this.
First of all, I am now using react-app-rewired - this allows me to change the webpack config without ejecting your project. That's the first thing to install. There are other packages that will do this too and some people are concerned that this rewired package is only 'lightly' maintained by the community.
You then need to create in the root of your project a file called 'config-overrides.js'
This is what I have inside my file. It covers a few things other than node:buffer because I need other things too (like fs and stream). I'm sure you can modify it as you need:
const webpack = require("webpack");
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve("url"),
fs: require.resolve("graceful-fs"),
buffer: require.resolve("buffer"),
stream: require.resolve("stream-browserify"),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
const mod = resource.request.replace(/^node:/, "");
switch (mod) {
case "buffer":
resource.request = "buffer";
break;
case "stream":
resource.request = "readable-stream";
break;
default:
throw new Error(`Not found ${mod}`);
}
}),
);
config.ignoreWarnings = [/Failed to parse source map/];
return config;
};
You need to make sure that the packages that you use in that file are installed, e.g.
npm install url graceful-fs buffer stream-browserify --save
After that I changed the 'scripts' area in my package.json to be as follows:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"eject": "react-scripts eject"
}
My package then compiled correctly and ran fine.
I'm trying to migrate a Node.js webapp from Parcel 1 to Parcel 2.
I have a function in the client-side javascript code (that Parcel bundles) that calls another function I'm importing from a utility functions file in the back-end Node.js code.
All other front-end functions work and all other Node.js functions which require Node.js process still work.
When I trigger calling this function in the code:
getCloudinaryUrl.js:22 Uncaught (in promise) ReferenceError: process is not defined
Everything worked just fine in Parcel 1, so I'm assuming this is a problem with my Parcel 2 configuration, not with Cloudinary.
The offending lines:
In getColudinaryUrl.js (back-end):
const { Cloudinary } = require('cloudinary-core');
...
// this is what triggers the error
const cloudName = process.env.CLOUDINARY_CLOUD_NAME;
const cl = new Cloudinary({
cloud_name: cloudName,
});
In index.js (front-end):
import getCloudinaryUrl from './../../utils/getCloudinaryUrl';
// then I'm calling it later on in the code
In server.js (back-end)
This is the only place in the code where I do dotenv.config:
const dotenv = require('dotenv');
...
dotenv.config({ path: './.env' });
My OLD package.json with Parcel 1 which worked:
...
"scripts": {
...
"watch:js": "parcel watch ./public/js/index.js --public-url /js --out-dir ./public/js --out-file bundle.js",
"build:js": "parcel build ./public/js/index.js --public-url /js --out-dir ./public/js --out-file bundle.js"
},
"devDependencies": {
...
"parcel-bundler": "1.12.3",
...
},
"engines": {
"node": "^14"
}
My NEW package.json file which doesn't work:
...
"scripts": {
...
"watch:js": "rm -rf .parcel-cache/ && parcel watch ./public/js/index.js --public-url /js --dist-dir ./public/js",
"build:js": "rm -rf .parcel-cache/ && parcel build ./public/js/index.js --public-url /js --dist-dir ./public/js"
},
"devDependencies": {
...
"parcel": "^2.0.0-nightly.524",
...
},
"engines": {
"node": "^14"
},
"default": "./public/js/bundle.js",
"targets": {
"main": false,
"default": {
"includeNodeModules": true,
"scopeHoist": false
}
}
I added rm -rf .parcel-cache/ && since otherwise a second build would always fail.
I read the migration guide and several other pages:
https://v2.parceljs.org/getting-started/migration/
https://v2.parceljs.org/features/module-resolution/
https://v2.parceljs.org/features/node-emulation/
It wasn't easy for me to read and, being rather new, Parcel 2 doesn't have many resources online to read over. That's how I ended up with the new package.json file above which gave me the least amount of errors (excluding the one above).
If there's anything else I should add to the question, I will gladly provide it.
How do I configure Parcel 2 to detect process in that one file?
It could be as easy as adding CLOUDINARY_CLOUD_NAME=something to a .env file in the project root?
A bit late, but for anyone ending up here, I eventually fixed it by removing the engines key from the package.json.
I have a problem with my create react app. When I run dev version everything is fine. When I'm trying to run build version I get error:
Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
at n (react-datepicker.js:4634)
I tried this: babel.rc file
{
"presets": ["es2015", "stage-0"],
"env": {
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development": {
"plugins": [[
"react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
// if you use React Native, pass "react-native" instead:
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
}]
// note: you can put more transforms into array
// this is just one of them!
}
]]
}
}
}
and my build command is:
"build": "set NODE_ENV=production && react-scripts build",
Any idea why this happens or where should I look for solutions?
Thanks
In my Express/React app, I am using Webpack to handle server-side rendering. However, I am experiencing a build error related to environment variables that I'm trying to access in my Express server script.
In the server script, index.js, I am setting a few variables like so:
const gitCommit = process.env.GIT_COMMIT || require("./gitignore/git_commit.js"),
buildDate = process.env.BUILD_DATE || require("./gitignore/build_date.js")
And since I am running a test production build on my local machine, I delete the gitignore/ directory and set those environment variables:
$ export GIT_COMMIT="test commit hash"
$ export BUILD_DATE="test build date"
Then I npm run build, which executes the following scripts:
"build:client": "webpack --config webpack.config.js",
"build:server": "webpack --config webpack.server.config.js",
"build": "npm run build:client && npm run build:server"
build:client executes with no problem, but build:server throws errors...
ERROR in ./index.js
Module not found: Error: Can't resolve './gitignore/git_commit.js' in '/Users/filepath'
# ./index.js 12:38-74
ERROR in ./index.js
Module not found: Error: Can't resolve './gitignore/build_date.js' in '/Users/filepath'
# ./index.js 13:42-78
implying that the two environment variables referenced in index.js can't be found, and so it's looking for the gitignore/ instead, which shouldn't exist (I mean, it does exist locally, but I've deleted since I'm simulating a production build).
Here is the complete webpack.server.config.js:
const fs = require("fs"),
path = require("path")// ,
// ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
"entry": path.resolve(__dirname, "index.js"),
// keep node_module paths out of the bundle
"externals": fs.readdirSync(path.resolve(__dirname, "node_modules")).concat(["react-dom/server", "react/addons"]).reduce((ext, mod) => {
ext[mod] = `commonjs ${mod}`
return ext
}, {}),
"module": {
"loaders": [
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx$/
},
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.js$/
}
]
},
"node": {
"__dirname": true,
"__filename": true
},
"output": {
"filename": "server.bundle.js"
},
"target": "node"
}
Now I expect that gitignore/ would not be found, but what I don't understand is why the two environment variables that I set are not being detected by index.js - they are definitely set in the console before I even run the build command. If I console.log() them in the beginning of webpack.server.config.js, it logs them correctly, and if I run my development version instead (which doesn't use the server config), I can log them correctly in index.js. What gives?
Node version 6.11.1, NPM version 3.10.10, Webpack version 2.6.0.
Your environment variables are only available when Webpack runs, but not when you execute your index.js.
You will need to use the EnvironmentPlugin in your Webpack config like that:
plugins: [new webpack.EnvironmentPlugin(['GIT_COMMIT ', 'BUILD_DATE'])]
That plugin will replace the variables by their actual values.
HINT: Do not use ||. Webpack does not know how to optimize it. Try the ternary operator:
const gitCommit = (process.env.GIT_COMMIT) ? (
process.env.GIT_COMMIT
) : (
require('./gitignore/git_commit.js')
);
Webpack will bundle this to:
const gitCommit = (true) ? (
"test commit hash"
) : (
require('./gitignore/git_commit.js')
);
No IgnorePlugin is needed. Even better, with the UglifyJSPlugin, your code will be optimized to const gitCommit = "test commit hash";. In some cases gitCommit is removed completely as a variable. Its string value will be used instead anywhere where you applied gitCommit.
I'm using electron-builder (16.6.2) to package my electron application which includes keytar (3.0.2) as a prod dependency.
package.json file includes:
"scripts": {
"postinstall": "install-app-deps",
"compile:dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
"compile": "webpack --config webpack.build.config.js",
"dist": "yarn compile && build"
},
"build": {
"appId": "com.myproject",
"asar": true,
"files": [
"bin",
"node_modules",
"main.js"
]
}
When I run the .app on the same system it runs fine. When I try running it on a different system (or deleting my node_modules) it fails to find keytar.node. When keytar is built, it includes a fully qualified path to that image for my system. I get the following error in the console:
Uncaught Error: Cannot open /Users/Kevin/Work/myproject/node_modules/keytar/build/Release/keytar.node
Error: dlopen(/Users/Kevin/Work/myproject/node_modules/keytar/build/Release/keytar.node,
1): image not found
I must be missing a step in the build process.
As it turns out, I was using keytar in the renderer process. I moved keytar into the main process (which doesn't go through Webpack / Babel) and gets packed correctly by electron-builder.
main.js
ipcMain.on('get-password', (event, user) => {
event.returnValue = keytar.getPassword('ServiceName', user);
});
ipcMain.on('set-password', (event, user, pass) => {
event.returnValue = keytar.replacePassword('ServiceName', user, pass);
});
Then from the renderer process I can call
const password = ipcRenderer.sendSync('get-password', user);
or
ipcRenderer.sendSync('set-password', user, pass);
window.require("electron").remote.require("keytar")
Since you are working on renderer process and want to use native api from system or main process.
Update:
I found (as per the OP) that transpiling my main thread code (which uses keytar) resulted in calls to keytar functions returning TypeError: keytar.findPassword is not a function.
I had to use webpack-asset-relocator-loader to bundle keytar successfully:
npm i -DE #vercel/webpack-asset-relocator-loader
Add the following rule to your webpack.config.js:
module: {
rules: [{
test: /\.node$/,
parser: { amd: false },
use: {
loader: "#vercel/webpack-asset-relocator-loader",
options: {
outputAssetBase: "native_modules"
}
}
},
// <other rules>
],
// rest of config
}
Solution found in this Github issue.
The information below still stands for including binary assets in your webpack build.
If you have to transpile code that requires a binary file, you can add file-loader to your webpack config.
Install
npm i -D file-loader
or
yarn add -D file-loader
webpack config (to include a .dat file)
...,
module: {
rules: [{
...
}, {
test: /\.dat$/,
use: {
loader: "file-loader"
}
}]
},
...
If you want to preserve the filename, you can pass name options to the loader:
use: {
loader: "file-loader",
options: {
name: "[name].[ext]"
}
}
More information on the file-loader Github repo.