Ionic-app-scripts: Module build failed: Error: ENOENT main.js

[jthoms1]

_From @jgw96 on March 7, 2017 17:11_

_From @Lexanius on March 6, 2017 17:6_

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[x] support request

Current behavior:
Main.js not include the compiled Sourcecode and keep somekind empty (there is a template). And if i start the app i get:

Runtime Error
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\...\src\app\main.js' at Error (native)

The buildprocess does not create an error. Its seem all fine. I can compile the project in https://hub.docker.com/r/beevelop/ionic/ and all is fine. So there must be some dependency from ionic i crash, how can i get information about this? Is there a good verbose mode to see there Outputs.
I tried to find the error so my experience:

• I get the same error with a new tutorial project.
• When run tsc in the ionic folder the tutorial project build (maybe corret), but not my main project
• ionic-app-scripts transpile not create errors and i dont see any createt files (where are they?)
• main.js.map files is created
• reinstalling (node, ionic) does not help
• ionic-app-scripts webpack creates this:

[17:57:47]  ionic-app-scripts 1.1.4
[17:57:47]  webpack started ...
[17:57:47]  ionic-app-script task: "webpack"
[17:57:47]  TypeError: Cannot read property 'fileCache' of undefined
TypeError: Cannot read property 'fileCache' of undefined

I am not common with node, ts or ionic, so i must ask. I searching for verbose output, folder where transpile create the js files and other usabel informations to fix the problem.

Thanks for the help.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed

ionic serve:
```[16:27:09] ionic-app-scripts 1.1.4
[16:27:10] watch started ...
[16:27:10] build dev started ...
[16:27:10] Proxy added:/api => http://192.168.173.1:8000/api/
[16:27:10] clean started ...
[16:27:10] clean finished in 28 ms
[16:27:10] copy started ...
[16:27:10] transpile started ...
[16:27:12] transpile finished in 2.50 s
[16:27:12] preprocess started ...
[16:27:12] preprocess finished in less than 1 ms
[16:27:12] webpack started ...
[16:27:12] copy finished in 2.86 s
[16:27:18] webpack finished in 5.79 s
[16:27:18] sass started ...
[16:27:19] sass finished in 1.28 s
[16:27:19] postprocess started ...
[16:27:19] postprocess finished in 1 ms
[16:27:19] lint started ...
[16:27:19] build dev finished in 9.64 s
[16:27:19] watch ready in 9.69 s
[16:27:19] dev server running: http://localhost:8100/

**My main.js**

/*/ (function(modules) { // webpackBootstrap
// // The module cache
// var installedModules = {};
//
// // The require function
// function __webpack_require__(moduleId) {
//
// // Check if module is in cache
// if(installedModules[moduleId])
// return installedModules[moduleId].exports;
//
// // Create a new module (and put it into the cache)
// var module = installedModules[moduleId] = {
// i: moduleId,
// l: false,
// exports: {}
// };
//
// // Execute the module function
// modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
//
// // Flag the module as loaded
// module.l = true;
//
// // Return the exports of the module
// return module.exports;
// }
//
//
// // expose the modules object (__webpack_modules__)
// __webpack_require__.m = modules;
//
// // expose the module cache
// __webpack_require__.c = installedModules;
//
// // identity function for calling harmony imports with the correct context
// __webpack_require__.i = function(value) { return value; };
//
// // define getter function for harmony exports
// __webpack_require__.d = function(exports, name, getter) {
// if(!__webpack_require__.o(exports, name)) {
// Object.defineProperty(exports, name, {
// configurable: false,
// enumerable: true,
// get: getter
// });
// }
// };
//
// // getDefaultExport function for compatibility with non-harmony modules
// __webpack_require__.n = function(module) {
// var getter = module && module.__esModule ?
// function getDefault() { return module['default']; } :
// function getModuleExports() { return module; };
// __webpack_require__.d(getter, 'a', getter);
// return getter;
// };
//
// // Object.prototype.hasOwnProperty.call
// __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
//
// // __webpack_public_path__
// __webpack_require__.p = "build/";
//
// // Load entry module and return exports
// return __webpack_require__(__webpack_require__.s = 0);
// })
/**********************/
// ([
/ 0 /
/**/ (function(module, exports) {

throw new Error("Module build failed: Error: ENOENT: no such file or directory, open C:\Users\...\src\app\main.js'\n at Error (native)");

// })
/*/ ]);
//# sourceMappingURL=main.js.map
```

_Copied from original issue: driftyco/ionic#10667_

_Copied from original issue: driftyco/ionic-cli#1956_

[tohagan]

+1: Same issue on new tabs seed app.

$ ionic info

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.5
Xcode version: Not installed

• Reproduced same issue on Node 6.9.1 and 6.9.5

$ nvm use 6.9.5 32
$ npm install -g cordova
$ npm install -g ionic
$ ionic start myapp --v2 tabs
$ cd myapp
$ npm install   # Ensures devDependencies are installed
$ npm run ionic:build  # Ensure the build is run
$ ionic serve    

Outputs ....

$ ionic serve

> ionic-hello-world@ ionic:serve C:\Users\tohagan\Projects\P2C-AU\WBM-2017\wbm
> ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

[14:17:29]  ionic-app-scripts 1.1.4
[14:17:29]  watch started ...
[14:17:29]  build dev started ...
[14:17:29]  clean started ...
[14:17:29]  clean finished in less than 1 ms
[14:17:29]  copy started ...
[14:17:29]  transpile started ...
[14:17:39]  transpile finished in 9.08 s
[14:17:39]  preprocess started ...
[14:17:39]  preprocess finished in less than 1 ms
[14:17:39]  webpack started ...
[14:17:39]  copy finished in 9.50 s
[14:17:39]  webpack finished in 597 ms
[14:17:39]  sass started ...
[14:17:40]  sass finished in 499 ms
[14:17:40]  postprocess started ...
[14:17:40]  postprocess finished in less than 1 ms
[14:17:40]  lint started ...
[14:17:40]  build dev finished in 10.44 s
[14:17:40]  watch ready in 10.63 s
[14:17:40]  dev server running: http://localhost:8100/
[14:17:48]  lint finished in 7.92 s

www/build/main.js has the following after all the WebPack commented code.

throw new Error("Module build failed: Error: ENOENT: no such file or directory, open 'D:\\Projects\\P2C-AU\\WBM-2017\\wbm\\src\\app\\main.js'\n    at Error (native)");

So it looks to me like it either should be looking for main.ts instead of main.js under src/ or typescript is not running since this referes to src/app/main.js which does not exist. I'm new to Ionic v2 (used v1).

[tohagan]

I got this working by avoiding bash as my shell script. I think node was getting confused about the current directory.

[Lexanius]

Which shell script do you mean?

[Lexanius]

I found my Problem. I have create a Symlink in windows as a path shorter (form ~\Documents\workspace\ to ~\workspace...). So it don't found the files. If i use the full path it works perfectly.

All in all it is now a Bug.

[AlQuraian]

@Lexanius can you explain what you mean? I'm having the same issue with symlinks

[Lexanius]

I created a link in Win10 via mklink /D workspace Documents\workspace (cmd.exe) and than i try to build ionic via "ionic serve" in the path of ...\workspace\ionicProject instead of the path ...\Documents\workspace\ionicProject. After using the full path, it works again. General i use Linux and there are softlinks/symlinks realy normal. In Windows it don't seem so.

[danbucholtz]

Due to inactivity, I'm going to close this. Is this still an issue?

Thanks,
Dan

[Lexanius]

I don't use symlinks for ionic anymore. I think it is a bug, but i can live with absolute paths. It is only good to know.^^

[AlQuraian]

I still face this issue. I had to remove the symlinks and copy/paste shared code to avoid this bug.

[richardmarais]

Hi All,

I am using Ionic, and get the following error:

Runtime Error Uncaught (in promise): Error: Module build failed:
Error: ENOENT: no such file or directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'

The error is a result of this line of code:

this.ratingModel = new RatingModel();

When I remove this line, I don't get the error.

ratingModel.ts

import { Injectable } from "@angular/core";
import { PersonModel } from './personModel';
import { JobModel } from './jobModel';

@Injectable()
export class RatingModel {
        public id: number = null;
        public job: JobModel = null;
        public review: string = null;
        public rating: number = null;
        public reviewDate: number = null;
        public time: string = null;
        public person: PersonModel = null;
        public anonymous: number = null;

        constructor() {

        }
}

Reading other forums, people are getting this error due to the case not matching in their imports, but I have checked mine, and they do match.

import { RatingModel } from '../model/ratingModel';

However, I have noticed something strange in my IDE (Visual Studio Code):

As you can see, in the search results, there are two files for the object, ratingModel.ts and RatingModel.ts. But when I check the actual files system, there is only on file, ratingModel.ts:

Question

Does anyone know what and how to resolve what looks like possibly a bug or fault here?

Thanks

More info:

global packages:

    @ionic/cli-utils : 1.0.0
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.0.0

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.0.0
    @ionic/cli-plugin-ionic-angular : 1.0.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed

[richardmarais]

Apologies, my bad. I just found another file that was importing the object with the incorrect case. It does appear as if there is no issue, and I had a bug in my code.

import { RatingModel } from '../model/RatingModel';

[kaychoro]

I ran into this same error using git-bash on windows 10. I was using a symbolic link to provide the path ~/workspaces/tut/ which pointed to c:\workspaces\tut\ (in git-bash it was treated as /c/workspaces/tut/) however, when running ionic serve I would get the error
Error: Module build failed: Error: ENOENT: no such file or directory, open 'c:\workspaces\tut\src\app\main.js
Based on one of the comments, I navigated to /c/workspaces/tut and then ran ionic serve, and I got the app back. I recently updated my npm packages, but no other code changes had occurred since before it was working fine.

[Avenyet]

I can confirm runing ionic serve while working over a symbolic link causes the serve to fail (the actual build does not complain). This was using windows 7 64 bit and Node 6.11.0 LTS and ionic CLI 3.4.0

[Jbz797]

I confim this issue using MacOs 10.12.5 / Node v8.1.3 / Ionic 2.2.3

Symbolic link cause this error :

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/***/***/***/api-service.provider.js'

[Murilo-Perrone]

For me, the ENOENT error message was hiding a more significant one. However starting "ionic serve -cs" and watching logs allowed me to see this:

transpile started ...
template error, "C:...\dist\pages\home\home.html": Error: ENOENT: no such file ...

Notice it is searching for html file in the dist folder, were it shouldn't. So I temporarily removed what I had added in tsconfig.json a few days before: "compilerOptions": { "outDir": "dist" }

[saip92]

I am facing the same issue and though just copying the files would fix it, shouldn't this issue be open?

[yeweinan]

Same issue here. I'm trying to share codes between 2 project with the symbolic link.

The Angular 4 project works fine (npm start), but the Ionic one doesn't (ionic serve)

[saip92]

I think the recommended approach is linking submodules instead of symlinks as shown using either npm or tsconfig.

Hence the closed issue maybe?

[kirillgroshkov]

Having same issue, when using symlinks it doesn't find my *.ts file and error prints that *.js file is missing.

Any workarounds?

[sokal32]

Having same issue as @kirillgroshkov

[AlGantori]

I was wanting to make a variation on my project and wanted to code share a bunch of folders with fairly self-contained modules/components.

But guess what dumb tools have to act up.. Facing this stupid limitation of ionic serve / npm with symbolic links

Error: Module build failed: Error: ENOENT: no such file or directory, open 'S:_W\ARP\UPS.ion\SRC\UPS.ion.2.0\src\components\UOS\UserOptionsService.js'

However, the moment I use an actual copy of the module folder/files the problem goes way
In the following snapshot I made an actual copy of folder UOS instead of a NTFS junction or Symbolic Link via XYPlorer...

Why simple things like symbolic links don't work? and it's always 1 step forward 1 step backwards .
Why should "ionic serve" care about symbolic links?

Oh in case you hit some non-sense complaint about main.css, it's totally bogus. Simply re-save index.html

https://forum.ionicframework.com/t/refused-to-apply-style-from-http-localhost-8100-build-main-css-because-its-mime-type-text-html-is-not-a-supported-stylesheet-mime-type-and-strict-mime-checking-is-enabled/121331

BTW, I have peeked at both the npm link and tsconfig approach to code sharing and they both look soooo ugly !!!

[kiransiluveru]

Start again with npm start command.
It worked for me.

[axelcostaspena]

@danbucholtz users are giving feedback about it's still an issue, please reopen

[kirillgroshkov]

For the record, I have solved it (in an ugly way) in our project by creating a script that can switch the project between 2 modes: linked and unlinked. In linked mode it creates a symlink from node_modules/repo to src/@linked/repo and then we import from there (and it works only because the import path doesn't touch node_modules). In unlinked mode we also import from src/@linked/repo, but it's a copy of all files, copy is done in a package.json postinstall hook.

Ugly to remember and understand these 2 modes, but it kinda works for us for 4 repos and 2 shared repos for 6 months... Was thinking to opensource it, but better if the tools (like ionic-app-scripts or maybe typescript 3 with project references) can fix it in more generic and less hacky way.

To get there we tried many things before: git subtrees, git submodules and then a monorepo. And then landed on "@linked" solution. So much time wasted. :-/