vue-cli-plugin-nativescript-vue
vue-cli-plugin-nativescript-vue copied to clipboard
nativescript-vue
vue create web-mobile-project is not working
First of all I'm very new to front-end development and NativeScript. I tried to follow exact steps described at https://nativescript-vue.org/en/docs/getting-started/code-sharing/ but it seems it's broken.
There are issues at src/router.js and webpack.config.js
from that I managed to solve errors in webpack by removing escape characters.
Exact usage in terminal is below.
➜ web-mobile-app git:(master) vue add vue-cli-plugin-nativescript-vue
📦 Installing vue-cli-plugin-nativescript-vue...
yarn add v1.19.2 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 2 new dependencies. info Direct dependencies └─ [email protected] info All dependencies ├─ [email protected] └─ [email protected] ✨ Done in 6.26s. ✔ Successfully installed plugin: vue-cli-plugin-nativescript-vue
? Enter a unique application identifier: com.kintell.webmobileapp ? Use HTML5 history mode? (Default: hash mode) No ? Is this a brand new project? (Default: Yes) Yes ? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web ? What type of template do you want to start with? (Default: Simple) Simple
🚀 Invoking generator for vue-cli-plugin-nativescript-vue... adding to package.json deleting from package.json doing template rendering 📦 Installing additional dependencies...
yarn install v1.19.2 [1/4] 🔍 Resolving packages...
success Saved lockfile. ✨ Done in 47.92s. ⠋ Running completion hooks...dual components env files error: Parsing error: Unexpected token, expected ","
2 | require('@vue/cli-plugin-router/generator')(api, { 3 | historyMode: options.routerHistoryMode
4 | }; | ^ 5 | export default new Router(options); 6 | } 7 | at src/router.js:4:4: 2 | require('@vue/cli-plugin-router/generator')(api, { 3 | historyMode: options.routerHistoryMode 4 | }; | ^ 5 | export default new Router(options); 6 | } 7 |
error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:214:25: 212 | }, 213 | {
214 | test: /[/|\]app.css$/, | ^ 215 | use: [ 216 | 'nativescript-dev-webpack/style-hot-loader', 217 | {
error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:224:25: 222 | }, 223 | {
224 | test: /[/|\]app.scss$/, | ^ 225 | use: [ 226 | 'nativescript-dev-webpack/style-hot-loader', 227 | {
error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:236:28: 234 | { 235 | test: /.css$/,
236 | exclude: /[/|\]app.css$/, | ^ 237 | use: [ 238 | 'nativescript-dev-webpack/style-hot-loader', 239 | 'nativescript-dev-webpack/apply-css-loader.js',
error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:245:28: 243 | { 244 | test: /.scss$/,
245 | exclude: /[/|\]app.scss$/, | ^ 246 | use: [ 247 | 'nativescript-dev-webpack/style-hot-loader', 248 | 'nativescript-dev-webpack/apply-css-loader.js',
5 errors found.
I fixed by:
https://nativescript-vue.org/en/docs/routing/vue-router/
and changed to manual routing
https://nativescript-vue.org/en/docs/routing/manual-routing/
I'm running into very similar errors. I resolved some of the webpack errors, but not all. Anyone had luck with this recently? Before adding the plugin, the project is clean, passing tests, etc.
% vue add vue-cli-plugin-nativescript-vue
WARN You are using an outdated version of NPM.
there may be unexpected errors during installation.
Please upgrade your NPM version.
📦 Installing vue-cli-plugin-nativescript-vue...
WARN You are using an outdated version of NPM.
there may be unexpected errors during installation.
Please upgrade your NPM version.
+ [email protected]
added 13 packages from 8 contributors in 10.339s
✔ Successfully installed plugin: vue-cli-plugin-nativescript-vue
? Enter a unique application identifier: org.example.application
? Use HTML5 history mode? (Default: hash mode) No
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND
Web
? What type of template do you want to start with? (Default: Simple) Simple
WARN You are using an outdated version of NPM.
there may be unexpected errors during installation.
Please upgrade your NPM version.
🚀 Invoking generator for vue-cli-plugin-nativescript-vue...
adding to package.json
deleting from package.json
doing template rendering
📦 Installing additional dependencies...
WARN You are using an outdated version of NPM.
there may be unexpected errors during installation.
Please upgrade your NPM version.
> [email protected] postinstall /home/jesse/dev/frontend/typescript-vue/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> @nativescript/[email protected] postinstall /home/jesse/dev/frontend/typescript-vue/node_modules/@nativescript/core
> node cli-hooks/postinstall.js
> [email protected] postinstall /home/jesse/dev/frontend/typescript-vue/node_modules/nativescript-vue
> node postinstall.js
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 12 packages from 8 contributors and updated 7 packages in 13.077s
> [email protected] install /home/jesse/dev/frontend/typescript-vue/node_modules/node-sass
> node scripts/install.js
Cached binary found at /home/jesse/.npm/node-sass/4.14.1/linux-x64-64_binding.node
> [email protected] postinstall /home/jesse/dev/frontend/typescript-vue/node_modules/node-sass
> node scripts/build.js
Binary found at /home/jesse/dev/frontend/typescript-vue/node_modules/node-sass/vendor/linux-x64-64/binding.node
Testing binary
Binary is fine
> [email protected] postinstall /home/jesse/dev/frontend/typescript-vue/node_modules/nativescript-dev-webpack
> node postinstall.js
Creating file: /home/jesse/dev/frontend/typescript-vue/webpack.config.js
+ @babel/[email protected]
+ @babel/[email protected]
+ @babel/[email protected]
+ @babel/[email protected]
+ @types/[email protected]
+ @types/[email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ [email protected]
+ [email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ [email protected]
+ [email protected]
+ @vue/[email protected]
+ @vue/[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ @vue/[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ @vue/[email protected]
+ [email protected]
+ [email protected]
+ @typescript-eslint/[email protected]
+ @typescript-eslint/[email protected]
+ [email protected]
added 268 packages from 238 contributors, removed 11 packages, updated 34 packages and moved 16 packages in 53.634s
⠋ Running completion hooks...dual components env files
error: Parsing error: ')' expected at src/router.ts:4:3:
2 | require('@vue/cli-plugin-router/generator')(api, {
3 | historyMode: options.routerHistoryMode
> 4 | };
| ^
5 | export default new Router(options);
6 | }
7 |
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:1:42:
> 1 | const { join, relative, resolve, sep } = require("path");
| ^
2 |
3 | const webpack = require("webpack");
4 | const CleanWebpackPlugin = require("clean-webpack-plugin");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:3:17:
1 | const { join, relative, resolve, sep } = require("path");
2 |
> 3 | const webpack = require("webpack");
| ^
4 | const CleanWebpackPlugin = require("clean-webpack-plugin");
5 | const CopyWebpackPlugin = require("copy-webpack-plugin");
6 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:4:28:
2 |
3 | const webpack = require("webpack");
> 4 | const CleanWebpackPlugin = require("clean-webpack-plugin");
| ^
5 | const CopyWebpackPlugin = require("copy-webpack-plugin");
6 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
7 | const TerserPlugin = require("terser-webpack-plugin");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:5:27:
3 | const webpack = require("webpack");
4 | const CleanWebpackPlugin = require("clean-webpack-plugin");
> 5 | const CopyWebpackPlugin = require("copy-webpack-plugin");
| ^
6 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
7 | const TerserPlugin = require("terser-webpack-plugin");
8 |
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:6:34:
4 | const CleanWebpackPlugin = require("clean-webpack-plugin");
5 | const CopyWebpackPlugin = require("copy-webpack-plugin");
> 6 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
| ^
7 | const TerserPlugin = require("terser-webpack-plugin");
8 |
9 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:7:22:
5 | const CopyWebpackPlugin = require("copy-webpack-plugin");
6 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
> 7 | const TerserPlugin = require("terser-webpack-plugin");
| ^
8 |
9 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
10 | const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:9:25:
7 | const TerserPlugin = require("terser-webpack-plugin");
8 |
> 9 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
| ^
10 | const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
11 |
12 | const nsWebpack = require("nativescript-dev-webpack");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:10:31:
8 |
9 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
> 10 | const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
| ^
11 |
12 | const nsWebpack = require("nativescript-dev-webpack");
13 | const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:12:19:
10 | const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
11 |
> 12 | const nsWebpack = require("nativescript-dev-webpack");
| ^
13 | const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
14 | const {
15 | NativeScriptWorkerPlugin
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:13:28:
11 |
12 | const nsWebpack = require("nativescript-dev-webpack");
> 13 | const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
| ^
14 | const {
15 | NativeScriptWorkerPlugin
16 | } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at webpack.config.js:16:5:
14 | const {
15 | NativeScriptWorkerPlugin
> 16 | } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
| ^
17 | const hashSalt = Date.now().toString();
18 |
19 | module.exports = env => {
error: Identifier 'collapse_vars' is not in camel case (@typescript-eslint/camelcase) at webpack.config.js:224:15:
222 | // The Android SBG has problems parsing the output
223 | // when these options are enabled
> 224 | collapse_vars: platform !== "android",
| ^
225 | sequences: platform !== "android"
226 | },
227 | keep_fnames: true
error: Identifier 'keep_fnames' is not in camel case (@typescript-eslint/camelcase) at webpack.config.js:227:13:
225 | sequences: platform !== "android"
226 | },
> 227 | keep_fnames: true
| ^
228 | }
229 | })
230 | ]
error: Unnecessary escape character: \/ (no-useless-escape) at webpack.config.js:260:19:
258 | },
259 | {
> 260 | test: /[\/|\\]app\.css$/,
| ^
261 | use: [
262 | "nativescript-dev-webpack/style-hot-loader",
263 | {
error: Unnecessary escape character: \/ (no-useless-escape) at webpack.config.js:270:19:
268 | },
269 | {
> 270 | test: /[\/|\\]app\.scss$/,
| ^
271 | use: [
272 | "nativescript-dev-webpack/style-hot-loader",
273 | {
error: Unnecessary escape character: \/ (no-useless-escape) at webpack.config.js:282:22:
280 | {
281 | test: /\.css$/,
> 282 | exclude: /[\/|\\]app\.css$/,
| ^
283 | use: [
284 | "nativescript-dev-webpack/style-hot-loader",
285 | "nativescript-dev-webpack/apply-css-loader.js",
error: Unnecessary escape character: \/ (no-useless-escape) at webpack.config.js:291:22:
289 | {
290 | test: /\.scss$/,
> 291 | exclude: /[\/|\\]app\.scss$/,
| ^
292 | use: [
293 | "nativescript-dev-webpack/style-hot-loader",
294 | "nativescript-dev-webpack/apply-css-loader.js",
18 errors found.
@jesselang you can go nuclear and create a .eslintignore file at the root of your project and add webpack.config.js to it, much like a .gitignore file.
I fixed by:
https://nativescript-vue.org/en/docs/routing/vue-router/
and changed to manual routing
https://nativescript-vue.org/en/docs/routing/manual-routing/ Running into similar issues.
Hi @gustawdaniel, Do you have to remove the router.js file? Hope you could share the steps you did. Thanks in advace.
