Webpack/React/ Cannot read property 'id' of undefined when module.id - reactjs

I am getting a bizarre error and I can't find any resolution it.
Fresh react project with a local module linked via package.json link: protocol as followed.
"dependencies": {
"otrm": "link:../otrm",
Everything runs smooth - compilation of the source module works and module dependencies are all installed .
yarn start ends up in this:
Now the error is pretty straight forward:
module.id not defined in my external library. Looking at the debugger the id is really not there.
Now the question begs, how the heck can I add the ID or what did I do wrong? I looked across the forums and Gitlab docs and the most I can find are around Angular apps .. so Stackoverflow you are my last hope.

Related

Problem with snowpack using local library

There was a similar question (65989811) but more than a year and no satisty answer was given.I have a 'pixi-flex-layout' library locally and I use npm link to use in my projetct. When I start it never works. I put in snowpack config:
packageOptions: {
/* ... */
/*knownEntrypoints: ['pixi-flex-layout/lib/index.js'],
packageLookupFields: ['pixi-flex-layout'],
external: ['pixi-flex-layout']
*/
external: ['pixi-flex-layout'],
packageExportLookupFields:['pixi-flex-layout']
},
when i put that, they starts normaly without any erros(I believe only the 'external' was needed, but, when i go to the page it can't resolve the package:
Uncaught TypeError: Failed to resolve module specifier
"pixi-flex-layout". Relative references must start with
either "/", "./", or "../".
Someone knows how to deal with this? I start to think to change for another application like parcel(even very slow in comparition if it works with local libraries). I can't use from the github, because this library won't work, so I donwload and updtate to work with pixi.js 6.5.5 and rebuild locally.
I help will be appreciated.

How do I resolve Webpack/Angular moduleId error?

I built an app that borrows heavily from Dan Wahlin’s Angular-Jumpstart app, It works when I run it using his ‘npm start’, which looks like this:
"start": "tsc && concurrently \"tsc -w\" \"node server.js\"
I then used Visaul Studio 2017 to build the ‘ASP.NET Core + Angular 2 template for Visual Studio’ app referenced by Scott Sanderson in his blog post by the same name. This ASP.NET Core/Angular 2 sample app of his uses Webpack, Server-side rendering, and HMR. It too works fine.
However, I want to add some of the code I created for the Dan Wahlin app into the Scott Sanderson app, and I am running into a moduleId-related error. The following is an example of the error message I receive:
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: moduleId
should be a string in "FilterTextboxComponent". ...If you're using Webpack
you should inline the template and the styles...
To resolve this I have tried:
Removing the moduleId variable from the component(s) in question
Setting the moduleId varaible in this manner:
moduleId: module.id + ''
I have looked here and elsewhere and have not been able to determine what I need to do to resolve this. Is it a Webpack bug? Am I overlooking something I need to do?
I am happy to provide more information if you think that would help you help me!
I figured out what was happening...
I would edit the #Component metadata by removing the reference to moduleId in my .ts file and save it, but for some reason Webpack was not transpiling the .ts file into a new .js file. It was just bundling and serving the old .js file.
As to why? ...I think that Webpack uses the .js files when they are present, but will generate its own when they do not exist.

Angular 2, Webpack 2, async routes: Cannot find module

I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .

Ionic 2 angular-2-in-memory-web-api 404 error

I've been developing a simple app in Ionic 2 and I tried using mock service (in-memory web API) for fetching data as described in this Angular 2 tutorial. My console reported this error:
TypeScript error: app/app.ts(11,49): Error TS2307: Cannot find module
'angular2-in-memory-web-api'.
I tried this solution: angular2-in-memory-web-api 404 error. After running this: npm i angular2-in-memory-web-api --save, I was unable to find the files where I was supposed to use the code provided in the rest of the solution.
How can I fix this? Sorry if the question is not posed quite right, this is my first one. Please ask if any additional information is needed. The problem is pretty much the same as the one for which the solution was provided in the link above, except that using Ionic 2 makes the given solution inapplicable in my case. I'm don't think SystemJS is being used, please see my file structure image.
Image of my file structure.

AngularJS loaded twice with Rails asset pipeline

I have set up rails to use bower according to the following guide: http://joelencioni.com/blog/2014/01/03/integrating-bower-with-rails/
I have installed AngularJS and included it in my application.js file.
Now, when I run rake assets:precompile, I get the following error in the console:
WARNING: Tried to load angular more than once.
But my application continues to (seemingly) work fine. When I run rake assets:clobber, I no longer get the error.
I read through the many StackOverflow questions and answers relating to this error and still couldn't find a solution. ng-app is only declared once, there are no errors with my templates and how I include them, turbolinks is removed, etc.
What could cause this error when I compile my assets?
UPDATE: Some strange behaviour here... running the app in production with Passenger, the above error doesn't show up.

Resources