We Keep Coding

esbuild build does not bundle the public directory

I decided to use esbuild to bundle my express API. So far all is good, except that the public directory which holds the swagger UI is not being bundled with the rest of the application.
I have an endpoint defined as a static route which serves that folder.
app.use(express.static(`${root}/public`));
To overcome this problem I have tried multiple things, such as manually copying the public directory to the build dir location. That did not seem to work.
I have also tried with the plugin esbuild-plugin-public-directory, which did not work either.
Then I added the public/index.html to the entryPoints configuration, which did not work either.
My question now is, what am I doing wrong? I don't seem to find anything particularly useful over the internet to help me overcome this problem.
This is the esbuild config which I am currently using.
const publicDir = require("esbuild-plugin-public-directory");
const OUTDIR = "build";
const envPlugin = {
name: "env",
setup(build) {
// Intercept import paths called "env" so esbuild doesn't attempt
// to map them to a file system location. Tag them with the "env-ns"
// namespace to reserve them for this plugin.
build.onResolve({ filter: /^env$/ }, (args) => ({
path: args.path,
namespace: "env-ns",
}));
// Load paths tagged with the "env-ns" namespace and behave as if
// they point to a JSON file containing the environment variables.
build.onLoad({ filter: /.*/, namespace: "env-ns" }, () => ({
contents: JSON.stringify(process.env),
loader: "json",
}));
},
};
require("esbuild")
.build({
entryPoints: ["server/start.ts", "public/index.html"],
platform: "node",
bundle: true,
minify: false,
platform: "node",
logLevel: "info",
sourcemap: false,
target: "node12",
loader: {
'.html': 'text',
},
outdir: "build",
plugins: [envPlugin, publicDir()],
})
.then(() => {
fs.copyFileSync("server/common/api.yml", `${OUTDIR}/api.yml`);
console.log(`Successfully built, output directed to the ${OUTDIR} directory`);
})
.catch(() => process.exit(1));

I tried it out if using #fastify/swagger. Just put #fastify/swagger in esbuild build.external
buid({external: ["esnext", "#fastify/swagger"],})
Otherwise maybe put swagger-ui-dist. Reference: https://docs.devland.is/repository/openapi#configuring-swaggerui-dependencies-for-esbuild

Module build failed - no ESLint configuration found after import

I have worked on a vue project which I created using vue cli. Because of this, eslint is also included in the project. Up until now I haven't done much with eslint. If I understood correctly, eslint helps with stylistic errors, semantic errors etc in the code to identify potential problems.
I only rarely used // eslint-disable-next-line if there was e.g. a console.log clashing with the rules.
Now I wanted to include some new javascript code into the project. This code comes from someone else, so I cloned the repo and then just imported it in my main.js via a relative path to the folder/file that I have cloned. I think this was okay. However now I get some problems with eslint as the imported file has no config for eslint.
This is the exact error originating from the import:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found
I am not sure what to do now, even though I already searched for the error.
I only saw some config for eslint in the package.json, I think. If it would help to have its content or something else, please say so and I will add it!
How can I tackle this problem? Thanks in advance!

This might be a long shot, but this is the .eslintrc.js file I shove into all my react projects at the root directory to get rid of that error. You'll want to change some of the settings but this is the basic structure.
module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
jest: true,
},
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
plugins: ['react', 'react-hooks'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:json/recommended',
'prettier',
],
settings: {
react: {
version: 'detect',
},
},
rules: {
'react/prop-types': ['off'],
'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
},
};

JS : karma rollup empty bundle

[UPDATE]
The original title of this post was : "Bad karma, lost data" and standed for the mind word play, much more for the rimes than for a real fact. So I decided to alter it, for the sake of correctness and courtesy.
[UPDATE]
Hi there, I've a very classical program directory strcture:
dist/
karam.conf.js
node_modules/
package.json
rollup.config.js
src/
fp/
list.js # imports maybe.js
matbe.js
test/
fp/
list.specs.js
maybe.specs.js
I'm trying to preprocess the tests with rollup. My karma.conf.js is just like :
# karma.conf.js
const buble = require('#rollup/plugin-buble')
const resolve = require('#rollup/plugin-node-resolve').default
// console.log({ resolve })
module.exports = function(config) {
config.set({
basePath : '',
files: [
{
pattern: 'src/fp/*.js', watched: true
},{
pattern: 'test/fp/*.specs.js', watched: true
}
],
watch: true,
preprocessors: {
'src/fp/*.js': ['rollup2'],
'test/fp/*.specs.js': ['rollup2']
},
rollup2Preprocessor: {
output: {
name: 'fptest',
format: 'iife'
},
plugins: [
buble(),
resolve()
]
}
});
}
When I start karma, with npm or from CLI with "karma start --log-level debug", I get 4 empty bundles and get the error message "Error during file loading or preprocessing
TypeError: output is not iterable".
So I could not test my program properly.
What's happening and how to fix that ?
Thanks for replies, Regards.

Looking at your module loader, I suggest using a karma plugin like karma-rollup-preprocessor to bundle your module before running tests. This will bundle and wire-up your modules properly for testing.
And you don't need to specify all your files under files array.
files: [
'test/**/*.js'
],

Using r.js to optimize bower_components directly

I'm having trouble using r.js to optimize modules in the bower_components/ directory.
My basic project directory structure looks like this:
- bower_components/
- src/
- activities/
- client/
...and the r.js configuration lists the following details:
({
appDir: 'src',
baseUrl: 'client',
dir: 'out',
modules: [
{ name: 'scripts/main' },
/* (+ more) */
]
})
I'd like to optimize the file
bower_components/socket.io-client/dist/socket.io, which is outside the
baseUrl. As recommended in the "Common Pitfalls" section of the Optimizer
guide, I'm trying to
define a path for the file:
({
appDir: 'src',
baseUrl: 'client',
dir: 'out',
+ paths: {
+ 'socket.io': '../../bower_components/socket.io-client/dist/socket.io'
+ },
modules: [
{ name: 'scripts/main' },
/* (+ more) */
+ { name: 'socket.io' }
]
})
...but this yields the following error:
Running "requirejs:prod" (requirejs) task
{ [Error: Error: Module ID 'socket.io' has a source path that is same as output path: /home/mike/projects/cee/bower_components/socket.io-client/dist/socket.io.js. Stopping, config is malformed.
at /home/mike/projects/cee/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:26000:39
]
originalError: [Error: Module ID 'socket.io' has a source path that is same as output path: /home/mike/projects/cee/bower_components/socket.io-client/dist/socket.io.js. Stopping, config is malformed.] }
It seems like the point of the path config indirection is so that the
optimizer will not attempt to create a file outside the output directory. At
the same time, this is clearly not happening. Am I doing something wrong? Or is
this not something r.js is capable of?

RequireJS - skipDirOptimize: true setting does not optimize my main module

If I use RequireJS to optimize my whole project my main module will not get optimized/uglified if I use the setting skipDirOptimize: true. From my understanding everything should be optimized except the non-build layer JS files. Is this a bug or me not understanding the correct usage of this parameter?
Here is my requirejs config:
{
appDir: '../project',
mainConfigFile: '../project/assets/js/main.js',
dir: '../httpdocs',
optimize: "uglify",
//Introduced in 2.1.2: If using "dir" for an output directory, normally the
//optimize setting is used to optimize the build layers (the "modules"
//section of the config) and any other JS file in the directory. However, if
//the non-build layer JS files will not be loaded after a build, you can
//skip the optimization of those files, to speed up builds. Set this value
//to true if you want to skip optimizing those other non-build layer JS
//files.
skipDirOptimize: true,
generateSourceMaps: false,
normalizeDirDefines: "skip",
uglify: {
toplevel: true,
ascii_only: true,
beautify: false,
max_line_length: 1000,
defines: {
DEBUG: ['name', 'false']
},
no_mangle: false
},
optimizeCss: "standard",
removeCombined: true,
modules: [
{
name: '../main'
}
]
}

The use of the relative path in your module is probably causing r.js to not recognise it as a build bundle at the point where it decides whether or not to optimize it.
I had a similar problem (build bundles not being optimized), not with a relative module path but with a paths config to allow my modules to be named differently to my folder structure:
({
...
skipDirOptimize: true,
paths: {
'MyLibrary': ''
},
modules: [
{ name: 'MyLibrary/Main' }
],
...
})
This causes the module name in r.js (2.1.8) to become /Main, so when it builds its _buildPathToModuleIndex mapping, the key will be incorrect due to having two slashes (e.g. C:\dev\project\output\\Main).
The way that the optimization loop decides if a module is a build bundle (and hence needs optimization even when skipDirOptimize: true) is by looking it up in the _buildPathToModuleIndex mapping using its filename (e.g. C:\dev\project\output\Main). Due to it being in the map with two slashes, it won't find it. Therefore it won't be considered to be a build bundle and won't be optimized.
Try putting some console.logs in r.js where it builds and accesses _buildPathToModuleIndex to see what it's putting in and what it uses to look it up.
For my problem, the solution was to add a paths entry for 'MyLibrary/Main': 'Main' (repetition unfortunately). I'm not sure what your project structure is, but how about if you set baseUrl: '../ and then simply call your module main ?