Vue-cli: `./src/main.ts in multi ./src/main.ts` issue while compiling application

Created on 24 Dec 2019  ·  22Comments  ·  Source: vuejs/vue-cli

Version

4.1.0

Reproduction link

https://github.com/kumaresan-subramani/ej2-vue-opennew-teamplate/blob/master/package.json

Environment info

"dependencies": {
        "@syncfusion/ej2": "*",
        "@syncfusion/ej2-vue-base": "*",
        "@syncfusion/ej2-vue-grids": "*",
        "@types/codemirror": "0.0.56",
        "@types/marked": "^0.3.0",
        "codemirror": "^5.37.0",
        "elasticlunr": "0.9.5",
        "fuse.js": "^3.2.0",
        "gulp-s3-upload": "^1.7.3",
        "marked": "^0.3.19",
        "tributejs": "^4.1.1",
        "vue": "^2.5.2",
        "vue-class-component": "4.3.1",
        "vue-property-decorator": "^6.0.0",
        "vue-router": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^4.1.0",
        "@vue/cli-plugin-eslint": "^4.1.0",
        "@vue/cli-plugin-typescript": "^3.7.0",
        "@vue/cli-service": "^4.1.0",
        "babel-eslint": "^10.0.3",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
    },

Steps to reproduce

  1. download below sample

sample.zip

  1. give npm i
  2. Then run npm run build
    you will see my error
D:\today\ej2-grid-vue-samples\ej2-vue-opennew-teamplate>npm run build

> [email protected] build D:\today\ej2-grid-vue-samples\ej2-vue-opennew-teamplate
> vue-cli-service build


\  Building for production...Starting type checking service...
Using 1 worker with 2048MB memory limit
\  Building for production...

 ERROR  Failed to compile with 1 errors                                                                       6:15:43 PM

This relative module was not found:

* ./src/main.ts in multi ./src/main.ts
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\KumaresanSubramani\AppData\Roaming\npm-cache\_logs\2019-12-24T12_45_43_850Z-debug.log

D:\today\ej2-grid-vue-samples\ej2-vue-opennew-teamplate>

What is expected?

build get succeed

What is actually happening?

build get failed

picture kumaresan-subramani

All 22 comments

https://github.com/vuejs/vue-cli/issues/2934

kumaresan-subramani picture kumaresan-subramani on 24 Dec 2019

@sodatea , any suggestion on this.....?

kumaresan-subramani picture kumaresan-subramani on 24 Dec 2019

I’m sorry I’m on vacation (without a laptop) so I can’t take a closer look in your issue at the moment.
Will look into it later.

Happy holidays BTW 🙂

sodatea picture sodatea on 25 Dec 2019

Haha okay bro.....Thanks foryou reply..

Happy Christmas 👍

kumaresan-subramani picture kumaresan-subramani on 25 Dec 2019

Seems you don't need typescript for this particular project.

So, solutions:

  1. Just npm uninstall @vue/cli-plugin-typescript.
  2. Or, if you do need typescript support, you need to re-add the plugin correctly:
npm uninstall @vue/cli-plugin-typescript
vue add typescript

so that other peer dependencies of the plugin can be correctly installed.

sodatea picture sodatea on 27 Dec 2019

@sodatea , Facing same issue again after tried your suggestion.so i have created new sample

sample - https://github.com/kumaresan-subramani/check-sample

clone this sample and give npm i

once npm i completed give npm run build you will see my below error:

D:\today\ej2-vue-opennew-teamplate>npm run build

> [email protected] build D:\today\ej2-vue-opennew-teamplate
> vue-cli-service build


\  Building for production...

 ERROR  Failed to compile with 2 errors                                                                      11:29:17 AM

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Unexpected reserved word 'let'

  27 |     },
  28 |     getDate: () => {
> 29 |         let date: string = '';
     |         ^
  30 |         date += ((new Date()).getMonth().toString()) + '/' + ((new Date()).getDate().toString());
  31 |         return date += '/' + ((new Date()).getFullYear().toString());
  32 |     }, at src\App.vue:66:8:
  64 |     },
  65 |     getDate: () => {
> 66 |         let date: string = '';
     |        ^
  67 |         date += ((new Date()).getMonth().toString()) + '/' + ((new Date()).getDate().toString());
  68 |         return date += '/' + ((new Date()).getFullYear().toString());
  69 |     },


1 error found.

 @ ./src/main.js 6:0-28 10:13-16
 @ multi ./src/main.js

 error  in ./src/App.vue?vue&type=script&lang=ts&

Module parse failed: Unexpected token (53:33)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   },
|   methods: {
>       toolbarClick: function(args: ClickEventArgs) {
|         switch (args.item.text) {
|             /* tslint:disable */

 @ ./src/App.vue?vue&type=script&lang=ts& 1:0-166 1:182-185 1:187-350 1:187-350
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\KumaresanSubramani\AppData\Roaming\npm-cache\_logs\2019-12-30T05_59_18_079Z-debug.log

D:\today\ej2-vue-opennew-teamplate>
kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

@sodatea can you pleae update on this bro...i am not able to go forward withut solving this bro?

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

Seems I missed the typescript syntax in the previous sample project.
Then please follow the second suggestion and run vue add typescript

sodatea picture sodatea on 30 Dec 2019

i have tried that too bro ad facing below issue:

> [email protected] build D:\today\ej2-vue-opennew-teamplate
> vue-cli-service build


\  Building for production...Starting type checking service...
Using 1 worker with 2048MB memory limit
-  Building for production...[BABEL] Note: The code generator has deoptimised the styling of D:\today\ej2-vue-opennew-teamplate\src\data-source.ts as it exceeds the max of 500KB.
-  Building for production...

 ERROR  Failed to compile with 2 errors                                                                      12:04:06 PM

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: Parsing error: '}' expected at src\App.vue:66:12:
  64 |     },
  65 |     getDate: () => {
> 66 |         let date: string = '';
     |            ^
  67 |         date += ((new Date()).getMonth().toString()) + '/' + ((new Date()).getDate().toString());
  68 |         return date += '/' + ((new Date()).getFullYear().toString());
  69 |     },


1 error found.

 @ ./src/main.ts 6:0-28 10:13-16
 @ multi ./src/main.ts

 error  in ./src/data-source.ts

Module Error (from ./node_modules/thread-loader/dist/cjs.js):

D:\today\ej2-vue-opennew-teamplate\src\data-source.ts
   9982:46  error  Unnecessary escape character: \-  no-useless-escape
   9982:52  error  Unnecessary escape character: \-  no-useless-escape
   9982:67  error  Unnecessary escape character: \.  no-useless-escape
   9982:85  error  Unnecessary escape character: \-  no-useless-escape
  23845:46  error  Unnecessary escape character: \-  no-useless-escape
  23845:52  error  Unnecessary escape character: \-  no-useless-escape
  23845:67  error  Unnecessary escape character: \.  no-useless-escape
  23845:85  error  Unnecessary escape character: \-  no-useless-escape
  23855:46  error  Unnecessary escape character: \-  no-useless-escape
  23855:52  error  Unnecessary escape character: \-  no-useless-escape
  23855:67  error  Unnecessary escape character: \.  no-useless-escape
  23855:85  error  Unnecessary escape character: \-  no-useless-escape

✖ 12 problems (12 errors, 0 warnings)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts& 5:0-45 10:12-24
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\KumaresanSubramani\AppData\Roaming\npm-cache\_logs\2019-12-30T06_34_06_128Z-debug.log

sample - https://github.com/kumaresan-subramani/check-sample

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

But this sample project does not have the @vue/cli-plugin-typescript dependency. Did you succeed in adding it?

sodatea picture sodatea on 30 Dec 2019

Got it. That's not the same error.

sodatea picture sodatea on 30 Dec 2019
😕1

yes, mistaken i have shared old sample

asd.zip

package.json

{
  "name": "cli-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.3",
    "eslint-loader": "^2.1.2",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0"
  },
  "devDependencies": {
    "@syncfusion/ej2-vue-grids": "*",
    "@syncfusion/ej2-vue-navigations": "*",
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-typescript": "^4.1.2",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "typescript": "~3.5.3",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}
kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

@sodatea , help me to get this done bro.....

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

Previously there are parsing errors caused by incorrect configurations.

Now, these are just lint errors.
Either fix them or ignore the rule by adding

/* eslint-disable no-useless-escape */

at the beginning of the datasource.ts file.

sodatea picture sodatea on 30 Dec 2019

Bro i have already resolved that lint error bro , below is my error

> [email protected] build D:\today\ej2-vue-opennew-teamplate
> vue-cli-service build


\  Building for production...Starting type checking service...
Using 1 worker with 2048MB memory limit
\  Building for production...[BABEL] Note: The code generator has deoptimised the styling of D:\today\ej2-vue-opennew-teamplate\src\data-source.ts as it exceeds the max of 500KB.
|  Building for production...

 ERROR  Failed to compile with 1 errors                                                                      12:18:18 PM

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: Parsing error: '}' expected at src\App.vue:66:12:
  64 |     },
  65 |     getDate: () => {
> 66 |         let date: string = '';
     |            ^
  67 |         date += ((new Date()).getMonth().toString()) + '/' + ((new Date()).getDate().toString());
  68 |         return date += '/' + ((new Date()).getFullYear().toString());
  69 |     },


1 error found.

 @ ./src/main.ts 6:0-28 10:13-16
 @ multi ./src/main.ts

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\KumaresanSubramani\AppData\Roaming\npm-cache\_logs\2019-12-30T06_48_18_416Z-debug.log
kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

Replace <any>this.$refs.grid with this.$refs.grid as any

sodatea picture sodatea on 30 Dec 2019
❤1

<any> is an ambiguous syntax due to the introduction of JSX syntax.
Though I don't understand why this turns out to be problematic even in lang="ts" blocks (should only raise error in lang="tsx"), it is the culprit.

sodatea picture sodatea on 30 Dec 2019
👀1 😕1

Replace <any>this.$refs.grid with this.$refs.grid as any

suggestion works fin bro.........

But it is working fine in here bro with same code- https://github.com/kumaresan-subramani/ej2-vue-samples/blob/master/src/grid/advance-export.vue#L57

I am facing issue only this sample - https://github.com/kumaresan-subramani/check-sample/blob/master/src/App.vue#L57

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

I don't understand either…

My guess is that it might be a bug in https://github.com/typescript-eslint/typescript-eslint

sodatea picture sodatea on 30 Dec 2019
😄1

ohh okay ....thanks bro

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

@sodatea , i have created vue sample with routing when i navigateone pageto another it adds # into url like below: i ther any way to remove that

http://localhost:8080/#/register

Here i dont want # to get add
route.zip

in angular, we can use locationhashstartegy like that any strategies available here?

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019

Got it form here - https://forum.vuejs.org/t/vue-2-0-how-to-remove-in-url/748/3

kumaresan-subramani picture kumaresan-subramani on 30 Dec 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wuyuweixin picture wuyuweixin  ·  35Comments
italomaia picture italomaia  ·  88Comments
GeertClaes picture GeertClaes  ·  31Comments
yangzhuq picture yangzhuq  ·  33Comments
joeirimpan picture joeirimpan  ·  35Comments