Uncaught Error: Cannot find module "."

[shafaqkazmi]

Do you want to request a feature or report a bug? bug

What is the current behavior?
Below exception:

polyfills.js:1 Error: Cannot find module "."
    at webpackMissingModule (eval at 148 (http://localhost:9000/assets/app.js:1:576363), <anonymous>:8:65) [angular]
    at eval (eval at 148 (http://localhost:9000/assets/app.js:1:576363), <anonymous>:8:144) [angular]
    at Object.onInvoke (eval at <anonymous> (http://localhost:9000/assets/vendor.js:1:92060), <anonymous>:4334:37) [angular]
    at eval (eval at 142 (http://localhost:9000/assets/polyfills.js:1:6901), <anonymous>:758:57) [angular]
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:9000/assets/vendor.js:1:92060), <anonymous>:4325:37) [angular]
    at drainMicroTaskQueue (eval at 142 (http://localhost:9000/assets/polyfills.js:1:6901), <anonymous>:591:35) [<root>]
    at <anonymous> [<root>]

If the current behavior is a bug, please provide the steps to reproduce.
Configuration files are uploaded on Github gist https://gist.github.com/shafaqkazmi/abbf5b07a70e6d23463d2de7d42f2a53

What is the expected behavior?
Application should load all desired modules

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

Version details:

@angular/cli: 1.0.3
node: 7.0.0
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

[sokra]

Check build for errors.

[nyrosmith]

Can you provide a minimal sample repo that shows that issue?

[danielzlotnik]

Happened to me as well, turns out it was because i was using require with an expression instead of a value:

var path = 'path/to/file.js' 
require(path) // Error: Cannot find module "."
require('path/to/file.js' ) // All good

Since module resolution is static - variables are not allowed, so you could just go with

require(`${path}`)

[FallingSnow]

@danielzlotnik Same thing here.

[emr]

@danielzlotnik +1
Is there a solution?

[devniel]

same problem here :(

[padurets]

it helped me:

require(`${path_to_file}`);

and if you need more variable in your dynamic path try split require:

function getIcon(name) {
  const [category, filename] = name.split(":");

  if (filename) {
    return require(`one_directory/icons/${category}/${filename}.svg`);
  } else {
    return require(`two_directory/icons/${name}.svg`);
  }
}

[rodrigobacelli]

I'm having this issue, but with import() :(

[rawbin-]

same issue

[rawbin-]

with webpack@2.6.1

const _import = (relativePath) => {
  var fullRelativePath = relativePath;
  if(relativePath.indexOf('@') === -1){
    fullRelativePath = '@/components/' + relativePath;
  }
  if (process.env.NODE_ENV === 'development') {
    return require('@/components/' + relativePath).default  // this work and followiing not
    //TODO not work Uncaught Error: Cannot find module '@/components/page/CloudConsole'
    // return require(`${fullRelativePath}`).default
    // TODO not work Uncaught Error: Cannot find module "."
    // return require(fullRelativePath).default
  } else {
    return import(fullRelativePath); // this work
    //work
    // return import(`${fullRelativePath}`)
  }
};

_import('page/CloudConsole')

[huchenme]

@rawbin- is @/components/${relativePath} inside your node_modules? I am trying to load a module from node_modules and it is not working

[rawbin-]

@huchenme mine is custom component as the '@' is alias of 'src' for vue project
I posted an issue again
#7003

[Kaidanov]

http://cabanalabs.com/2016/05/04/how-to-fix-webpack-when-it-cant-find-your-modules/

[jayzyaj]

I have the same issue using import in ionic. Any suggestions?

[killian2301]

I'm getting the same error with Ionic 3 also... @jayzyaj did you get to solve it?
Last time i had to start a new project again...

[Kaidanov]

In my case I've removed last pages I've generated and rolled back to previous version.. It worked. Something was messed up when generated the last page..

[killian2301]

@Kaidanov that worked for me too last time...only this time the problem didn't appear after generating a page, but renaming it...

[Kaidanov]

Rollback.. you at least have local git.. just set copy of what you have right now aside.. then rollback until it works.. Then compare folders and merge what is needed and run serve after each merge just to be sure it still works.

Maybe you forgot to update the app.module with the new name? Search in the whole project for the old name of the component..

[killian2301]

I think i found a solution, at least for Ionic. I have no idea what's causing this, but it appears that i get the error when some imports add "/umd" at the end.
For instance:
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular/umd';
i made a search in the whole project looking for "/umd" and deleted them:
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; , and it worked!

I had two projects with the same problem, and i fixed both by doing this...
Again, i don't know if it's VS Code Insiders that's automaticly adding this or a plugin i have installed or something...

Are you all using VS Code?

[stevepopovich]

This is exactly what happened to me, using VS Code +1 @killian2301

Not sure why this happening all of the sudden. Never had this issue until today.

[mlima96]

Thanks a lot @killian2301 ! I'm also using Ionic and got the same problem. Your tip helped me.

[toffebjorkskog]

Yep, Vs Code added /umd to import statement. It could be the auto import plugin. (I am using Vs Code and Ionic)

[archcorsair]

Ran into the same issue (not using Ionic), unable to use template literals within the require after upgrading to Babel 7. We are currently using webpack 2.x and will be upgrading to 4 soon - I believe this has to do with new babel + older webpack not being friendly in my scenario.

Not Working

config = require(`../inc/${process.env.targetNetwork}.config.json`);

Working

config = require('../inc/' + process.env.targetNetwork + '.config.json');

This is the temporary fix I've applied that works for me. Hope this helps someone in the future 👍

[crabbydavis]

@killian2301 You're the man!! Wish I would've found your answer hours ago!

[killian2301]

i'm glad to hear that! :)

[rihlsul]

Sounds like it's coming from this: microsoft/TypeScript#25204

However, when I did replace all on my project to remove all /umd instances, my UI is now borked. Completely unstyled. Will report back if I can figure out what the heck I did.

[domske]

@rihlsul Just recompile / restart the app and the styles comes back. I had the same problem. After removing all umd from imports, the html of my app (ionic) was naked. But a rebuild fixed this issue.

[rihlsul]

Confirmed that did resolve it. Bizarro. Thanks!

[SebastianJordan]

@killian2301 thanks I did what you wrote with vs and it worked.

[k1dbl4ck]

Happened to me. I copied a page for a slightly different use case and accidentally set VSCode to update dependencies. The shitshow that ensued was 149 changed files - a lot of which had /umd tacked on to some imports.

Checking my settings I noticed :

"typescript.updateImportsOnFileMove.enabled": "always"

And removed it. Problem solved.

[jorsaldo]

@killian2301 it works for me. After hours looking for the problem, I solved it remoming all "/umd" statements from all imports that was added when I created a new Page.

[gotters]

Have the same issue (ionic 3). Found all the /umd/s and removed them. Restarted with ionic serve, even tried an ionic build but am still getting the same issue.

Anyone help??

UPDATE: I went back into appmodule.ts after many rebuilds and reloads and i modified it again (ie removed a space) and then saved it and it worked. No idea why

[Kuldeep-Kumar-Sharma]

hey @killian2301 what is this /umd

[killian2301]

@kuldeep-kumar Sorry, i have no idea what it is. I just know it's vscode who is messing things up...

[Kuldeep-Kumar-Sharma]

Okay!Thanks👍
@killian2301 it solved my issue anyway 😅

[saryuvc]

Decreasing the version to ~2.6.2 fixed it.

[RafaelKr]

npm i -D typescript@2.8.3 fixed it for me.

[cpamp]

In addition to the /umd added to some imports, some @types/ were also removed from imports which caused the same error.

I think it was all due to renaming in VSCode, so try to avoid that if you can.

[poohia]

npm i -D typescript@2.8.3 fixed it for me.

Me to !! Thank's really 😂

[JuliaRakitina]

npm i -D typescript@2.8.3 fixed it for me.

+1 that worked for me

[mynameissujie]

don't use .
help it works、

[hugomejia]

This Solution by @padurets actually solved the issue for me (I'm working on a Vue-Cli 3 project), and I'm getting the path from the Store (Vuex) within a Computed function in my component.

require(`${path_to_file}`);

Thanks a lot @padurets !

[gangupraveen]

sometimes in the import ionic-angular is changed as 'ionic-angular/umd'. just remove /umd it should be ok

[Gautammer]

Thanks @pjc2007 you saved my day ...

[itlpps]

I can’t downgrade typescript;

Error: The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 2.8.3 was found instead.

And, I find "umd" in all solutions but no results.

Any solution?

[killian2301]

I can’t downgrade typescript;

Error: The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 2.8.3 was found instead.

And, I find "umd" in all solutions but no results.

Any solution?

Are you using Ionic 3? if so, you have to downgrade if you want to get rid of the error. Try to downgrade to 2.6.2 and change your package json to version 6 of rxjs.

In package.json:

This:
"rxjs": "6.0.0",
"rxjs-compat": "6.0.0"

Not this:
"rxjs": "^6.0.0",
"rxjs-compat": "^6.0.0",