I'm hitting Support for the experimental syntax 'classProperties' isn't currently enabled
I need to add something like the following to my webpack config.
https://github.com/babel/babel/issues/8655
{
loader: 'babel-loader',
options: {
"presets": [
"#babel/preset-env",
"#babel/preset-react",
{
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
],
},
}
Although I'm using customize-cra and need to add it through config-overrrides.js and I tried
module.exports = override(
...addBabelPresets("#babel/preset-env", "#babel/preset-react"),
...addBabelPlugins('#babel/plugin-proposal-class-properties'),
# other lines omitted for brevity
)
Try defining the plugins and presets in a .babelrc file, use the useBabelRc loader in your config:
//config-override.js
const { useBabelRc, override } = require("customize-cra");
module.exports = override(
useBabelRc()
);
and then in the .babelrc
//.babelrc
const presets = ["#babel/preset-env","#babel/preset-react"]
const plugins = [
["#babel/plugin-proposal-class-properties"]
];
module.exports = {
presets,
plugins,
};
//config-override.js
const { useBabelRc, override } = require("customize-cra");
module.exports = override(
useBabelRc()
);
//.babelrc
{
"presets": [
["#babel/preset-react"],
["#babel/preset-env"]
],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
Related
I have a requirement where I need to map my libs as an expanded path in the Jest config moduleNameMapper configuration.
Along with that I also need to provide one axois as the name module mapping.
How can I do both in the moduleNameMapper in jest-e2e.js?
Here is my existing jest-e2e.js file:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' }),
};
My tsconfig.json looks like:
{
"paths": {
"#app/logger": [
"libs/logger/src"
],
}
}
I want to add one more moduleNameMapping which is not there in the tsconfig.json.
Basically, I want to add this mapping as well:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
}
How may I combine both the stuffs into the same moduleNameMapper clause in the jest config file.
This is what I have tried so far:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
const libNameMapping = pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' });
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: {
'^axios$': require.resolve('axios'),
...libNameMapping,
},
};
So basically how can both the axios and the nameMapping can be combined and applied to the moduleNameMapper portion of the configuration. That's the query here.
Now if I want to add it like without any helper, like below, it also does not work:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
'^#app/(.*)$': '<rootDir>/../../../libs/$1/src',
},
The path are not resolved, gives this error:
Configuration error:
Could not locate module #app/common/const mapped as:
C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#app\/(.*)$/": "C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src"
},
"resolver": undefined
}
1 | import { createParamDecorator, ExecutionContext } from '#nestjs/common';
> 2 | import { constants } from '#app/common/const';
I think I have to use the Jest helper method. But how can I do it combining both axois and my libs name mapping, is not getting it.
My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4
Config
// ./docs/.vuepress/config.js
module.exports = {
...
chainWebpack: (config, isServer) => {
config.module
.rule("js") // Find the rule.
.use("babel-loader") // Find the loader
.tap(options =>
merge(options, {
presets: [
["#babel/preset-env"],
["#vue/babel-preset-jsx", { injectH: false }]
],
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css"
}
],
"#babel/plugin-proposal-optional-chaining"
]
})
);
}
}
The config didn't work, when I ran the code I met the following error.
Error
Uncaught Error: Module parse failed: Unexpected token (87:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| },
| render(h) {
return <a-tree></a-tree>;
| }
| };
Could someone give me the right config?
I needed to run babel-plugin-transform-remove-console for my dev build. What I did was:
npm i babel-plugin-transform-remove-console --save-dev
Then in .babelrc I changed it to this:
{
"presets": ["react-native"],
"plugins": ["transform-remove-console"]
}
I also tried:
{
"presets": ["react-native"],
"env": {
"development,": {
"plugins": ["transform-remove-console"]
}
}
}
However console logging is still happening in my dev build. I am on Android.
Does anyone know how to get this to work in dev mode?
Maybe you are using new babel version 7, you need to change this file babel.config.js instead of .babelrc as the following:
module.exports = function override(api) {
var env = api.cache(() => process.env.NODE_ENV);
var isProd = api.cache(() => process.env.NODE_ENV === "production");
if (!isProd) {
config = {
plugins: [
["transform-remove-console"]
],
presets: ["#babel/preset-flow", "module:metro-react-native-babel-preset"]
};
}
return config;
};
this should remove the console in the new babel versions
If you are using the version 0.62.x or newer, you can update your babel.config.js as follows:
module.exports = function(api) {
if (api.env("production")) {
return {
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
"transform-flow-strip-types",
"transform-remove-console"
]
}
}
return {
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
"transform-flow-strip-types",
]
}
};
PS: make sure to restart bundler with cache reset like this npm start --reset-cache and note that this will not prevent logs from redux logger (tested that).
You can try :
{
"presets": ["react-native"],
"plugins": ["dev-expression", "babel-plugin-dev-expression"]
}
Hope this help.
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
env: {
development: {},
production: {
plugins: ["transform-remove-console"]
}
}
}
I am not able to import images in my headercomponent.ts.
I suspect it is because of something i am doing wrong while compiling ts(using webpack ts loader) because same thing works with react( where the components are written in es6)
The error location is
//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR** Cannot find module '../../images/logo.png'
#Component({
selector: 'my-header',
//templateUrl:'components/header/header.tmpl.html' ,
template: `<header class="main-header">
<div class="top-bar">
<div class="top-bar-title">
<img src="{{logoSource}}">
</div>
my webpack config is
// webpack.config.js
'use strict';
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports = {
entry: path.join(basePath,'/components/boot/boot.ts'),
output: {
path: path.join(basePath,"..","/build"), // This is where images AND js will go
publicPath: path.join(basePath,"..","/build/assets"),
// publicPath: path.join(basePath ,'/images'), // This is used to generate URLs to e.g. images
filename: 'bundle.js'
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
module: {
preLoaders: [ { test: /\.tsx$/, loader: "tslint" } ],
//
loaders: [
{ test: /\.(png!jpg)$/, loader: 'file-loader?name=/img/[name].[ext]' }, // inline base64 for <=8k images, direct URLs for the rest
{
test: /\.json/,
loader: 'json-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/]
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: [/node_modules/],
loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
},
// fonts and svg
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
]
},
resolve: {
// now require('file') instead of require('file.coffee')
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6', 'png']
},
devtool: 'source-map'
};
and my directory structure looks like this
-/
-server/
-build/
-node-modules/
-public/
-components/
-boot/
-boot.component.ts
-header/
-header.component.ts
-images/
-logo.png
-services/
-typings/
-browser/
-main/
-browser.d.ts
-main.d.ts
-tsconfig.json
-typings.json
my tsconfig file is as follows:
//tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
I suspect I am messing some thing in typescript compilation , not sure what
The problem is that you confuse TypeScript level modules and Webpack level modules.
In Webpack any file that you import goes through some build pipeline.
In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, Webpack config is not used by TypeScript.
In your case you need to separate the concerns, use import from for TypeScript/EcmaScript code and use require for Webpack specifics.
You would need to make TypeScript ignore this special Webpack require syntax with a definition like this in a .d.ts file:
declare function require(string): string;
This will make TypeScript ignore the require statements and Webpack will be able to process it in the build pipeline.
Instead of:
import image from 'pathToImage/image.extension';
Use:
const image = require('pathToImage/image.extension');
I'm using
import * as myImage from 'path/of/my/image.png';
and created a typescript definition with
declare module "*.png" {
const value: any;
export = value;
}
This only works when you have a correct handler like the file-loader in webpack. Because this handler will give you a path to your file.
A small improvement to Christian Stornowski's answer would be to make the export default, i.e.
declare module "*.png" {
const value: string;
export default value;
}
So you can import an image using:
import myImg from 'img/myImg.png';
I also had same issue so I used following approach:
import * as myImage from 'path/of/my/image';
In my component I simply assigned the imported image to a data member;
export class TempComponent{
public tempImage = myImage;
}
and used it in template as:
<img [src]="tempImage" alt="blah blah blah">
If you want to use the ES6 syntax for importing.
First be sure that in your tsconfig.json you have:
target: 'es5',
module: 'es6'
The following should now work:
import MyImage from './images/my-image.png';
To be able to use default import like this:
import grumpyCat from '../assets/grumpy_cat.jpg';
Define jpg module declaration:
declare module "*.jpg" {
const value: string;
export default value;
}
and in your tsconfig use "module": "es6" (see #vedran comment above) or when you use "module": "commonjs" add "esModuleInterop": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true,
...
Source: https://github.com/TypeStrong/ts-loader/issues/344#issuecomment-381398818