Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module build failed: TypeError: Cannot read property 'newLine' of undefined #3781

Closed
hozefam opened this issue Dec 29, 2016 · 77 comments
Closed

Comments

@hozefam
Copy link

hozefam commented Dec 29, 2016

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200/' in 'D:\Hozefa\Ang\FirstApp\TestApp'
@ multi main

Anyone?

OS?

Windows 7

Versions.

angular-cli: 1.0.0-beta.24
node: 4.4.6
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

The log given by the failure.

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200/' in 'D:\Hozefa\Ang\FirstApp\TestApp'
@ multi main

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (D:\Hozefa\Ang\FirstApp\TestApp\node_modules\t
ypescript\lib\typescript.js:8062:20)
at Object.createCompilerHost (D:\Hozefa\Ang\FirstApp\TestApp\node_modules\ty
pescript\lib\typescript.js:44978:26)
at Object.ngcLoader (D:\Hozefa\Ang\FirstApp\TestApp\node_modules@ngtools\we
bpack\src\loader.js:171:31)
@ multi main

@filipesilva
Copy link
Contributor

Can you provide repro steps please?

@filipesilva filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Dec 30, 2016
@bstaley
Copy link

bstaley commented Jan 2, 2017

I've solved it on my side by adding the required AotPlugin item to my plugins

import {AotPlugin} from '@ngtools/webpack'

exports = { /* ... */
  plugins: [
    new AotPlugin({
      tsConfigPath: 'path/to/tsconfig.json',
      entryModule: 'path/to/app.module#AppModule'
    })
  ]
}

check out the usage for more information on the options
https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack

@donvadicastro
Copy link

Where webpack configuration is placed inside bootstrapped project?

@toverux
Copy link

toverux commented Jan 12, 2017

I've located the root source of that error at https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/loader.ts#L186

The instanceof check fails. Therefore, the else is executed, and because the loader has no options (it should not enter the else because we have the plugin), and the undefined loader options propagates to TypeScript, and boom, but that's not the important part.

The instanceof fails because the export of plugin.ts is executed two times in the compiled JavaScript vendor source, leading to similar AotPlugin ctors, but not strictly equal.

If I remove the instanceof check, everything works as expected.

It may happen in some specific setups. In my case, build logic and the application aren't in the same npm modules.
In my build module, I use:

{
    test: /\.ts$/,
    loader: require.resolve('@ngtools/webpack')
}

In the application module, Webpack does a require() of the path given by require.resolve(). Since it's not the same module, node executes the export again, giving a new, non equal, AotPlugin ctor.

There are some ways to fix the issue on my side, like deporting @ngtools/webpack in the application module. On the library side, removing the instanceof check in favor of a more duck-typed approach is also a possibility.

@phamlehoaian
Copy link

Hello!
I faced same error! So anyone can guide me how to fix it? I have read above comments but I don't know how and where to change. Thank you!

@toverux
Copy link

toverux commented Jan 13, 2017

@phamlehoaian In most cases, this is simply because you forgot to add the AotPlugin.

@phamlehoaian
Copy link

@toverux Can you please tell me how to add AotPlugin? I did not forget! I have no experience about this! Please help me! Thank you.

@filipesilva
Copy link
Contributor

filipesilva commented Jan 13, 2017

This doesn't seem to be a problem with the AoTPlugin because that would mean you're trying to use it separately.

As far as I can tell, @hozefam and @phamlehoaian were having problems with angular-cli usage itself.

My bet is that this is dependency problem. Are you absolutely sure you followed https://github.com/angular/angular-cli#updating-angular-cli when upgrading?

I'm testing a new project right now and don't get this. But I know this can happen with outdated dependencies, and that happens if you don't follow the upgrade guide.

@phamlehoaian
Copy link

@filipesilva I faced this problem in fresh new installed nodejs and angular-cli. So I think that it is not related with upgrading. BTW, in project folder, I noticed that the file webpack.config.js is not existed. Is it right?

@filipesilva
Copy link
Contributor

@phamlehoaian yes that is right, you shouldn't have webpack.config.js in your project.

Can you tell me exactly what you did so I can reproduce the error? The exact commands please, and if you changed any files in the project.

@phamlehoaian
Copy link

@filipesilva Okay, I will remove all nodejs as this guide http://stackoverflow.com/questions/38602808/uninstall-node-js-windows-10, then I will install new, keep all commands and send to you. Please wait.

@filipesilva
Copy link
Contributor

@phamlehoaian no need to do all that, these steps are enough: https://github.com/angular/angular-cli#updating-angular-cli

@phamlehoaian
Copy link

@filipesilva It's so strange! After I uninstall all things and start new install to this command npm install -g angular-cli, then the new created project is working perfect!

@filipesilva
Copy link
Contributor

@phamlehoaian sometimes these things happen and there are dependency problems. I'm glad it's working correctly for you now :D

@deepakkadarivel
Copy link

Had to update my npm and angular cli. After that is done. Delete your project folder, clone it back again. Run npm install. And things should work.

@bkottapally
Copy link

@deepakkadarivel new clone idea worked for now

@hnrchrdl
Copy link

rm -rf node_modules/ in your project to get rid of all npm stuff and then npm cache clean followed by npm install should also resolve this issue. Also, make sure the versions of the cli locally and globally match. In my case this issue appeared as of an old version of angular-cli which still got installed extraneous through my shrinkwrap while I was using the new @angular/cli packages.

@elfleat
Copy link

elfleat commented Feb 11, 2017

Thanks @hnrchrdl, that worked for me.

@mmathys
Copy link

mmathys commented Feb 13, 2017

thanks @hnrchrdl

@ndkcha
Copy link

ndkcha commented Feb 14, 2017

go through this, this might help.

https://github.com/angular/angular-cli#updating-angular-cli

@mmathys
Copy link

mmathys commented Feb 15, 2017

shorthand of @hnrchrdl's solution, all in one:

rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli; npm uninstall -g angular-cli; npm i --save @angular/cli && npm i -g @angular/cli && npm i

@hnrchrdl
Copy link

hnrchrdl commented Feb 15, 2017

@mmathys your command got truncated in github. This is what I received in email notification:

rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli && npm uninstall -g angular-cli && npm i --save @angular/cli && npm i -g @angular/cli && npm i && npm start

@tomjon
Copy link

tomjon commented Feb 16, 2017

@mmathys I needed 'sudo' for the -g installs/uninstallls, otherwise, just what I needed :)

@manuelreina
Copy link

In my case, this error was because I updated to beta.32 and I didn't noticed that the node_modules folder was not completely removed.
After removing the folder manually, I got it working.

@yuerdev
Copy link

yuerdev commented Feb 24, 2017

it need delete node_module
,uninstall -g angular-cli and and angular/cli
and install @angular/cli

@mejmo
Copy link

mejmo commented Jun 13, 2017 via email

@jongunter
Copy link

Thanks for your responses. I tried the following on my Mac and PC with no solution:

  • Uninstalling node/npm and reinstalling
  • Removing all my global packages and reinstalling them
  • Removing all my local npm packages and reinstalling
  • Updating the CLI to v1.1.1
  • Followed the entire CLI migration guide
  • Deleted and re-cloned the project from source control
  • Updated node to the latest version (8.1.0)

Furthermore, this project in question seems to be working on one of my colleague's Macs, which is strange because it doesn't work on my Mac, which is the exact same model with the exact same MacOS version. I npm shrinkwraped the dependencies there and tried to remove all local/global node modules and reinstall on other machines. Still doesn't work.

We spent months putting this project together for a demo. I think I might be at my wits end with Angular right now. The fact that there's no useful error message or stack trace here is particularly infuriating for me.

@jongunter
Copy link

I've just discovered that if I check in node_modules from the "happy" computer, it works on both my other machines. Unfortunately, if I re-run npm install on those secondary machines, everything breaks again, meaning packages can only be installed/updated on one single dev's machine. Also, this is not a long-term solution, because checking in node_modules is a pretty bad practice, especially moving between MacOS and Windows.

Maybe @filipesilva has an idea?

@jongunter
Copy link

This seems to be a dependency issue, as copying the same package.json file into one of my blank "sandbox" cli projects yields the same error.

Check out my repro...this is broken on my machine, and I hope other people can reproduce this:
https://github.com/jongunter/broken-ng-cli

@andreaslancom
Copy link

andreaslancom commented Jun 20, 2017

I have the same issue:

ng -v

@angular/cli: 1.0.3
node: 8.0.0
os: linux x64
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.0.3
@angular/compiler-cli: 4.2.3
@ngtools/webpack: 1.4.1

tsc -v

Version 2.3.4

Errors: ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:9514:20)
at Object.createCompilerHost (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:63770:26)
at Object.ngcLoader (/var/www/education/client-apps/node_modules/@ngtools/webpack/src/loader.js:397:33)
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:9514:20)
at Object.createCompilerHost (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:63770:26)
at Object.ngcLoader (/var/www/education/client-apps/node_modules/@ngtools/webpack/src/loader.js:397:33)
@ multi ./src/polyfills.ts

I try each manual of packages reinstalling/upgrading but nothing can helps me.
Are there any solutions?

@jongunter
Copy link

@filipesilva , this issue should be reopened. I have a reproducible test case posted above (if it's not reproducing the error for you, please let me know). Even if this is deemed as case of "operator error", there should be a more helpful error message to let the user know what's going on.

@shahmhussain
Copy link

I had this bug today because i was i had angular/cli version 1.1.2 installed, i resolved it by installing @angular/cli@1.1.0

Steps include:
npm uninstall @angular/cli
npm install @angular/cli@1.1.0

Hope that helps.

@jongunter
Copy link

jongunter commented Jun 21, 2017

If anyone was wondering, I have resolved this issue by ng newing a new project, and merging the package.json with my old non-working project (and trying to keep the dependencies from the new project). Luckily, everything worked, even though it meant a forced upgrade to Angular 4.

Still, I think this shouldn't be necessary...the error should tell me roughly what I need to fix.

@andreaslancom
Copy link

Thanks a lot. As @jongunter said I create new app and merge package.js and it's working now.

@ghost
Copy link

ghost commented Jun 22, 2017

I had the same error. I had to go through @MartinFreire 's steps and (don't ask me why) delete package.-ock.json .

@filipesilva filipesilva added type: faq and removed needs: repro steps We cannot reproduce the issue with the information given labels Jun 27, 2017
@filipesilva
Copy link
Contributor

I looked into this during the weekend and have to say that @toverux explanation in #3781 (comment) is spot on.

For projects using @angular/cli (and not @ngtools/webpack directly), this error happens if you have multiple versions of @ngtools/webpack in your dependencies. You can check if you do by running npm ls @ngtools/webpack (or yarn list @ngtools/webpack). You should remove any extra copies from your dependencies and make sure that your lock files are updated accordingly.

@uberroot4
Copy link

@filipesilva Thank you. npm prune saved this for me.

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jul 3, 2017
Currently, having multiple @ngtools/webpack installed yields a cryptic error in typescript:

```
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
```

This happens because a plugin is found, but it isn't an instance of the right class. This makes the loader assume it's being ran without a plugin (just transpiling TS). Then it tries to load a missing tsconfig and the error above is shown.

This PR introduced better errors for both the wrong plugin instance and missing tsconfig.

```
ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed.You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:371:19)
 @ multi ./src/main.ts
```

```
ERROR in ./src/main.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option norAotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:442:19)
 @ multi ./src/main.ts
```

See angular#3781 (comment) and angular#3781 (comment) for context.
filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jul 5, 2017
Currently, having multiple @ngtools/webpack installed yields a cryptic error in typescript:

```
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
```

This happens because a plugin is found, but it isn't an instance of the right class. This makes the loader assume it's being ran without a plugin (just transpiling TS). Then it tries to load a missing tsconfig and the error above is shown.

This PR introduced better errors for both the wrong plugin instance and missing tsconfig.

```
ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed.You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:371:19)
 @ multi ./src/main.ts
```

```
ERROR in ./src/main.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option norAotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:442:19)
 @ multi ./src/main.ts
```

See angular#3781 (comment) and angular#3781 (comment) for context.
hansl pushed a commit that referenced this issue Jul 5, 2017
Currently, having multiple @ngtools/webpack installed yields a cryptic error in typescript:

```
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
```

This happens because a plugin is found, but it isn't an instance of the right class. This makes the loader assume it's being ran without a plugin (just transpiling TS). Then it tries to load a missing tsconfig and the error above is shown.

This PR introduced better errors for both the wrong plugin instance and missing tsconfig.

```
ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed.You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:371:19)
 @ multi ./src/main.ts
```

```
ERROR in ./src/main.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option norAotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:442:19)
 @ multi ./src/main.ts
```

See #3781 (comment) and #3781 (comment) for context.
hansl pushed a commit that referenced this issue Jul 11, 2017
Currently, having multiple @ngtools/webpack installed yields a cryptic error in typescript:

```
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
```

This happens because a plugin is found, but it isn't an instance of the right class. This makes the loader assume it's being ran without a plugin (just transpiling TS). Then it tries to load a missing tsconfig and the error above is shown.

This PR introduced better errors for both the wrong plugin instance and missing tsconfig.

```
ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed.You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:371:19)
 @ multi ./src/main.ts
```

```
ERROR in ./src/main.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option norAotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:442:19)
 @ multi ./src/main.ts
```

See #3781 (comment) and #3781 (comment) for context.
hansl pushed a commit that referenced this issue Jul 12, 2017
Currently, having multiple @ngtools/webpack installed yields a cryptic error in typescript:

```
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
```

This happens because a plugin is found, but it isn't an instance of the right class. This makes the loader assume it's being ran without a plugin (just transpiling TS). Then it tries to load a missing tsconfig and the error above is shown.

This PR introduced better errors for both the wrong plugin instance and missing tsconfig.

```
ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed.You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:371:19)
 @ multi ./src/main.ts
```

```
ERROR in ./src/main.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option norAotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:442:19)
 @ multi ./src/main.ts
```

See #3781 (comment) and #3781 (comment) for context.
@jdrake3
Copy link

jdrake3 commented Jul 19, 2017

Still receiving this error, despite having only one version of @ngtools/webpack installed.

npm ls @ngtools/webpack
+-- @angular/cli@1.0.0
|-- @ngtools/webpack@1.3.0
-- @ngtools/webpack@1.3.0

@prabhatojha
Copy link

OS : Windows with Angular 4

"@angular/cli": "1.2.1",
"@angular/material": "2.0.0-beta.6",

I just removed the caret from above two dependencies and performed following steps, everything started working perfectly.

  1. Remove node_module
  2. Uninstall angular cli from local and global
  3. Install the same version of angular cli in both
  4. Do "npm install"
  5. "ng serve"

@chikehenderson
Copy link

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:9618:20)
at Object.createCompilerHost (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:66867:26)
at Object.ngcLoader (/home/user/Documents/projects/ayo6/node_modules/@ngtools/webpack/src/loader.js:202:31)
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:9618:20)
at Object.createCompilerHost (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:66867:26)
at Object.ngcLoader (/home/user/Documents/projects/ayo6/node_modules/@ngtools/webpack/src/loader.js:202:31)
@ multi ./src/polyfills.ts
webpack: Failed to compile.

I'm getting this when I run "ng serve".. Is this just a typescript error or more?

@macandcheese
Copy link

macandcheese commented Jul 26, 2017

OK, as many others have mentioned this is due to version mismatches with webpack or angular-cli, but never seems to be fixed by deleting the node_modules folder or re-installing / uninstalling packages manually.

I FINALLY managed to get this working by deleting node_modules folder AND the package-lock.json file... Then running npm install seemed to fix this for me.

@chikehenderson
Copy link

chikehenderson commented Jul 26, 2017 via email

dond2clouds pushed a commit to d2clouds/speedray-cli that referenced this issue Apr 23, 2018
Currently, having multiple @ngtools/webpack installed yields a cryptic error in typescript:

```
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
```

This happens because a plugin is found, but it isn't an instance of the right class. This makes the loader assume it's being ran without a plugin (just transpiling TS). Then it tries to load a missing tsconfig and the error above is shown.

This PR introduced better errors for both the wrong plugin instance and missing tsconfig.

```
ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed.You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:371:19)
 @ multi ./src/main.ts
```

```
ERROR in ./src/main.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option norAotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (D:\work\cli\packages\@ngtools\webpack\src\loader.ts:442:19)
 @ multi ./src/main.ts
```

See angular#3781 (comment) and angular#3781 (comment) for context.
@skiminock
Copy link

skiminock commented Apr 30, 2018

Hey, guys, my problem was solved due @macandcheese comment -

I FINALLY managed to get this working by deleting node_modules folder AND the package-lock.json file... Then running npm install seemed to fix this for me.

the @filipesilva rightly explained the reason of issue -

For projects using @angular/cli (and not @ngtools/webpack directly), this error happens if you have multiple versions of @ngtools/webpack in your dependencies. You can check if you do by running npm ls @ngtools/webpack (or yarn list @ngtools/webpack). You should remove any extra copies from your dependencies and make sure that your lock files are updated accordingly.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests