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.
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.
nodemon throw the error when use async/await syntax:
**/node_modules/#babel/runtime/helpers/esm/asyncToGenerator.js:17
export default function _asyncToGenerator(fn) {
^^^^^^
SyntaxError: Unexpected token export
but it works well with import/export syntax.
package.json
{
"scripts": {
"dev": "nodemon --exec babel-node server/index.js",
}
"dependencies": {
"#babel/polyfill": "^7.2.5",
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/node": "^7.2.2",
"#babel/preset-env": "^7.2.3",
}
}
.babelrc
{
"presets": [
"#babel/preset-env"
]
}
asyncToGenerator.js
function asyncGeneratorStep(...) { ... }
export default function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
But I think it probably goes wrong because of my babel setting.
BTW, when I use typeof, it throws the same error
**/node_modules/#babel/runtime/helpers/esm/typeof.js:3
export default function _typeof(obj) {
^^^^^^
SyntaxError: Unexpected token export
update 6/12, 2020:
structure:
src (vue app)
server (express app)
|---- src
|---- babel.config.js
|---- index.js
package.json
babel.config.js
In this project, I have two babel config, one is for the vue's app, and another is for the express. What I want is running these apps at the project's root path.
And in the beginning, my script about running express is
nodemon --exec babel-node server/index.js
It can run express, but it gets the wrong babel config(project/babel.config.js)
And the solution is just to point out the specific path which babel confg you want to use(project/server/babel.config.js). So the correct script to run the express is
nodemon --exec babel-node --config-file ./server/babel.config.js server/index.js",
answering your comment:
nodemon doesn't know about babelrc (and it shouldn't). And babel (AFAIK) doesn't allow you to select the babelrc file that you want to use.
I think that you should merge your babelrc files and set the env flag when running babel-node. Like this: babeljs.io/docs/en/6.26.3/babelrc#env-option
Another option would be to make a script that renames the babelrc file each time the app is reloaded, or something like that (I don't understand why you need 2 .babelrc files)
In an answer no longer visible (probably deleted by a moderator) I read that there are more .babelrc files in the project.
From babel docs it seems that the .babelrc needs to be in the same directory of the subpackage. I suggest you to read that doc, probably you can find the solution that better fits your requirements.
Sorry for the vague answer, but due to the lack of details in your question (server/index.js file content, directories structure, etc.) I can't do better.
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.
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.