We Keep Coding

Typescript open-api cilent generation and usage of `fetch`

I am trying to generate a typescript client for my rest server. This typescript client is expected to work for both browser and in Node.js environment (server side).
I used
openapi-generator-cli generate \
-i openapi-pets.yml \
-o output \
--generator-name typescript-fetch \
--additional-properties=typescriptThreePlus=true
after this I get this genrated
── apis
│   ├── PetsApi.ts
│   └── index.ts
├── index.ts
├── models
│   ├── ModelError.ts
│   ├── Pet.ts
│   └── index.ts
└── runtime.ts
When I run
ts-node index.ts
I get tons of errors like
error TS2304: Cannot find name 'Response'.
In attempt to fix this I added tsconfig.json at the root with this content
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"lib": [
"es2015",
"dom"
]
}
}
All errors are gone now I try to use the API (modified index.ts with following content)
/* tslint:disable */
/* eslint-disable */
export * from './runtime';
export * from './apis';
export * from './models';
import {
PetsApi,
} from './apis';
import {
Configuration,
ConfigurationParameters,
} from "./runtime";
const configParams: ConfigurationParameters = {
basePath: 'https://petstore.swagger.io/v2/',
middleware: [],
};
const apiConfig = new Configuration(configParams);
export const apiClient = {
petsAPI: new PetsApi(apiConfig),
};
export type ApiClient = typeof apiClient;
apiClient.petsAPI.listPets().then(value => console.log(value));
and I try to run it
ts-node index.ts
and results into
ReferenceError: fetch is not defined
How can I make this project a "Node" project and define the dependency of fetch?

Using TailwindCSS with Symfony Webpack Encore

I'm having trouble setting up TailwindCSS with Symfony and I'm not sure what's wrong
webpack.config.js
var Encore = require('#symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('tailwind', './assets/css/tailwind.css')
.enablePostCssLoader((options) => {
options.config = {
// directory where the postcss.config.js file is stored
path: './postcss.config.js'
};
})
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
;
module.exports = Encore.getWebpackConfig();
tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
postcss.config.js
let tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'), // your tailwind.js configuration file path
require('autoprefixer'),
require('postcss-import')
]
}
tailwind.config.js
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: [],
prefix:,
}
Here is the output of yarn encore dev
yarn run v1.22.0 Running webpack ...
ERROR Failed to compile with 1 errors
error in ./assets/css/tailwind.css
ValidationError: Invalid options object. PostCSS Loader has been
initialized using an options object that does not match the API
schema.
options has an unknown property 'config'. These properties are valid: object { postcssOptions?, execute?, sourceMap? }
Entrypoint tailwind = runtime.js
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid
options object. PostCSS Loader has been initialized using an options
object that does not match the API schema.
options has an unknown property 'config'. These properties are valid: object { postcssOptions?, execute?, sourceMap? }
at validate (./node_modules/schema-utils/dist/validate.js:104:11)
at Object.loader (./node_modules/postcss-loader/dist/index.js:43:29)" -t "Webpack
Encore" error Command failed with exit code 2. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command
I have node v14.15.0, I tried to yarn upgrade. Here are my direct dependencies :
success Saved lockfile.
success Saved 598 new dependencies.
info Direct dependencies
├─ #symfony/webpack-encore#0.33.0
├─ autoprefixer#10.1.0
├─ core-js#3.8.1
├─ datatables.net#1.10.22
├─ postcss-import#13.0.0
├─ postcss-loader#4.1.0
├─ postcss#8.2.1
├─ regenerator-runtime#0.13.7
├─ tailwindcss#2.0.2
└─ webpack-notifier#1.12.0
Like I said previously, I'm not sure what is wrong and my attempt to correct the problem on my own failed. The error seems to be coming from postcss or at least something inside my file that postcss doesn't like.
Could someone explain me where is this error coming from and how to correct it ?

Looks like postcss-loader has changed their api already by moving config option into postcssOptions instead.
Let's try with new option as following:
Encore
// ...
.enablePostCssLoader((options) => {
// new option outlined here https://webpack.js.org/loaders/postcss-loader/
options.postcssOptions = {
config: './postcss.config.js',
},
})

Using require as if is running 'cd ./folder && node file.js'

I have the following structure
├── testFolder
└──subTestFolder
test.ts
index.ts
└── foo
└── beta.ts
├──text.json
Based in this, I'm trying to require the test.js inside beta.js based in test.js absolute path.
But when I ran ts-node ./foo/beta.js, it throws Cannot find module '../text.json
test.js Content:
require("../index.js");
beta.js content:
const file = 'D:\testFolder\subTestFolder\test.js';
const dir = path.dirname(file);
process.chdir(dir);
require(file);
index.ts
const json= fs.readFileSync('../corde.json').toString();

gulp-eslint not linting .js files inside of a dot directory

I have .js files inside of a dot directory that are not being linted by gulp-eslint.
Example: .foo/file1.js
I've confirmed that the glob is picking up the files inside of the dot directory.
gulp-eslint is passing successfully for the files inside of a parent dot directory even when an intentional error is introduced inside these files.
I've confirmed that directories without a . in the name of the directory (e.g. src/file.js, etc.) are failing linting, when the same intentional error is introduced.
My project structure is something like this:
project/
│
├── .foo/
│ ├──file1.js
│ └──file2.js
│
├── src/
│ ├──file1.js
│ └──file2.js
│
├── gulpfile.js
└── .eslintrc
Contents of gulpfile.js
const gulp = require('gulp');
const eslint = require('gulp-eslint');
gulp.task('lint', () => {
return gulp.src([ './src/**/*.js', './.foo/**/*.js' ])
.pipe(eslint({
configFile: './.eslintrc'
}))
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
Contents of .eslintrc
// Reducing down to a single, simple rule
{
"env": {
"es6": true
},
"rules": {
"quotes": [
"error",
"single"
]
}
}
Is there something incorrect in my config that is preventing the .js files inside of the dot directory .foo from being linted?
Thanks!

It looks to be a known "quirk" of eslint (as of 6.8.0).
The workaround (until a PR is merged to fix this) is to use an .eslintignore file to unignore dot directories explicitly:
#.eslintignore
!.foo

Webpack: Hide some modules printed by webpack --display-modules --display-reasons

Question
Is it possible to specify modules to be hidden (ignored) in printed output by webpack --display-modules --display-reasons?
Setup
structure
.
├── build
│   └── index.js
├── package.json
├── src
│   ├── hello
│   │   └── index.js
│   ├── index.js
│   ├── util
│   │   └── index.js
│   └── world
│   └── index.js
└── webpack.config.js
package.json
{
"private": true,
"scripts": {
"start": "webpack --display-modules --display-reasons"
},
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
},
"dependencies": {
"core-js": "^2.4.0",
"lodash": "^4.13.1"
}
}
src/index.js
import hello from './hello'
import world from './world'
console.log(`${hello()} ${world()}`);
src/hello/index.js
import util from '../util';
const _ = require('lodash');
const hello = () => _.capitalize(`hello${util()}`);
export default hello
src/world/index.js
import util from '../util';
const _ = require('lodash');
const world = () => _.capitalize(`world${util()}`);
export default world
src/util/index.js
export default () => '!'
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: './build/index.js'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: 'es2015'
}
}
]
}
};
Motivation
By running webpack I get this stunning program in build/index.js which prints:
Hello! World!
More interesting part is in output printed by webpack --display-modules --display-reasons:
This output is very powerful:
immediately see project structure
recognise which modules are required by other modules
how many times those modules are reused
where those modules are required in other modules
used module format
is it my module or from node_modules
looks super cool
Mentioned above pros connivence me to use this output in daily work.
But can be problem with it.
Problem
When I use big external package with a lot of modules it can blur my output from previous picture. You can see it when add for example core-js to my files:
src/index.js (modified)
require('core-js'); // new problematic package
import hello from './hello'
import world from './world'
console.log(`${hello()} ${world()}`);
Now my output printed by webpack --display-modules --display-reasons looks like this:
This output is quite long (it's hard to scroll to top). core-js blooded my previously output and I lost mentioned previous pros of analyze it.
Tips
problematic output isn't always at the end
problem isn't related only with core-js (it's only example)
switching to pre-build sources isn't solution
require of problematic package must occurs in source .js files not in webpack.config.js

To exclude more than one folder add the following to webpack.config.js
stats: {
exclude: [
"node_modules",
"bower_components",
"jam",
"components",
"my-custom-folder"
]
}
without using --display-exclude

In webpack there is undocumented option --display-exclude which, as described in source code, exclude modules in the output.
This is exactly what you need, so, pass this parameter to webpack cli:
webpack --display-modules --display-reasons --display-exclude="core-js"