`./src/main.ts in multi ./src/main.ts` issue while compiling application

[kumaresan-subramani]

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

2. give npm i
3. Then run npm run build
   you will see my error

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

> cli-project@0.1.0 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! cli-project@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cli-project@0.1.0 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

[kumaresan-subramani]

#2934

[kumaresan-subramani]

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

[haoqunjiang]

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 🙂

[kumaresan-subramani]

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

Happy Christmas 👍

[haoqunjiang]

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.

[kumaresan-subramani]

@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

> cli-project@0.1.0 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! cli-project@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cli-project@0.1.0 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]

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

[haoqunjiang]

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

[kumaresan-subramani]

i have tried that too bro ad facing below issue:

> cli-project@0.1.0 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! cli-project@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cli-project@0.1.0 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

[haoqunjiang]

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

[haoqunjiang]

Got it. That's not the same error.

[kumaresan-subramani]

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]

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

[haoqunjiang]

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.