Develop Reference

babel-plugin-module-resolver adding extra ../ to path

While I am aware that Babel is capable of transpiling TypeScript itself, I've had enough weird issues I'd like to first transpile TypeScript->JS and then run Babel on that.
I've got my tsconfig.json files working as expected. When I compile my TypeScript (from ./src folder relative to babel.config.json's path), it outputs to a ./build folder. I have Babel set to take what's in the ./build folder and output to the ./dist folder.
The output of TSC shows import {bar} from 'foo' and import {thing} from 'foo/util', as expected. But Babel's output looks like ../../../libfoo/libfoo.js when it should be ../../libfoo/libfoo.js
No matter what I try with root/cwd, I can't seem to get that extra ../ to disappear. I've managed to make it go away a couple times, but then I rebuild without changing the babel config, and it comes back.
My babel.config.json currently looks like this:
{
"presets": [
["#babel/preset-env", {"targets": {
"node": true,
"electron": "80"
}}],
["#babel/preset-typescript", { "onlyRemoveTypeImports": true }]
],
"plugins": [
["babel-plugin-module-resolver", {
"alias": {
"^foo/(.+)": "./libfoo/\\1.js",
"^foo$": "./libfoo/libfoo.js"
}
}],
["#babel/plugin-transform-modules-umd"],
["#babel/plugin-transform-typescript", {
"allowNamespaces": true,
"allowDeclareFields": true,
"onlyRemoveTypeImports": true
}],
["#babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }],
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-do-expressions",
"#babel/plugin-proposal-logical-assignment-operators",
"#babel/plugin-proposal-partial-application",
["#babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-function-bind"
],
"sourceMaps": true
}

Well, I found a solution that doesn't really fix the problem but makes it works.
My files structure is something like this:
|-dist
|-src
|-db
|-connect
|-index.ts
|-index.ts
|-.babelrc
When babel compiles the code, the import of db/connect in src/index.ts, go from this:
import ... from "db/connect"
to this:
var _connect = require("../db/connect");
To resolve this, I simply add /dist to the paths in .babelrc
before:
[
"module-resolver",
{
"root": ["./"], # or ["src"] or "src" or ["./src"] or "./src" or any way you can imagine
"alias": {
"db": "./db",
}
}
}
]
after:
[
"module-resolver",
{
"alias": {
"db": "./dist/db",
}
}
}
]
And the import is now:
var _connect = require("../dist/db/connect");
As you said, the root doesn't affect the require path, so I just removed it.
This doesn't fix the problem, but makes it work.
Hope it helps, good luck! :)

Nextjs/postcss css variables not available in production (Zeit)

I have a series of variables defining a dark mode theme.
When running the app locally those variables are perfectly loaded.
This is the css inspector:
dark-mode {
--color-bg-bg: #100818;
--color-bg-primary: #100818;
--color-bg-secondary: #1e1528;
--color-bg-almost-primary: rgba(15,8,24,0.8);
--color-bg-light: #0e0917;
}
But if I build the app for production or I deploy it in Zeist those variables are not available.
I thought enabling the custom-properties feature would fix the problem but it doesn't. This is my postcss config file:
module.exports = {
plugins: [
'tailwindcss',
process.env.NODE_ENV === 'production'
? [
'#fullhuman/postcss-purgecss',
{
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
features: {
'custom-properties': true,
},
},
]
: undefined,
'postcss-preset-env',
],
};
Any ideas? Thanks!

I don't know about zeit, but variables declared in global css are very much accessible from the .module.css files in both dev and production version.

arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6')

Currently I'm running my tests with protractor/grunt but I'm getting the follow error message:
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
I think my .jshintrc file is not being read, because I've added this condition.
.jshintrc
{
"esversion": 6
}
Gruntfile.js
jshint : {
all: ["tests/API/**/*.js"],
options: {
undef: true,
mocha: true,
node: true,
jshintrc: true,
esversion: 6,
globals: {
require: true,
module: true,
console: true,
esversion: 6,
}
},
ui: ["tests/UI/**/*.js"],
options: {
undef: true,
mocha: true,
node: true,
jshintrc: true,
esversion: 6,
globals: {
require: true,
module: true,
console: true,
esversion: 6,
jshintrc: true,
}
}
}
Any idea to solve this problem?

I was able to resolve this issue by adding this block of code at the top of each file.js that accused the error
/*jshint esversion: 6 */
Example:

It is not possible to add /*jshint esversion: 6 */ in each file.js file.
Instead of above, please do below changes if you are using Visual Studio Code: -
Open Visual Studio Code
File -> Preferences -> Settings
Default User Settings -> JSHint configuration
look for "jshint.options": {},
change it to "jshint.options": {"esversion": 6}, by clicking on Edit on the left

You can do more project-specific settings by following these steps.
Create a folder with the name of .vscode at the root of your project directory
Create a file with the name settings.json
Add the following content into it.
{
"jshint.options": {
"esversion": 6
}
}
You can add some more settings to keep things consistents across your team.
{
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"jshint.options": {
"esversion": 6
}
}

Add the following into your package.json:
"jshintConfig": {
"esversion": 6
}

I have this problem after I installed JSHint. The process for me to solve this problem as below:
Preference -> setting -> Extensions -> JSHint Configuration -> options -> add
"jshint.options": {"esversion": 6}
Done.

Unable to strip comments in webpack bundle js file

I have been trying to strip comments in the webpack bundled js file.
I have tried several methods but it's not working still and I get comments like
"/**\n * Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\ ...
For this the bundled file is getting huge. Currently huge at 1.6mb size.
I have tried this
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
compress: {
sequences: true,
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true,
drop_console: true
},
mangle: {
except: ['$super', '$', 'exports', 'require']
},
output: {
comments: false
}
})
also this
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
sourceMap: false,
output: false
})
Also set the enviroment to production
set NODE_ENV=production
I am not able to understand where I am wrong.
Please help.
Thanks in advance.

UglifyJsPlugin don't remove #licence comments even if you set comments: false for legal reasons. You can read about it on webpack GitHub issue.
If you want to remove this kind of comments (on your own risk) you should search for other loaders like webpack-comment-remover-loader or stripcomment-loader.

This is what you need:
new UglifyJsPlugin({
comments: false,
}),
From here.
Here is the line from the Webpack and #Everettss is right.
File: /webpack/lib/optimize/UglifyJsPlugin.js
097: let output = {};
098: output.comments = Object.prototype.hasOwnProperty.call(options, "comments") ? options.comments : /^\**!|#preserve|#license/;
099: output.beautify = options.beautify;
100: for(let k in options.output) {
101: output[k] = options.output[k];
102: }
and you may check the regular expression which confirms what Sokra stated.
I am not sure about UglifyJsPlugin, but usually if you privide the legal statement somewhere else you should eliminate all the comments.
If your lawyer confirms this is OK, you may try to tweak the /*! so the regular expression fails and the comments will be not there any more.

For webpack 4 this was working for me:
// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// other config properties...
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false
}
}
})
]
}
};
You can find more information in the official docs.

If you want to remove #words as well, and cannot find a solution online, i would suggest you to perform a find and replace.
Write a regex to find and replace it with a blank character.

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,
}
})
]
},