I am following this React JS Tutorial.
It's throwing some jsx-a11y/anchor-is-valid errors.
I found a hack to add the following code to what I am assuming is a .eslintrc file:
{
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
But I have no idea where it is or if I should create it in the src folder. Do I add anything to package.json file?
This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file, both of which ESLint will look for and read automatically, or you can specify a configuration file on the command line.
In package.json:
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
}
This needs to be at root level of the project
Related
I'm trying to build my application in vuejs, but I'm still a newbie. I couldn't find any solution to my problem on the internet. Can anyone help me? My settings in the "tsconfig.json" file are like this:
tsconfig.json
{
"compilerOptions": {
"allowJs": true
},
"files": [
"src/**/*"
],
"references": [
{
"path": "./tsconfig.config.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
Below is a screenshot of the error.
Where am I going wrong?
I have been trying to determine what has changed doing this update that would cause the icons to no longer render correctly. I do not receive any errors in the browser, but I see that it is no longer trying to load the font file (previously was /packs/media/fonts/element-icons-xxx.woff)
The manifest.json contains an entry for the file:
"media/fonts/element-icons.woff": "/packs/media/fonts/element-icons-313f7dac.woff",
I have compared the generated webpack.config.js and see very few changes:
"output.pathinfo: true" has been removed
""cache": true," has been removed
under ""loader": "sass-loader"" the following has been added under "options":
"sassOptions": {
"includePaths": []
}
under "plugins" a ""logger": {}," has been added above ""pathCache": {},"
The theme is currently being loaded via babel.config.js under plugins:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
But I have also tried importing it in the main entrypoint with:
import 'element-ui/lib/theme-chalk/index.css';
with the same result.
I have added in the 'resolve-url-loader' as recommended in some posts:
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
Which places it right above the 'sass-loader':
{
"key": "sass",
"value": {
"test": {},
"use": [
"/Users/tom/LGL_DEV/lgl/node_modules/#rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 2,
"modules": false
}
},
{
"loader": "postcss-loader",
"options": {
"config": {
"path": "/Users/tom/LGL_DEV/lgl"
},
"sourceMap": true
}
},
{
"loader": "resolve-url-loader"
},
{
"loader": "sass-loader",
"options": {
"sourceMap": true,
"sassOptions": {
"includePaths": []
}
}
}
],
"sideEffects": true,
"exclude": {}
}
},
Thoughts?
Update: I have incrementally updated webpacker to see where this breaks:
4.2.2: element-icons load just fine.
4.3.0: element-icons load just fine.
5.0.0: not loading element-icons.
webpack version didn't change
mini-css-extract-plugin changed from 0.8.2 to 0.9.0
file-loader changed from 4.3.0 to 5.1.0
5.0.1: not loading element-icons.
I am serving static files (client builds) using middleware.json
For client,admin and question admin like this
"files": {
"loopback#static": [
{
"params": "$!../client"
},
{
"paths": [
"/admin"
],
"params": "$!../clientAdmin"
},
{
"paths": [
"/question"
],
"params": "$!../adminQuestion"
}
]
},
I want to add another path like
{
"paths": [
"/sponsor/.*"
],
"params": "$!../client"
}
which means that if the url is localhost:3000/sponsor/google or localhost:3000/sponsor/dell, i need to serve the client file.
How to handle this?
I tried this one,
app.use('/sponsor/:id',loopback.static(path.resolve(__dirname, '../client')));
It loading the path but auto redirecting to localhost:3000.
How to handle this dynamic case?
app.use('/sponsor/:id',loopback.static(path.resolve(__dirname, '../client')));
Worked fine
i find a SSR demo (React+typescript+Next.js),and its used these two plugins.
i was confused that why its need both of them?
As far as I am concerned,these two plugins did the same work,anyone can explain why?
tsconfig.json
"paths": {
"#components/*": [
"./components/*"
],
"#helper/*": [
"./helper/*"
],
"#utils/*": [
"./utils/*"
],
"#interfaces/*": [
"./interfaces/*"
],
"#api/*": [
"./pages/api/*"
],
"#serverApi/*": [
"./server/api/*"
],
"#newscenter/*": [
"./newscenter/*"
],
"#spotcenter/*": [
"./spotcenter/*"
],
"#styles/*": [
"./styles/*"
]
}
.babelrc
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"#components": "./components",
"#helper": "./helper",
"#utils": "./utils",
"#interfaces": "./interfaces",
"#api": "./pages/api",
"#serverApi": "./server/api",
"#newscenter": "./newscenter",
"#spotcenter": "./spotcenter",
"#styles": "./styles"
}
}
]
]
This is an old questions. but for anyone coming across this in future I thought I'd update.
jsconfig.json (or tsconfig.json if you're using typescript) is to inform your IDE that you are using these aliases. vscode or intellij for example, will then know where to look to check your imports are working correctly
the module resolver plugin for babel is what tells the server to import the files from those aliases
I've got a polymer.js 1.x project that I want to bundle to optimize for production use.
My project has several custom elements in /elements directory and lots (~100) dependencies in bower_elements.
It does not use service worker and doesn't have manifest.json file.
I tried following directions published on https://www.polymer-project.org/2.0/toolbox/build-for-production#bundling (the directions are on v2 documentation but there is info it would work for v1 projects too - tried it with polymer-starter-kit and it worked - files were bundled).
The build produces minified html,js,css files but I cannot get it to bundle my code, despite having set bundle: true in polymer.json build section.
My polymer.json contents:
{
"entrypoint": "index.html",
"fragments": [
"elements/**/*"
],
"sources": [
"images/**/*",
"bower.json",
"index.html",
"elements/**/*",
"styles/**/*"
],
"extraDependencies": [
"bower_components/webcomponentsjs/*.js",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
],
"builds": [
{
"name": "es6-bundled",
"js": {
"minify": true,
"compile": false
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"bundle": true,
"addServiceWorker": false,
"addPushManifest": false,
"preset": "es6-bundled"
}
]
}