We Keep Coding

Using an ES module in TailwindCSS config (Using React and Craco)

I've been trying for hours to import the package d3-colors into my tailwind.config.js. No solutions I have found on the internet have worked so far.
I have tried:
Converting it to tailwind.config.mjs, but then it doesn't get loaded. The configuration does not work.
Using the await import('colors-d3') but that doesn't work either because then I have to await the function that gets it, and that's not allowed either:
module.exports = await config();
SyntaxError: await is only valid in async functions and the top level bodies of modules
I've tried changing the package to type='module', but then I have all sorts of issues with Craco not being able to load it's config once I convert it to an ESM module because craco itself is commonjs.
I have tried modifying Craco's config...
I've tried using a postcss config file to pass the tailwind.config.mjs as the config file parameter, doesn't work either.
etc etc
I can't get it to work. How can I just import this module into my tailwind config?

According to the team, they won't be supporting ESM anytime soon.
https://github.com/tailwindlabs/tailwindcss/issues/8029#issuecomment-1086875656

How do you get webpack to *actually* ignore an external and rely on the browser to import?

I'm trying to get webpack to ignore an import, so that its imported by the browser using a native ES6 import statement, not webpack. I'm trying to get ffmpeg.js to import directly as it crashes webpack when it tries to bundle it, as the files are too large.
Following the answer here (How to exclude a module from webpack, and instead import it using es6), I have my code in the local tree as /ffmpeg/ffmpeg-mpeg.js and verified my dev server can access as http://localhost:8080/ffmpeg/ffmpeg-webm.js
I then import via:
import ffmpeg from '/ffmpeg/ffmpeg-webm.js';
And add that to the externals section of my webpack config:
externals: {
'/ffmpeg/ffmpeg-webm.js': 'ffmpeg',
},
The result is an link that looks like this
webpack:///external "ffmpeg"
containing:
module.exports = ffmpeg;
Which then fails with "Uncaught Error: Cannot find module ?" (In fact that error is hardcoded in the generated file)
So that seems to assume there is a global ffmpeg option and then maps that module to that, but instead I want it leave the line completely untouched by webpack and leave it to the browser.
Whats the correct way to do that? The exclude rule thats downvoted on that page doesn't work either.

Edit:
You can use this:
import(/* webpackIgnore: true */'/ffmpeg/ffmpeg-webm.js').then(({default: ffmpeg}) => {
//Do what you want to do with ffmpeg
});
Which will prevent webpack from compiling the import (so it will be a regular ES6 import)
Original answer:
You forgot to include the external script in your page.
Also since you pointed out that your file is very big, I'd recommend to include it defered
So you need to add
<script src="/ffmpeg/ffmpeg-webm.js" defer></script>
To the head of your app and you would then import it slightly differently using the import function with a callback
import('/ffmpeg/ffmpeg-webm.js').then(ffmpeg => {
//Do what you want to do with ffmpeg
});
Small note: the externals key does not need to be the path of your file, it's just the name you will use when importing, so rename it if you are getting confused with the path
module.export = {
//...
externals: {
"ffmpeg-webm": "ffmpeg"
}
}
//Then import
import('ffmpeg-webm').then(ffmpeg => {
//Do what you want to do with ffmpeg
});
Alternatively for node js, instead of using externals you could use
const ffmpeg = __non_webpack_require__('/ffmpeg/ffmpeg-webm.js')
Just keep in mind that this will transform it as a normal require that only works with node js

How to compile or check syntax error in Node.js application

I have created a node.js application. I need to compile or do a check whether syntax error occurs before running the node.js service.I need to integrate this in jenkins. Kindly guide me to validate the node.js application

Look into TypeScript. It is a language which allows you to get autocomplete with types and fails compilation if you have some syntax errors. It is a superset of JavaScript and transpiles to JavaScript.

Node.js provides CLI option --check or -c for checking a given file for syntax errors without running it. When working with Linux or MacOS a command like the following one helps with checking all obvious javascript files in a folder for containing basically working code:
find -name "*.js" | xargs node -c

using eslint package https://www.npmjs.com/package/eslint
It's a very common library to check the syntax of any JS/TS framework

You can use 'node-syntax-error' module.
it helps you to detect and report syntax errors in source code strings.
When you type node src.js you get a friendly error report about exactly where the syntax error is. This module lets you check for syntax errors and report them in a similarly friendly format that wrapping a try/catch around Function() or vm.runInNewContext() doesn't get you.
For example:
var fs = require('fs');
var check = require('syntax-error');
var file = __dirname + '/src.js';
var src = fs.readFileSync(file);
var err = check(src, file);
if (err) {
console.error('ERROR DETECTED' + Array(62).join('!'));
console.error(err);
console.error(Array(76).join('-'));
}

Using
node --check
Only finds very grave errors and can be tricky to execute.
I would suggest to use a linter like 'eslint'. Because:
It integrates easily with (npm lint or yarn lint)
It catches almost all possible errors (way more than node -check)

SystemJS Builder + Babel issue

I'm trying out SystemJS and getting an issue when trying to use the builder alongside babel.
It's a simple ES2015 project, so won't bore you with the details of that, but my bundle setup looks like the below.
config.js:
System.config({
transpiler: 'babel',
paths: {
'babel': './node_modules/babel-core/lib/api/browser.js'
}
});
builder.js:
var path = require("path");
var Builder = require('systemjs-builder');
var builder = new Builder('.', 'config.js');
builder
.buildStatic('./src/app.js', './dist/index.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
I'm getting the following error: ReferenceError: require is not defined on the browser.js file from babel. Prior to adding the babel path, I was getting an error that SystemJS was trying to locate babel.js relative to my source directory.
I'm obviously missing something simple here, but the docs aren't exactly straight forward, and seem to be a bit outdated with regards to babel. Do I need to run babel on the files prior to bundling with SystemJS so that require is available or something?

Not positive on this because I use jspm so I didn't have to set this up manually, but it looks like the correct main file for babel-core is ./node_modules/babel-core/browser.js which has "format global"; instead of "format cjs"; which would explain your error.

adding jadeify to a node-express-browserify project

Context
I cloned a basic node-browserify boilerplate project and got it up. I'm using coffee-script. Right now, I'm trying to add jadeify to the equation as follows:
bundle = browserify
entry: __dirname + "/app/init.coffee"
debug: true
mount: "/app.js"
bundle.use jadeify __dirname + '/views'
app.use bundle
This is before I even attempt to use jadeify anywhere.
Issue
Everything works, until I add bundle.use(jadeify(__dirname + '/views')) as a middleware to browserify. Then I get the following error message in browser's console:
Uncaught ReferenceError: __require is not defined
According to the browser's console, the source of this message is /app.js.
Question
Why does this script fail with an error as soon as I try to add the jadeify middleware for browserify?
Motivation
I figured that it'll be more convenient to reuse server-side jade templates on client-side, so I'm ditching underscore templates in favor of jade. While doing my research, I came across this solution to a related question that suggests the use of jadeify. It seems doable, but something seems to be failing.

One can bypass jadeify by using browjadify
Usage:
browjadify --entry=app.coffee >bundle.js
Source: browjadify
#!/usr/bin/env node
var jade = require('jade')
var browserify = require('browserify')
var fs = require('fs');
var argv = require("optimist").argv;
var b = browserify()
b.register('.jade', function(body) {
var options = {"client": true, "compileDebug": false};
body = "module.exports = " + jade.compile(body, options).toString() +";";
return body;
});
var jaderuntime = require('fs').readFileSync(__dirname+"/node_modules/jade/runtime.js", 'utf8');
b.prepend(jaderuntime); // Brings in var jade that jade.compile needs
b.addEntry(argv.entry); // gets browserify to do its thing
console.log(b.bundle()); // the bundled output

I've seen this today as well and managed to fix it.
The problem for me was that jadeify depends on browserify version at most 1.2.9 but the current version of browserify in the git repo is newer (much newer, something above 1.8 if i remember correctly). And being new myself to working with this setup I installed browserify first (with the newest version) and then jadeify installed it's own dependent browserify (with the supproted version) in it's own module space.
Then when I was running my app the browserify I was calling was the new version but the libs that jadeify was using were the old version and this created a conflict somewhere and thus the error you were seeing as well.
I ended up just reinstalling the latest supported version of browserify in my app space and that fixed it.
LATER EDIT:
Problem with the fix above was that browserify#1.2.9 does not have caching and made reloading the server very slow. But I managed to find browserijade which works with the latest version of browserify (1.9.4) an does exactly the same things as jadeify.
Hope it helps!