Skip to content

Trying to add typescript with webpack - 01 attempt#167

Closed
kalwalt wants to merge 19 commits intodevfrom
feature-typescript-webpack-01
Closed

Trying to add typescript with webpack - 01 attempt#167
kalwalt wants to merge 19 commits intodevfrom
feature-typescript-webpack-01

Conversation

@kalwalt
Copy link
Copy Markdown
Member

@kalwalt kalwalt commented Apr 15, 2021

This is an alternative approach to #158 solve part of the issues but other arise, in specific, it's easier to setup the worker-loader but i had to modify the code, i had to add the index.ts entry as a default export and ARnft is exported also as a default class.
Maybe because the project is compiled as UMD? Anyway in the ARnft_threejs_example.html i get:

universalModuleDefinition:9 Uncaught TypeError: Cannot set property 'ARnft' of undefined
    at webpackUniversalModuleDefinition (universalModuleDefinition:9)
    at universalModuleDefinition:10

this only happens if you try to run the code in a module environment. I hope to fix this.

@kalwalt kalwalt added 🚀 enhancement New feature or request webpack about issue on webpack Typescript labels Apr 15, 2021
@kalwalt kalwalt self-assigned this Apr 15, 2021
@kalwalt kalwalt changed the base branch from master to dev April 15, 2021 21:20
@kalwalt kalwalt changed the title Tryin to add typescript with webpack - 01 attempt Trying to add typescript with webpack - 01 attempt Apr 15, 2021
Comment thread tsconfig.json
"*": [
"../node_modules/*"
"../node_modules/*",
],
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be the right mode to resolving alias with typescript and webpack, following this article https://stackoverflow.com/questions/40443806/webpack-resolve-alias-does-not-work-with-typescript but according to one of the answers is possible to use @babel/preset-typescript without ts-loader

Comment thread examples/arNFT_new_example.html Outdated
@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Apr 15, 2021

With 0b7175c the camera is loaded and the video si displayed.

@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Apr 15, 2021

now it start to load the worker but fails to find it: GET http://127.0.0.1:3000/ARnft.worker.js 404 (Not Found), It should be inlined but maybe my setup is wrong

@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Apr 15, 2021

❗ With the latest 6252e00 worker is loaded, camera is loaded and NFT marker is loaded! 👍 🥳 🙌
In order to run i add to put in the root folder the generated ARnft.worker.js file, that is odd because the worker should be inlined. For sure it is caused by a wrong setup.

@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Apr 16, 2021

with c92f6d7 the worker is inlined thanks to this issue webpack-contrib/worker-loader#282
in detail the most relevant changes are:
inside worker-loader.d.ts:

+declare module 'worker-loader*' {
-declare module "worker-loader!*" {

and NFTWorker.ts:

+import Worker from 'worker-loader?inline=no-fallback!./Worker';
-import Worker from "worker-loader!./Worker";

@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented May 1, 2021

With 2fe653c The examples/arNFT_threejs_example.html is able to detect and track the pinball image, but no mesh (or other stuff) is displayed. This is not my intention now. I'm testing only the logic.

@kalwalt kalwalt force-pushed the feature-typescript-webpack-01 branch from 9c99845 to aac02e3 Compare May 4, 2021 21:44
@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented May 27, 2021

Closing this PR, better to continue on #184

@kalwalt kalwalt closed this May 27, 2021
@kalwalt kalwalt deleted the feature-typescript-webpack-01 branch October 9, 2021 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚀 enhancement New feature or request Typescript webpack about issue on webpack

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant