tdweb.js cann't get worker.js in new Worker()

[theChengundertheQun]

I use tdweb in my new react project, but when I run start my project, I got two error in my console: Manifest: Line: 1, column: 1, Syntax error. d41e7771ff6b84fd3441.worker.js:1 Uncaught SyntaxError: Unexpected token '<' And I find out it is because the tdweb.js line 231: module.exports = function() { return new Worker(__webpack_require__.p + "d41e7771ff6b84fd3441.worker.js"); }; and the new Wroker cann't find d41e7771ff6b84fd3441.worker.js; I have no idea how to fix it, is there something I need to config ? Thanks for your time!

[levlam]

Does https://www.npmjs.com/package/tdweb#installation help?

Also ensure that your web-server serves files with correct MIME types.

[theChengundertheQun]

是否https://www.npmjs.com/package/tdweb#installation帮助？

另外，请确保您的网络服务器提供具有正确MIME类型的文件。

No it not help me :( I just use tdweb like https://github.com/evgeny-nadymov/telegram-react and my code in this project can run, but in my project cann't import worker.js and .wasm file,because my webpack config?

[levlam]

Have you copied files from node_modules/tdweb/dist/ and made them accessible using your web server as written in https://www.npmjs.com/package/tdweb#installation?

[theChengundertheQun]

Have you copied files from node_modules/tdweb/dist/ and made them accessible using your web server as written in https://www.npmjs.com/package/tdweb#installation?

I already copy files from node_modules to pubilc folder just like telegram-react, but I didn't find where I used it.

[levlam]

You also must set up web server to serve them with a correct MIME type.

[theChengundertheQun]

You also must set up web server to serve them with a correct MIME type.

emm the project right now is run in my local serve, is there problem?

[theChengundertheQun]

@levlam I think I did not describe clearly... I create-react-app my react project and install teweb and use it like telegram-react, but when I run start my project,I got two error in my console: 130f0ecf36ff90c87239.worker.js:1 Uncaught SyntaxError: Unexpected token '<' manifest.json:1 Manifest: Line: 1, column: 1, Syntax error. And I find out the "Unexpected token '<'" means like https://idiallo.com/javascript/uncaught-syntaxerror-unexpected-token#n. Any idea？I have been tormented by this problem for three days:(

[levlam]

And I told you that the error is caused by web server not returning the files or returning them with wrong MIME type. You can check what exactly happens on Network tab in Developer tools in the browser.

[theChengundertheQun]

And I told you that the error is caused by web server not returning the files or returning them with wrong MIME type. You can check what exactly happens on Network tab in Developer tools in the browser.

I think I got it!

[theChengundertheQun]

And I told you that the error is caused by web server not returning the files or returning them with wrong MIME type. You can check what exactly happens on Network tab in Developer tools in the browser.

Finally! I solved it.. But maby it not because web server not returning the files or returnning wrong type.I think it is because my project use n nesting router config, So when the router /tg/chat, the file path is wrong so cann't get the worker.js.But when the router /tg, the file path is right.I think it is maby casue by I copy the file to public folder to resolve the new worker problem? So I finally added a judgment on how many layers of router: `const route = window.location.pathname; const routeArr = route.split('/'); const path = routeArr.reduce((target, item, index) => { target = index >= routeArr.length - 2 ? target : target += '../'; return target; }, '')

return new Worker(path + "d41e7771ff6b84fd3441.worker.js");`

[kinson603]

@theChengundertheQun @levlam Hi. I have also encountered this problem in my Ionic Angular app, the webserver just can't load the worker.js. Do you think the router solution can be applied everywhere as well including my project? I am not sure how it works though. The project in https://github.com/evgeny-nadymov/telegram-react does not have this approach so I am really curious what is the root problem here.

[theChengundertheQun]

@theChengundertheQun @levlam Hi. I have also encountered this problem in my Ionic Angular app, the webserver just can't load the worker.js. Do you think the router solution can be applied everywhere as well including my project? I am not sure how it works though. The project in https://github.com/evgeny-nadymov/telegram-react does not have this approach so I am really curious what is the root problem here.

emmm my English is not very well, so I am not sure you can understand what I said. I think it is because it import the xxx.worker.js in the same path with index.html, for example, in router localhost:8080/home, it is ok, but in localhost:8080/home/test, it will try to find the ./test/xxx.worker.js, so it is not found, so I add the code ` module.exports = function() { const route = window.location.pathname; const routeArr = route.split('/'); const path = routeArr.reduce((target, item, index) => { target = index >= routeArr.length - 2 ? target : target += '../'; return target; }, '')

return new Worker(path + "aac44a7e9648482a56f9.worker.js"); }; ` in the tdweb.js line 230. I don't know if I made it clear, Hope it can help you

[kinson603]

emmm my English is not very well, so I am not sure you can understand what I said. I think it is because it import the xxx.worker.js in the same path with index.html, for example, in router localhost:8080/home, it is ok, but in localhost:8080/home/test, it will try to find the ./test/xxx.worker.js, so it is not found, so I add the code ` module.exports = function() { const route = window.location.pathname; const routeArr = route.split('/'); const path = routeArr.reduce((target, item, index) => { target = index >= routeArr.length - 2 ? target : target += '../'; return target; }, '')

return new Worker(path + "aac44a7e9648482a56f9.worker.js"); }; ` in the tdweb.js line 230. I don't know if I made it clear, Hope it can help you

Well I have added the code to tdweb.js and the problem still occurs. The route simply returns "/" and the file path for the worker.js seems normal to me. Looks like I still need to investigate more.

[theChengundertheQun]

emmm my English is not very well, so I am not sure you can understand what I said. I think it is because it import the xxx.worker.js in the same path with index.html, for example, in router localhost:8080/home, it is ok, but in localhost:8080/home/test, it will try to find the ./test/xxx.worker.js, so it is not found, so I add the code module.exports = function() { const route = window.location.pathname; const routeArr = route.split('/'); const path = routeArr.reduce((target, item, index) => { target = index >= routeArr.length - 2 ? target : target += '../'; return target; }, '') return new Worker(path + "aac44a7e9648482a56f9.worker.js"); }; in the tdweb.js line 230. I don't know if I made it clear, Hope it can help you

Well I have added the code to tdweb.js and the problem still occurs. The route simply returns "/" and the file path for the worker.js seems normal to me. Looks like I still need to investigate more.

Did you copy the six files from node_modules to your public folder? The tdweb.js import xxx.work.js will find in the same path with index.html, in my project is public folder.

[theChengundertheQun]

emmm my English is not very well, so I am not sure you can understand what I said. I think it is because it import the xxx.worker.js in the same path with index.html, for example, in router localhost:8080/home, it is ok, but in localhost:8080/home/test, it will try to find the ./test/xxx.worker.js, so it is not found, so I add the code module.exports = function() { const route = window.location.pathname; const routeArr = route.split('/'); const path = routeArr.reduce((target, item, index) => { target = index >= routeArr.length - 2 ? target : target += '../'; return target; }, '') return new Worker(path + "aac44a7e9648482a56f9.worker.js"); }; in the tdweb.js line 230. I don't know if I made it clear, Hope it can help you

Well I have added the code to tdweb.js and the problem still occurs. The route simply returns "/" and the file path for the worker.js seems normal to me. Looks like I still need to investigate more.

In https://www.npmjs.com/package/tdweb#installation%E5%B8%AE%E5%8A%A9%EF%BC%9F , it said: All files will be installed into node_modules/tdweb/dist/ folder. For now, it is your responsibility to make those files loadable from your server. For example, telegram-react manually copies these files into the public folder. If you know how to avoid this problem, please tell us.

[kinson603]

emmm my English is not very well, so I am not sure you can understand what I said. I think it is because it import the xxx.worker.js in the same path with index.html, for example, in router localhost:8080/home, it is ok, but in localhost:8080/home/test, it will try to find the ./test/xxx.worker.js, so it is not found, so I add the code module.exports = function() { const route = window.location.pathname; const routeArr = route.split('/'); const path = routeArr.reduce((target, item, index) => { target = index >= routeArr.length - 2 ? target : target += '../'; return target; }, '') return new Worker(path + "aac44a7e9648482a56f9.worker.js"); }; in the tdweb.js line 230. I don't know if I made it clear, Hope it can help you

Well I have added the code to tdweb.js and the problem still occurs. The route simply returns "/" and the file path for the worker.js seems normal to me. Looks like I still need to investigate more.

Did you copy the six files from node_modules to your public folder? The tdweb.js import xxx.work.js will find in the same path with index.html, in my project is public folder.

There is no public folder in my project. The index.html is simply under src folder so I copy the files to there. After running ionic serve to run on browser, the console in firefox still shows Cannot GET /130f0ecf36ff90c87239.worker.js The url is http://localhost:8100/130f0ecf36ff90c87239.worker.js

[eruslan44]

There is no public folder in my project. The index.html is simply under src folder so I copy the files to there. After running ionic serve to run on browser, the console in firefox still shows Cannot GET /130f0ecf36ff90c87239.worker.js The url is http://localhost:8100/130f0ecf36ff90c87239.worker.js

Hi! Have you solved this problem? If so, how?