Develop Reference

Vite builds locally; Deploying to heroku timeout

We have a react app that we were building using webpack, but are trying to migrate into Vite the significantly lower build times.
We've successfully refactored our build code to use vite, where builds and dev server run successfully when we run them locally. However, whenever we deploy to heroku, and the build script starts... the build simply stalls on the while transforming the js files.
Log Below:
...
2023-02-05T19:26:35.377Z vite:resolve 2.32ms css_variables/colors.css -> /tmp/build_38ed17db/src/css/css_variables/colors.css
2023-02-05T19:26:35.861Z vite:resolve 0.33ms css_variables/durations.css -> /tmp/build_38ed17db/src/css/css_variables/durations.css
2023-02-05T19:26:36.059Z vite:resolve 0.12ms css_variables/sizes.css -> /tmp/build_38ed17db/src/css/css_variables/sizes.css
2023-02-05T19:26:36.090Z vite:resolve 0.12ms css_variables/indices.css -> /tmp/build_38ed17db/src/css/css_variables/indices.css
2023-02-05T19:26:36.175Z vite:resolve 0.22ms index.css -> /tmp/build_38ed17db/src/css/index.css
2023-02-05T19:26:36.210Z vite:resolve 0.12ms nav_bar.css -> /tmp/build_38ed17db/src/css/nav_bar.css
2023-02-05T19:26:36.340Z vite:resolve 0.19ms other_pages/auth_page.css -> /tmp/build_38ed17db/src/css/other_pages/auth_page.css
2023-02-05T19:26:36.460Z vite:resolve 0.37ms other_pages/page.css -> /tmp/build_38ed17db/src/css/other_pages/page.css
2023-02-05T19:26:36.724Z vite:resolve 0.19ms other_pages/simple_pages.css -> /tmp/build_38ed17db/src/css/other_pages/simple_pages.css
2023-02-05T19:26:37.009Z vite:resolve 0.18ms superadmin/superadmin_page.css -> /tmp/build_38ed17db/src/css/superadmin/superadmin_page.css
2023-02-05T19:26:37.133Z vite:resolve 0.16ms other_pages/pricing_calculator_page.css -> /tmp/build_38ed17db/src/css/other_pages/pricing_calculator_page.css
2023-02-05T19:26:37.954Z vite:resolve 0.20ms other_pages/project_portfolio_page.css -> /tmp/build_38ed17db/src/css/other_pages/project_portfolio_page.css
I've been scratching my head for days, because there are no log outputs for an error having occurred, and I've run out of options for searching online for solutions to this problem.
Our config looks as follows:
import { defineConfig, loadEnv } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";
import react from "#vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-polyfill-node";
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
import svgr from "vite-plugin-svgr";
import inject from "#rollup/plugin-inject";
import progress from 'vite-plugin-progress'
import dns from "dns";
dns.setDefaultResultOrder("verbatim");
export default defineConfig(({ command, mode, ssrBuild }) => {
const env = loadEnv(mode, process.cwd(), "");
return {
base: "/",
root: "./",
resolve: {
alias: {
"react-native": "react-native-web",
"src": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./src"),
util: "rollup-plugin-node-polyfills/polyfills/util",
sys: "util",
events: "rollup-plugin-node-polyfills/polyfills/events",
stream: "rollup-plugin-node-polyfills/polyfills/stream",
path: "rollup-plugin-node-polyfills/polyfills/path",
querystring: "rollup-plugin-node-polyfills/polyfills/qs",
punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
url: "rollup-plugin-node-polyfills/polyfills/url",
string_decoder:
"rollup-plugin-node-polyfills/polyfills/string-decoder",
http: "rollup-plugin-node-polyfills/polyfills/http",
https: "rollup-plugin-node-polyfills/polyfills/http",
os: "rollup-plugin-node-polyfills/polyfills/os",
assert: "rollup-plugin-node-polyfills/polyfills/assert",
constants: "rollup-plugin-node-polyfills/polyfills/constants",
_stream_duplex:
"rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
_stream_passthrough:
"rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
_stream_readable:
"rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
_stream_writable:
"rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
_stream_transform:
"rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
timers: "rollup-plugin-node-polyfills/polyfills/timers",
console: "rollup-plugin-node-polyfills/polyfills/console",
vm: "rollup-plugin-node-polyfills/polyfills/vm",
zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
tty: "rollup-plugin-node-polyfills/polyfills/tty",
domain: "rollup-plugin-node-polyfills/polyfills/domain",
buffer: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
process: "rollup-plugin-node-polyfills/polyfills/process-es6",
"node-modules-polyfills:buffer": "buffer",
"node-modules-polyfills:string_decoder": "string_decoder"
}
},
server: {
port: 3001
},
// Env vars aren't exposed by default so we need to opt-in by prefix
envPrefix: [
"REACT_APP_",
"NODE_ENV"
],
define: {
__APP_ENV__: env.APP_ENV,
"process.env": env,
VITE: true
},
build: {
target: "modules",
minify: "esbuild",
manifest: true,
sourcemap: true,
outDir: "build",
rollupOptions: {
cache: true,
plugins: [
inject({
exclude: ["node_modules/library/**/*.js"]
}),
rollupNodePolyFill()
],
output: {
manualChunks(id) {
if (id.includes('recharts')) {
return 'recharts';
}
}
}
},
commonjsOptions: {
transformMixedEsModules: true,
esmExternals: "auto"
}
},
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis"
},
plugins: [
NodeModulesPolyfillPlugin()
]
}
},
plugins: [
react(),
svgr(),
progress()
]
};
});
Our heroku server sets YARN_PRODUCTION to true, and uses the YARN_CACHE but we've attempted removing those to no avail.
I've followed just about every guide to fix this problem I can find online, and it still just wont work.
I'm under the impression that perhaps the build is running out of memory (our application is quite large), but usually when that is the case, heroku would notify us in the logs.
If there is any significant details that would be helpful in attempting to help, please let me know, and I'll do my best to provide them. But I am seriously confused at what is going wrong.

some tips :
this line is only relevant for dev mode server , try to comment it
dns.setDefaultResultOrder("verbatim");
I think the process try to apply polyfills to existing polyfills....

exports is not defined for rollup and svelte

I'm trying to use a package: quoters
this is app.svelte file. the same code works fine for react and other places in JS.
<script>
import Quote from "quoters";
let quote = "";
let category = "QUOTE";
function handleCategory() {
quote = new Quote(category).get();
}
</script>
when I am trying to run the code. i get the following error: "Uncaught ReferenceError: exports is not defined". I checked the line it is referencing to.
it contains definition for exports inside the quoters package.
Object.defineProperty(exports, "__esModule", { value: true });
I've tried everything like babel and commonjs. maybe i am missing something. please can anyone tell me what is the issue and also fix for this issue.
my rollup config file for reference:
import svelte from "rollup-plugin-svelte";
import commonjs from "#rollup/plugin-commonjs";
import resolve from "#rollup/plugin-node-resolve";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import css from "rollup-plugin-css-only";
import copy from "rollup-plugin-copy";
import json from "#rollup/plugin-json";
import builtins from "rollup-plugin-node-builtins";
import globals from "rollup-plugin-node-globals";
import replace from "#rollup/plugin-replace";
import babel from "#rollup/plugin-babel";
import nodePolyfills from "rollup-plugin-node-polyfills";
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require("child_process").spawn(
"npm",
["run", "start", "--", "--dev"],
{
stdio: ["ignore", "inherit", "inherit"],
shell: true,
}
);
process.on("SIGTERM", toExit);
process.on("exit", toExit);
},
};
}
export default {
input: "src/main.js",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "public/build/bundle.js",
exports: "auto",
},
moduleContext: {
"node_modules/quoters/dist/parseData.js": "window",
},
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
}),
nodePolyfills(),
json(),
copy({
targets: [
{
src: "node_modules/bootstrap/dist/**/*",
dest: "public/vendor/bootstrap",
},
],
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: "bundle.css" }),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
babel({
exclude: "node_modules/**", // only transpile our source code
}),
resolve({
dedupe: ["svelte"],
browser: true,
preferBuiltins: false,
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload("public"),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
],
watch: {
clearScreen: false,
},
};

How to autofix serverMiddleware files using eslint in NuxtJS?

i'am using #nuxtjs/eslint-module in NuxtJS. And i have no idea how to autoformat (on server side, not editor) serverMiddleware files using eslint and prettier. I have installed Nuxt by create-nuxt-app and added ExpressJS into ~/api folder (index.js and routes/test.js).
added to nuxt.config.js:
...
buildModules: [
'#nuxtjs/eslint-module',
],
...
...
eslint: {
fix: true
},
...
eslintrc.js contents:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '#babel/eslint-parser',
requireConfigFile: false
},
extends: [
'#nuxtjs',
'eslint:recommended',
// 'plugin:node/recommended',
'plugin:nuxt/recommended',
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
rules: {
semi: [2, 'never'],
'no-console': 'off',
'vue/max-attributes-per-line': 'off',
'prettier/prettier': ['error', {
htmlWhitespaceSensitivity: 'ignore',
semi: false,
singleQuote: true
}]
}
}
It works well and my nuxt files autofixed on save correctly, such as in ./layouts, /pages etc.
But after adding middleware (Express):
...
serverMiddleware: {
'/api': '~/api'
},
...
ESLint and its plugins not watch ~/api files for errors and dont autofixig them.
I tryed to add ~/api folder to watch property under build options, but this do not have effect.
...
build: {
watch: ['api'],
},
...
How to properly lint and autofix serverMiddleware files on server side not by IDE?

Webdriverio debug BDD tests using WebStorm

Is there any way to debug Webdriverio tests using nodeJS and WebStorm?
I've found some conclusion here and this is actually my problem: Run WebdriverIO tests via Mocha in WebStorm
But this solution doesn't fit to my problem now;
I've set up Babel to compile my BDD tests
I've set tests.config.js
module.exports = { maxInstances: 1,
capabilities: [{ browserName: 'chrome' }],
execArgv: ['--inspect'] : [],
specs: ['**/some/spec.js']
mochaOpts: {
ui: 'bdd',
compilers: ['js:#babel/register'],
timeout: 150000
} }
and babel.conf.js
module.exports = {
presets: [
['#babel/preset-env', {
targets: {
node: 12
}
}]
]
}
then I've created nodeJS configuration like it said here at answer: Run WebdriverIO tests via Mocha in WebStorm
Set breakpoint at test
describe("test", function(){
it ("this is a BDD test",
function(){
breakpoint here>> do_some_action();
})
})
But when I try to launch my tests in debug mode nothing happens and I see "connnected to localhost:port" message. and I can't go to breakpoint; there are no errors;

there was problem with a wdio.conf.js file. If you don't set specs file >> there aren't no errors. But launching is incorrect. I've set config like this:
module.exports =
{
capabilities: [{
maxInstances: 6,
browserName: 'chrome',
baseUrl: "some-url/",
browserVersion: '67.0'}]
specs: [
'./this/is/spec.js']
mochaOpts: {
ui: 'bdd',
require: ['#babel/register'],
timeout: 150000
},
And debug works after this. It's not too har as I though :) If there are some questions - > I'm glad o answer

Exclude a module from webpack bundle

I'd like the same functionality like RequireJS empty: http://requirejs.org/docs/optimization.html#empty
My use-case is that I include jquery-migrate in development, but I'd like to exclude this when built for production.
Using IgnorePlugin just makes it not included, and when requireing it in the code, it then throws an error (Uncaught Error: Cannot find module "jquery-migrate").
What I'd like to happen is for it to just return undefined, or something of the like (like empty: in RequireJS). Id like to not touch the import in the code, just configuring it to return undefined.
EDIT: Using NormalModuleReplacementPlugin works, if I point the replacement to an empty file. But keeping an empty file around just for this seems unnecessary.

I use the null-loader for blanking out modules.
The noop-loader can be used for a less awkward if-else in the config.
Try:
rules: [{
test: /jquery-migrate/,
use: IS_DEV ? 'null-loader' : 'noop-loader'
}]

You can try to make a resolve.alias in webpack.config:
resolve: {
alias: {
"jquery-migrate": process.env.NODE_ENV === 'production' ? "empty-module": "jquery-migrate"
}
}

Use Webpack's DefinePlugin in combination with the normal production plugins (Dedupe and Uglify).
Then in your code you can write:
if(DEBUG) {
var test = require('test');
alert(test);
}
And when it's built in production, the DEBUG will be replaced with a literal if(false) { ... } which will be completely removed by the uglify plugin, so test will only be required in a debug build.
Here's a sample Grunt task config for grunt-webpack that has development and production targets for the task:
development: {
devtool: "sourcemap",
output: {
pathinfo: true,
},
debug: true,
production: false,
plugins: [
new webpack.DefinePlugin({
DEBUG: true,
PRODUCTION: false
})
]
},
production: {
plugins: [
new webpack.DefinePlugin({
DEBUG: false,
PRODUCTION: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
}
})
]
},