vue create web-mobile-project is not working #48

jigar007 · 2020-07-31T05:17:44Z

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.

juanjcardona13 · 2020-08-11T22:01:22Z

X2 help please!!

gustawdaniel · 2020-09-27T14:40:27Z

I have the same problem.

gustawdaniel · 2020-09-27T14:51:09Z

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/

jesselang · 2021-02-15T01:43:54Z

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.

ksumarine · 2021-03-01T17:28:11Z

@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.

thond1st · 2021-04-11T14:33:08Z

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vue create web-mobile-project is not working #48

vue create web-mobile-project is not working #48

jigar007 commented Jul 31, 2020

juanjcardona13 commented Aug 11, 2020

gustawdaniel commented Sep 27, 2020

gustawdaniel commented Sep 27, 2020

jesselang commented Feb 15, 2021

ksumarine commented Mar 1, 2021

thond1st commented Apr 11, 2021

vue create web-mobile-project is not working #48

vue create web-mobile-project is not working #48

Comments

jigar007 commented Jul 31, 2020

juanjcardona13 commented Aug 11, 2020

gustawdaniel commented Sep 27, 2020

gustawdaniel commented Sep 27, 2020

jesselang commented Feb 15, 2021

ksumarine commented Mar 1, 2021

thond1st commented Apr 11, 2021