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?
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.
I wanna try to use the global "authors" in the blog markdown file "authorsMapPath" this parameter in the docusaurus.config.js file.
However, whatever I tried in the presets or plugins, I always got this error.
A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.
ValidationError: "authorsMapPath" is not allowed
Here is my partial setting in the docusaurus.config.js file.
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
// authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
plugins: [
[
'#docusaurus/plugin-content-blog',
{
authorsMapPath: 'authors.yml',
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
},
],
],
Is there any idea about my error?
Thank you!
I could resolve this issue after I upgraded #docusaurus/preset-classic version from 2.0.0-alpha.72 to 2.0.0-beta.21.
The code became like below:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
I am trying with following rollup.config.js file
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import copy from 'rollup-plugin-copy'
import clean from 'rollup-plugin-clean';
export default [
{
input: "src/index.ts",
external: Object.keys(pkg.peerDependencies || {}),
watch: {
skipWrite: false,
clearScreen: false,
include: 'src/**/*',
//exclude: 'node_modules/**',
// chokidar: {
// paths: 'src/**/*',
// usePolling: false
// }
},
plugins: [
clean(),
copy({
targets: [
{ src: 'src/*', dest: 'dist' }
]
}),
typescript({
typescript: require("typescript"),
include: [ "*.ts+(|x)", "**/*.ts+(|x)", "*.d.ts", "**/*.d.ts" ]
}),
],
output: [
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "esm" },
{
file: "example/src/reactComponentLib/index.js",
format: "es",
banner: "/* eslint-disable */"
}
]
}
];
I want to rebuild when anything in src changes. I have couple of files which are not imported in .js and .ts files but I want them to copy in dist folder. copy is working fine but the watch is not picking up changes in those other files. Tried alot of variations on chokidar options but no luck yet.
Anyone have any idea how to resolve this?
watch.include only works on files pertaining to the module graph so if they are not imported they won't be included (https://rollupjs.org/guide/en/#watchinclude).
You can solve this by creating a small plugin that calls this.addWatchFile on those external files when the build starts. Here is an example:
plugins: [
{
name: 'watch-external',
buildStart(){
this.addWatchFile(path.resolve(__dirname, 'foo.js'))
}
}
]
Combine it with some globbing utility such as fast-glob and just call this.addWatchFile for every file you want to copy:
import fg from 'fast-glob';
export default {
// ...
plugins: [
{
name: 'watch-external',
async buildStart(){
const files = await fg('src/**/*');
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}
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"]
}
i have a following requirejs configuration in my code:
require.config({
baseUrl: "js",
// urlArgs: 'cb=' + Math.random(),
deps:["config","app"],
paths: {
'jquery' : 'jquery/jquery',
'jquerymobile.config' : 'mobile/jquerymobile.config',
'jquerymobile': 'mobile/jquery.mobile-1.3.1.min' ,
'underscore': 'underscore-amd/underscore-min',
'backbone' : 'backbone-amd/backbone-min',
text: 'plugins/text'
},
shim: {
underscore: {
exports: "_"
},
'jquery' : 'jquery',
'jquerymobile.config' : ['jquery'],
jquerymobile : {
deps : ["jquery", 'jquerymobile.config']
},
backbone: {
deps: ['underscore', 'jquery', 'jquerymobile'],
exports: 'Backbone'
}
}
});
inside jquerymobile.config file i have console log statement, which cannot be seen after optimization with following build profile (build.js):
({
appDir: '../',
baseUrl: 'js',
dir: '../../dist',
name: 'config',
skipDirOptimize:true,
fileExclusionRegExp: /^(r|build)\.js$/,
excludeShallow: ['settings'],
mainConfigFile: '../js/config.js',
optimizeCss: 'standard',
removeCombined: true,
deps:["config","app"]
})
I have a feeling that r.js ignoring the shim, dependecies,\n
is there any workaround?
thanks for help
Please try the following way:
include your jquerymobile.config in main.js require dependencies list:
require(['app', 'jquerymobile.config', 'jquerymobile'], function(App) {
App.initialize();
});