We Keep Coding

'Buffer' is not exported by __vite-browser-external:buffer

I'm getting this build error with vite and sveltekit using adapter-node
I'm not sure why it won't build since it relies on node to server the client.
dev works fine
'Buffer' is not exported by __vite-browser-external:buffer
I tried polyfills but they don't work.
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
webworkers: true,
}),
NodeModulesPolyfillPlugin()
]
}
},
build: {
minify: true,
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill()
]
}
}

I solved it by adding the right aliases (including buffer and process) to config.vite.ts. That's how mine looks like:
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import tsconfigPaths from 'vite-tsconfig-paths'
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: {
port: 3001,
open: true
},
resolve: {
alias: {
// This Rollup aliases are extracted from #esbuild-plugins/node-modules-polyfill,
// see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
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'
}
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true
}),
NodeModulesPolyfillPlugin()
]
}
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
// #ts-ignore
rollupNodePolyFill(),
]
}
}
})

build: {
rollupOptions: {
plugins: [inject({ Buffer: ['Buffer', 'Buffer'] })],
},
},
This works with npm i -D buffer

How to not include mocha (TDD) functions like "describe" and "it" in my src folder and only contain them in test folder? [TS]

Mocha.js functions like describe() and it() are available everywhere in my project, but I only want them to be only accessible and callable in my "test" folder. Is there any way to do that?
P.S. I'm using typescript if that makes a difference.

I think your question is really vague. Still I am going to try to answer assming that you use eslint...
In your .eslintrc.js (or eslint config file), you may have:
module.exports = {
env: {
browser: true,
es6: true,
node: true,
mocha: true
}
(...)
Where you should have:
module.exports = {
env: {
browser: false,
es6: true,
node: true
},
(...)
overrides: [
{
files: 'test/**/*.spec.js',
env: {
mocha: true,
},
},
],

Analyze javascript file using Typescript Compiler

Refer to: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API, I want to get type of node in AST.
It is successful for angular project because it is written using typescript and tsconfig.json exists.
When I try to analyze react app which is written using javascript
const program = ts.createProgram({
rootNames: [fileName],
options: {
strict: true,
target: ts.ScriptTarget.ES2015,
allowJs: true,
checkJs: true
}
})
const typeChecker = program.getTypeChecker();
... ...
I get: typechecker.getTypeAtLocation(node).getSymbol() is undefined.
I assume options of ts.createProgram is wrong.

the option: moduleResolution: ts.ModuleResolutionKind.NodeJs is key.
const program = ts.createProgram({
rootNames: [file1],
options: {
strict: true,
target: ts.ScriptTarget.ES2015,
allowJs: true,
checkJs: true,
moduleResolution: ts.ModuleResolutionKind.NodeJs
}
})
The above works for React JS.

generate source map with grunt closure compiler?

Is there a way to generate source maps with grunt closure compiler?
I tried both grunt-closure-compiler and grunt-closure-tools but I can't seem to get it to generate the source map file.
Here are my settings:
Here I tried both inside options and outside, both with the value true or path/to/src.map. I couldn't find documentation for this.
'closure-compiler': {
lib : {
closurePath: 'closure-compiler',
js: 'path/to/src.js',
jsOutputFile: 'path/to/output.js',
maxBuffer: 10000,
// sourceMap: true / 'path/to/src.map'
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5',
externs: ['externs/*.js'],
// sourceMap: true / 'path/to/src.map'
}
}
},
Here I followed the docs but could not get it to work.
closureCompiler: {
options: {
compilerFile: 'closure-compiler/build/compiler.jar',
create_source_map: 'path/to/src.map',
compilation_level: 'ADVANCED_OPTIMIZATIONS',
externs: ['externs/*.js']
},
lib : {
src: 'path/to/src.js',
dest: 'path/to/output.js'
}
}
What am I missing?

For grunt-closure-compiler, this works in my project:
'closure-compiler': {
dev: {
js: ['src/**/*.js'],
jsOutputFile: 'dist/js/output.js',
maxBuffer: 500,
noreport: true,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
warning_level: 'VERBOSE',
use_types_for_optimization: undefined,
output_wrapper: '(function(){%output%\n}).call(window)',
create_source_map: 'dist/js/output.js.map'
}
}
}

How to require mode, theme or addon of code mirror in browserify

Has anybody try to use code mirror via browserify?
I find nothing is visible, even though it already generated all the html tags.
The code :
var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript.js');
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {
"Ctrl-Space": "autocomplete"
},
mode: {
name: "javascript",
globalVars: true
}
});
i wonder how i should require the js mode?

I actually dealed with that problem by using require() for all dependencies of the demonstration of html5complete mode demo like that:
// require('codemirror/addon/hint/show-hint');
// require('codemirror/addon/hint/xml-hint');
// require('codemirror/addon/hint/html-hint');
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/css/css');
require('codemirror/mode/htmlmixed/htmlmixed');
var CodeMirror = require('codemirror/lib/codemirror');
var editor = CodeMirror.fromTextArea(textareaElement, {
mode: 'text/html',
lineWrapping: true,
extraKeys: {
'Ctrl-Space': 'autocomplete'
},
lineNumbers: true,
theme: 'monokai'
});
In my .less files, I imported the CSS like that:
#import (inline) "./../../node_modules/codemirror/lib/codemirror.css";
#import (inline) "./../../node_modules/codemirror/theme/monokai.css";
// #import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css";
I did not took really care about the quality of that trick.

Here's what's working for me. Using import instead of require, but same gist:
import 'codemirror/theme/3024-night.css'
const options = {
lineNumbers: true,
readOnly: false,
mode: 'htmlmixed',
theme:'3024-night'
};
...
<Codemirror ref="editor" value={this.props.value} onChange={this.props.updateCode} options={options}/>