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
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 get an error from this rule, #typescript-eslint/no-unsafe-member-access when I try to access the request body in my API. My project contains JavaScript and TypeScript code and uses Express.
server.js:
server.post('url', apiFunction);
app.ts:
export function apiFunction(req: Request, res: Response): Promise<void> {
const requestVariable: number = req.body.requestVariable;
.eslintrc.js
module.exports = {
"parser": "#typescript-eslint/parser",
"env": {
"es6":true,
"node":true,
"jest":true
},
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
'plugin:#typescript-eslint/recommended-requiring-type-checking'
],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2017,
'project': './tsconfig.eslint.json'
}
,
"globals": {
"Rx": true
},
"rules": {
"#typescript-eslint/indent": [
2,
2
],
"linebreak-style": [
2,
"unix"
],
"quotes": [
2,
"single"
],
"semi": [
2,
"always"
],
"no-console":[
0
]
}
eslint keeps saying that I cannot access req.body.request because req is typed any. The exact is error is this: Unsafe member access .body on any value.
However, my code works correctly. My project has both JavaScript and TypeScript code at the moment. So, the server is written in JavaScript and the function is written in TypeScript. Is that why the req parameter has an any type instead of a Request type?
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 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
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"
}
]
}