Can not find module "."
bastienJS opened this issue · 25 comments
I am using the following libraries:
Angular 2.0.1
Angular-CLI 1.0.0-Beta.16 (using webpack)
linq-es2015 2.4.1
TypeScript 2.0.3
With npm I did:
npm install linq-es2015
npm install @types/linq-es2015
I want to import your linq library in MyComponent.ts:
import * as Enumerable from 'linq-es2015';
In the angularcli configuration file I modify the scripts array:
"scripts": ["../node_modules/linq-es2015/dist/linq.js"],
Then I run my application and in the browser console I get that error:
Can not find module "." in your linq.js. line 16
The first thing I realized is that in my project under node_modules/@types/ there exist no linq-es2015 folder at all.
But I do not think thats the problem why I get that error during runtime.
I have still added a screenshot from chrome browser:
Your description of the problem does not make any sense to me. What module, where failing, why webpack and how is it being used? Would you care to provide more context, perhaps even code sample...
I have cleaned up the chaotic question, hope its more clear now.
Have you looked at this example?
https://github.com/ENikS/LINQ/tree/examples/Angular
Can you create a repo and upload your project there so I can look at it?
Yes I had a quick look at that link but then I saw its for systemJS which I do not use. For sure I will create a repo on github where I put the minimum stuff to get you going :-)
https://github.com/bastienJS/linqmoduletest
Do
- 'npm install' to install locally all node modules.
- 'npm start' :-)
- See the error in the console output
Will have to do some research...
Hello Eugene, any news on that feature request? I have birthday on 20th october ;-)
It could be fixed by changing module in tsconfig.json from umd to commonjs.
My setting was on ES6 and I tried to commonjs: "module": "commonjs",
but I get the same error message! although the exception happens now in mainbundle.js file not linqjs file:
here:
'''
var v = factory(!(function webpackMissingModule() { var e = new Error("Cannot find module ".""); e.code = 'MODULE_NOT_FOUND'; throw e; }()), exports); if (v !== undefined) module.exports = v;
'''
Great linq might work but my application does not start anymore haha ;-)
"module": "commonjs" have to be set in source code of linq-es2015 before build.
If you want quick fix, you can change linq.js (and the same way other js files) in lib folder:
(function (factory) { if (typeof module === 'object' && typeof module.exports === 'object') { var v = factory(exports); if (v !== undefined) module.exports = v; } else if (typeof define === 'function' && define.amd) { define(["require", "exports", "./generators", "./utilities", "./iterators"], factory); } })(function (exports) { (remove require from function parameters)
I do not think manual change of compiled files constitutes a good solution. I am researching AMD loader as solution but unfortunately don't have enough time for it.
In Node it is configured as UMD (tsconfig.json) and compiled into lib dir. Browserified UMD module is compiled into ./dist directory to be used in UI. I am still trying to understand why webpack is not picking up at least one of these.
UMD should be digestible by both Node and Browser. I have feeling it is simply not finding it.
@bastienJS Could you try to remove this line from angular-cli.json:
"scripts": ["../node_modules/linq-es2015/dist/linq.js"],
and try to run it again?
Or perhaps change it into:
"scripts": ["../node_modules/linq-es2015/lib/linq.js"],
If you compile lib as commonjs, you don't need to add to angular-cli.json and it is working in angular cli.
I just have some problem with uglify, when build as production.
With "scripts": [], I can see linq-2015 is imported alone with angular-core in main.bandle.js:
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_linq_es2015__ = __webpack_require__(587);
...I am unable to verify it on the browser at the moment but as far as processing by Webpack I see no issues.
You tried it with angular cli?
I've pushed latest to the repo. You should be able to check out and test.
@ENikS To the https://github.com/ENikS/linqmoduletest Repo ? If yes all I see there is that you removed the scripts Array content. I did that long before on my local app but I get the same exception during runtime: can not find module . in lin.js Or do I miss something?
It seems that Webpack only understands commonjs modules. Perhaps there are ways to load UMD modules as well but I did not find it. So I changed module type to commonjs and it fixed the problem.
When I change the tsconfig.ts => module: 'commonjs' then it works only with your linq-es2015 version 2.4.12 but not with 2.4.10 ??? I thought you have not changed anything concerning this feature? As I miss a changelog with versions I can not easily check what has changed, but maybe you know... thanks for investigating.
Yes, I fixed it in 2.4.12 so the lest should work with the Webpack