I did everything according to guide https://nativescript-vue.org/en/docs/getting-started/installation. I installed a testing app and try to change the message on Home component, but i see that only css reloads on the fly. No errors, no issues or notes, just my android emulator reacts only on css changing, but not on js changing. At the same time, after every code changing (css or js) in console, I see JS: [HMR][31d47f755865bfccabe9] success | Successfully applied update.
Knowing all previous problem with HRM that native-script vue used to have, do these problems still exist?
My package.json:
{
"name": "example-app",
"main": "app/app.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"#nativescript/core": "~8.3.0",
"#nativescript/theme": "~3.0.2",
"nativescript-vue": "~2.9.0"
},
"devDependencies": {
"#nativescript/android": "8.3.1",
"#nativescript/preview-cli": "1.0.1",
"#nativescript/types": "~8.3.0",
"#nativescript/webpack": "~5.0.6",
"#types/node": "~17.0.21",
"nativescript-vue-template-compiler": "~2.9.0",
"typescript": "~4.5.5",
"vue": "~2.6.12"
}
}
My webpack.config.js
const webpack = require("#nativescript/webpack");
module.exports = (env) => {
webpack.init(env);
// Learn how to customize:
// https://docs.nativescript.org/webpack
return webpack.resolveConfig();
};
My tsconfig.json
{
"compilerOptions": {
"strict": true,
"target": "es2017",
"module": "esnext",
"moduleResolution": "node",
"lib": ["dom", "es2017"],
"sourceMap": true,
"noEmitHelpers": true,
"importHelpers": true,
"baseUrl": ".",
"paths": {
"~/*": ["app/*"],
"#/*": ["app/*"]
},
"typeRoots": ["types"],
"types": ["node"],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true
},
"include": ["app", "types"],
"exclude": ["node_modules", "platforms"],
}
I stopped using NativeScript hmr years ago. It's always given me issues. I've connected with people from the core NativeScript team who said they do the same.
I run my builds with --no-hmr and just use the full app reload.
Related
I started learning about how to create our own npm package and i created one. Now in this package, i want to create a dialog box for react native apps using typescript. Here are my files;
Package.json
{
"name": "rn-dialog",
"version": "1.0.0",
"description": "This is a simple dialog box package for react native app",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [
"react-native",
"react-native-dialog",
"rn-dialog",
"rn-dialog-box",
"react",
"react-native-dialog-box",
"popup"
],
"author": "Irfanwani <irfanwani347#gmail.com>",
"license": "ISC",
"files": [
"lib"
],
"peerDependencies": {
"react": ">=18.0.0",
"react-native": ">=0.69.6"
},
"devDependencies": {
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.4",
"typescript": "^4.8.4"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"jsx": "react-native",
"lib": ["dom", "ESNext"],
"declaration": true,
"sourceMap": true,
"outDir": "./lib",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
},
"exclude": ["node_modules"],
"include": ["./src/**/*.tsx", "./src/**/*.ts"]
}
index.tsx (inside the src folder)
import React from "react";
import { Text, View } from "react-native";
const Dialog = () => {
return (
<View>
<Text>This is from Dialog</Text>
<Text>Hope it works, inshaallah!!!</Text>
</View>
);
};
export default Dialog;
As you can see my devDependencies to build this component and after installing them, i also get react and react native installed with latest versions.
So when i try to pull this package locally into my project (expo project), it gives an error;
React Native version mismatch.
JavaScript version: 0.70.2 Native version: 0.69.0
I tried to run npm install --production on my package but it didn't work.
Any help will be appretiated!
You may want to change your devDependencies to:
"devDependencies": {
"#types/react": "^18.0.0",
"#types/react-native": "^0.69",
"typescript": "^4.8.4"
}
After searching a lot, i came across this answer and this helped.
We only need a package called install-local which installs local packages as other remote packages.
I'm trying to include paths aliases to my project in React Native.
In fact when I start the app it's working so I think my babel.config.js is ok, but in VSCode stills appear an error telling Cannot find module or its corresponding type declarations so I think I'm having my tsconfig.json wrong
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#ali/assets': './src/assets',
'#ali/components': './src/components',
'#ali/colors': './src/theme/colors.ts'
}
}
]
]
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"lib": ["es2017"],
"allowJs": true,
"jsx": "react-native",
"noEmit": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": false,
"rootDir": ".",
"paths": {
"#ali/assets": ["./src/assets/*"],
"#ali/components": ["./src/components/*"],
"#ali/colors": ["./src/theme/colors"]
}
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"],
"extends": "expo/tsconfig.base"
}
Here's my file
src/screens/Login/index.tsx
import Wellcome from '#ali/components/LogIn/Wellcome'
import React from 'react'
import LoginForm from '../../components/forms/LoginForm'
export const LogIn = () => {
return (
<>
<Wellcome />
<LoginForm />
</>
)
}
export default LogIn
I can see my component Wellcome in my app, but in VSCode stills appear the error.
This is due to a tsconfig.json bad configuration.
You should add baseUrl and remove the starting "." from paths routes.
Try this:
"baseUrl": ".",
"paths": {
"#ali/assets/*": ["src/assets/*"],
"#ali/components/*": ["src/components/*"],
"#ali/colors/*": ["src/theme/colors"]
}
Running production build sometimes produces different size and slightly different content.
In 9 of 10 cases, it works as expected producing the same output and hash result. But sometimes in 1 case of 10, it creates slightly different .js file (see the diff picture below).
Is there a way to fix that behaviour? Here’s the differences of the output .js file shown by DiffMerge.
vue.config.js:
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const path = require('path');
module.exports = {
filenameHashing: false,
chainWebpack: config => {config.optimization.minimize(false);},
pages: {
index: {
// entry for the page
entry: 'src/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
},
devServer: {
hot: true,
liveReload: true
},
configureWebpack: {
devtool: false,
plugins: [
require('unplugin-vue-components/webpack')({
resolvers: [ElementPlusResolver()],
}),
require('unplugin-auto-import/webpack')({
resolvers: [ElementPlusResolver()],
}),
],
}
};
tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": false,
"baseUrl": ".",
"types": [
"webpack-env", "offscreencanvas"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules",
"dist"
]
}
package.json
{
"name": "test-js",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "export ENVSOURCEMAPMODE=inline-source-map && vue-cli-service build --mode production && ./copyfiles.sh",
"build-debug": "export ENVSOURCEMAPMODE=inline-source-map && vue-cli-service build && ./copyfiles.sh",
"watch": "npm run build-debug && npm-watch"
},
"watch": {
"build-debug": {
"patterns": [
"src"
],
"extensions": "vue,css,js,ts"
}
},
"dependencies": {
"#types/offscreencanvas": "^2019.6.4",
"core-js": "^3.6.5",
"element-plus": "^2.0.5",
"#element-plus/icons-vue": "^0.2.4",
"vue-class-component": "^8.0.0-0"
},
"devDependencies": {
"npm-watch": "^0.11.0",
"vue": "^3.2.39",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-typescript": "^5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/compiler-sfc": "^3.0.0",
"sass": "^1.51.0",
"sass-loader": "^10.1.1",
"typescript": "^4.5.4",
"unplugin-auto-import": "^0.5.9",
"unplugin-vue-components": "^0.17.11",
"vue-plugin-webextension-i18n": "^0.1.2"
}
}
The cause was in the project structure:
├── Common library
│ └── library.ts
├── Project root
│ ├── src
│ │ └── ....
The project used a common TypeScript library located outside of the project root.
Solution: Putting a symlink inside of the project root and altering webpack.config.json (resolve: {symlinks: false}) fixed this issue.
Seems like the decision tree is not stable when some files are located outside of the project root.
I am using Vetur + ESLint + Prettier combo to autoformat code on save. It works OK most of the times, but breaks in at least one case. Now the configuration is so complicated I cannot really tell where the problems is.
When I save this specific tag, it makes <img> "self-closed" which doesn't seem OK to me as that one should not be a pair tag as far as I know. I think this "self-closed" <img> tag then breaks the formatting from that point on. See below:
The issue above happens when I save the file. The <v-list-item-avatar> should have larger indentation that the parent <template> tag, but instead it has a lower one. And than after the closing </template> tag the syntax highlighting breaks altogether.
I noticed I could workaround it by actually making <img> a pair tag, but even then it must not be on the same line, otherwise the same problem happens.
So if I do so it will format the code on save correctly and the syntax highlighting will start working again, but ESLint will still report an error about the enclosing tag:
Now I know you will ask me for my configuration... I am not sure what exactly should I post as again, the configuration of those tools seems to complicated for me, but I will try my best...
This is my global settings:
{
"vetur.validation.template": false,
"eslint.validate": [
"vue", "html", "javascript"
],
"eslint.autoFixOnSave": true,
"editor.formatOnSave": true,
"debug.javascript.autoAttachFilter": "smart",
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"json.maxItemsComputed": 20000,
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"git.autofetch": true
}
Here's the content of the .eslintrc.js in my project folder:
module.exports = {
"env": {
"browser": true,
"es6": true,
"node":true,
"meteor":true,
"mongo": true,
"mocha": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": "babel-eslint",
"allowImportExportEverywhere": true,
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue",
"html"
],
"rules": {
"vue/no-v-html":0,
}
};
And those plugins I guess come from my dev deps (package.json):
"devDependencies": {
"babel-eslint": "^10.1.0",
"babel-plugin-istanbul": "^6.0.0",
"cross-env": "^7.0.3",
"eslint": "^7.18.0",
"eslint-plugin-html": "^6.1.1",
"eslint-plugin-vue": "^8.5.0",
"jquery": "^3.5.1",
"puppeteer": "^5.5.0"
},
If there's anything else I should post, please let me know in the comments.
I am a beginner, just started to learn express and webpack, I tried to use the initial express file
Trying to use webpack for packaging, I keep getting errors
The reason for this is because I want to run my system in a non-node.js environment
Is my direction wrong?
The express project is create with express --view=ejs myapp
I didn't make any changes
webpack.config.js
const path = require('path');
const clientConfig = {
resolve: {
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
entry: {
'index': './app.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}
module.exports = [clientConfig];
package.json
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"webpack": "webpack"
},
"browser": {
"crypto": false
},
"dependencies": {
"cookie-parser": "~1.4.4",
"crypto-browserify": "^3.12.0",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"path": "^0.12.7",
"twig": "~0.10.3"
},
"main": "app.js",
"devDependencies": {
"webpack": "^5.26.3",
"webpack-cli": "^4.5.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Thanks for any guidance and comments
You can't run Express in a non-nodejs environment. Express depends upon the nodejs run-time library such as the http module so it can't run without that library. webpack can't overcome that.
You can use webpack to build either plain Javascript with no external dependencies or with dependencies that you have independent libraries for that can be included in the webpack bundle or with dependences that are present in whatever environment you want to run it in.