Vue-cli: Can't compile any Vue project - The relative module was not found ./src/main.ts in multi ./src/main.ts

[zmbq]

Version

3.1.1

Reproduction link

https://github.com/zmbq/vue-cli-bug

Node and OS info

10.13.0

Steps to reproduce

I've created a new Vue project with the vue cli, specifying Typescript, Babel, no class decorators, SCSS, tslint and no unit tests. The project is located under c:\sources\test. c:\sources is a directory junction (a Windows equivalent of symlinks) to d:\sources.

Then I did a yarn build

What is expected?

Project should compile

What is actually happening?

ERROR Failed to compile with 1 errors 9:37:35 AM

This relative module was not found:

• ./src/main.ts in multi ./src/main.ts
  ERROR Build failed with errors.

---

When working from d:\sources\test everything is working properly. I've been using Vue on the same computer with the same directory junction without an issue.

Angular has a --preserve-symlinks option to make this work, I did not find a Vue counterpart.

[sodatea]

Can't reproduce. Here's the screencast: https://asciinema.org/a/us6wLLCaX39COtwXOSmBpIJPo

[zmbq]

OK! Got it! This is a problem when using directory junctions in Windows, and it's brand new, since I've been using those for quite a lot of time with Vue. I'm updating the issue.

[zmbq]

I have just noticed webpack has been updated from 4.23.1 to 4.25.1, which explains the difference.

This still needs to be fixed, people starting new projects on linked directories (at least on Windows) are going to face this.

[sodatea]

Does disabling symlink help? https://webpack.js.org/configuration/resolve/#resolve-symlinks

[zmbq]

I tried it by adding it to vue.config.js ‘s webpackConfiguration. Unfortunately it did not work.

From: Haoqun Jiang [e-mail]
Sent: Monday, November 12, 2018 12:03 PM
To: vuejs/vue-cli [e-mail]
Cc: Itay Zandbank [e-mail]; Author [e-mail]
Subject: Re: [vuejs/vue-cli] Can't compile any Vue project - The relative module was not found ./src/main.ts in multi ./src/main.ts (#2934)

Does disabling symlink help? https://webpack.js.org/configuration/resolve/#resolve-symlinks

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-cli/issues/2934#issuecomment-437822763 , or mute the thread https://github.com/notifications/unsubscribe-auth/AAlkfjt_aZoY9GX7MNc3DTBcLO200EMaks5uuUdAgaJpZM4YZG63 . https://github.com/notifications/beacon/AAlkfsJTf44t3uLfaBQNchtr6IXvmv81ks5uuUdAgaJpZM4YZG63.gif

[senglory]

Hi, I am experiencing exactly the same issue. Here is my build log in VS2017:

1>Target CompileTypeScriptWithTSConfig:
1> Skipping target "CompileTypeScriptWithTSConfig" because it has no outputs.
1>Target GenerateTargetFrameworkMonikerAttribute:
1> Skipping target "GenerateTargetFrameworkMonikerAttribute" because all output files are up-to-date with respect to the input files.
1>Target CoreCompile:
1> Using shared compilation with compiler from directory: C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\Bin\Roslyn
1>Target GetTypeScriptCopyToOutputDirectoryItems:
1> Adding items with BuildAction=TypeScriptCompile to the same collections that will be populated (with items of other BuildActions) by the GetCopyToOutputDirectoryItems target
1>Target CopyFilesToOutputDirectory:
1> Copying file from "obj\Debug\netcoreapp2.2\weatherapp2.dll" to "bin\Debug\netcoreapp2.2\weatherapp2.dll".
1> weatherapp2 -> C:\prj\Demo\NetCoreVueTypeScript2\webapp\weatherapp2bin\Debug\netcoreapp2.2\weatherapp2.dll
1> Copying file from "obj\Debug\netcoreapp2.2\weatherapp2.pdb" to "bin\Debug\netcoreapp2.2\weatherapp2.pdb".
1>Target DebugRun:
1> v10.14.2
1> Performing first-run NPM RUN SERVE...
1>
1> > [email protected] serve C:\prj\Demo\NetCoreVueTypeScript2\webapp\weatherapp2
1> > vue-cli-service serve
1>
1> INFO Starting development server...
1> Starting type checking service...
1> Using 1 worker with 2048MB memory limit
1> ERROR Failed to compile with 1 errors3:39:09 PM
1>
1> This relative module was not found:
1>
1> * ./src/main.ts in multi (webpack)-dev-server/client?http://192.168.231.144:8086/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts
1> Type checking in progress...
1> No type errors found
1> Version: typescript 3.2.2
1> Time: 9598ms

What should I do to have it fixed?

[DrCord]

I am also having this issue. Any solutions?

[biapar]

Same issue!!!

[monkeymonk]

Same here...

[monkeymonk]

I just pass through this error by creating a folder named "src" and an empty file named "main.js".
If it helps someone... :-)

[liflovs]

The issue for me is more likely with Vui UI. For some reason when i run anything from it - i get these errors:

This relative module was not found:

* ./src/main.ts in multi ./src/main.ts

But when i run same commands manually - they work. Maybe its why this issue has so little attention, but its irritating a lot. Using Mac Os by the way

[ShawLyon]

The issue for me is more likely with Vui UI. For some reason when i run anything from it - i get these errors:

This relative module was not found:

* ./src/main.ts in multi ./src/main.ts

But when i run same commands manually - they work. Maybe its why this issue has so little attention, but its irritating a lot. Using Mac Os by the way

Me too, Can you solve it?

[MartinDM]

Having this same issue in an automated build pipeline, although works locally. MacOS.

Is this related to symlinks in MacOS?
@MonkeyMonk, can you describe your solution more fully please? Main.js is already needed as the main file for vue JS though, so how can it be empty?
@Liflovs, did you get to resolve this?

[themaxaboy]

The problem from vue ui
Use the project start with vue create and import into vue ui.

[jdchmiel]

I had this issue recently setting up a coworker on an existing project. It turned out her machine cared a file was case sensitive and mine does not. A notable difference is she has node 12 and I am still on 10.

[Alam1386]

I had the same issue (below is the error) and solved it. When importing the CSS file in main.js, add .css extension. It solved the error for me.

---

ERROR Failed to compile with 1 errors 1:26:47 PM

This relative module was not found:

• ./assets/Main in ./src/main.js

[yiptsangkin]

same problem，i create a empty main.ts at src directory，and it fix.

[kordwarshuis]

-Vue UI
-MacOS.

I used capitals (nameOfProject) and got the “The relative module was not found ” error.
Removed the project and started again, this time I used dashes (name-of-project).
This solved it for me.

[playoutprod]

-Vue UI
-MacOS.

I used capitals (nameOfProject) and got the “The relative module was not found ” error.
Removed the project and started again, this time I used dashes (name-of-project).
This solved it for me.

Same here, app was launching fine with command and not using vue UI.
Resolve it by checking in the output the name of the folder (start with a capital) and the folder on my drive (without capital).
I just renamed the folder to match the output and it worked.

So I tried this :
Create a new projet using Vue UI named TEST with only capitals : Project folder is written without capitals (test) so it doesn't work :

This relative module was not found:
 ./src/main.js in multi ../TEST/

Two solutions :

• Rename the folder to match (from 'test to 'TEST')

• Got to users/yourname/.vue-cli-ui/db.json
  Rename your project folder here

   {
      "id": "MBm-9_Yc-e",
      "path": "/Users/yourname/TEST",  => "path": "/Users/yourname/test"
      "favorite": 0,
      "type": "vue",
      "name": "test",
      "openDate": 1593447232041
    }

Relaunch the ui client.

[yiptsangkin]

-Vue UI
-MacOS.
I used capitals (nameOfProject) and got the “The relative module was not found ” error.
Removed the project and started again, this time I used dashes (name-of-project).
This solved it for me.

Same here, app was launching fine with command and not using vue UI.
Resolve it by checking in the output the name of the folder (start with a capital) and the folder on my drive (without capital).
I just renamed the folder to match the output and it worked.

So I tried this :
Create a new projet using Vue UI named TEST with only capitals : Project folder is written without capitals (test) so it doesn't work :

This relative module was not found:
 ./src/main.js in multi ../TEST/

Two solutions :

• Rename the folder to match (from 'test to 'TEST')
• Got to users/yourname/.vue-cli-ui/db.json
  Rename your project folder here

   {
      "id": "MBm-9_Yc-e",
      "path": "/Users/yourname/TEST",  => "path": "/Users/yourname/test"
      "favorite": 0,
      "type": "vue",
      "name": "test",
      "openDate": 1593447232041
    }

Relaunch the ui client.

aha, may be you can try my project near-admin-vue, i found that it's my mistake at webpack config finally.

[iwalz]

same problem，i create a empty main.ts at src directory，and it fix.

Same here. This seems to be always popping up once in a while looking at this thread. Is there like a clear root cause which could be fixed or is an empty file really considered as a good solution?

[integritek]

MacOS
No part of the directory can have a space. Fixed it for me.
Documents/Dev/Web Apps/project - failed
Documents/Dev/WebApps/project - compiled

[karatekaneen]

I ran into a similar issue where build succeeded locally but failed in node Docker image running in CI system remotely.
The problem for me was that I had renamed folders to lowercase locally, i.e. ./src/components/Auth/Login.vue was renamed to ./src/components/auth/Login.vue and the folder name did not update in the git repo. By changing the folder names to something different (auth -> authentication in this case) I forced the change of folder names and the build then started to work.

Hope this helps someone in a similar situation.

[sidkr]

I ran into a similar issue where build succeeded locally but failed in node Docker image running in CI system remotely.
The problem for me was that I had renamed folders to lowercase locally, i.e. ./src/components/Auth/Login.vue was renamed to ./src/components/auth/Login.vue and the folder name did not update in the git repo. By changing the folder names to something different (auth -> authentication in this case) I forced the change of folder names and the build then started to work.

Hope this helps someone in a similar situation.

Same issue with me. Resolved after renaming the dir casing.