I initialized a brand new Next.js project and installed the official openlayers module (https://github.com/openlayers/openlayers) with npm in it.
But as soon as I import it in one of the src js files, I get some error like this: Unexpected token 'export'
The only way I got it working is by telling Next.js to not use that src file on the server side.
I understand that it only wants to work with client side rendering.
Can anyone explain to me, why is it only working like that?
What is different in this module that prevents it from using it with the default ssr settings?
OpenLayers got full node.js support since I posted my question, so with that it become obsolete.
Find more about it on their GitHub repo.
Related
I have ran into trouble with ipfs-http-client in my React app.
I'm using node 16.14.0
The error message is:
When I Ctrl + Click on 'ipfs-http-client', it still drive me to the modules file.
Solutions that I've tried, but not work:
Restart app
Reinstall module
I've tried use 33.x version, it works fine but I want to use the latest version of ipfs-http-client (57.0.3)
Please help me. Thanks a lot!
The simple Solution
When you use ipfs-http-client in the frontend you will soon also have problems using jest. The easiest way is to simply not use ipfs-http-client at all and instead use a gateway like infura and fetch() the data directly. You can use my code for that:
https://gist.github.com/aignermax/c495c98003da974d17b9c4c481ac23be
The more tricky one
The problem seems to be related to webpack 5 that does not support any Node.js functions "polyfills" anymore. The idea is to keep the frontend separate from the backend and all ipfs-http-client functions are meant to be used in backend only.
You can however still add the polyfills manually following this tutorial: Remember that "Jest" will still not work after that, so if you do unit testing you should consider using ipfs on your server instead or use "The simple Solution" above.
https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
I then got some webpack PolyErrors which I solved using this NPM Package:
https://www.npmjs.com/package/node-polyfill-webpack-plugin
I also Got Errors about failed to load Source-Map from source-map-loader, which will occur using WebPack5 which is included in the new React-Scripts. You fix that by using this:
Failed to parse source map
and NOW IT WORKS.
Following my first question, I realized that the reason I couldn't get anything to work was that I was trying to use the require() method in the browser. In learning that this is not how Node works, I was confused. I understand now that Node is only a run-time environment that allows the use of JavaScript within the console. However, I'm still left with the question of how to achieve the functions of Node within the browser. (i.e. creating a button in the browser that creates a file using Node.) I've installed Browserify but I cannot find a good tutorial on how to use it. I'm very new to Computer Science so please forgive me for the redundant questions. Thanks a lot.
Things do change. Apparently it will be possible to use node.js in the browser soon. You might be interested in this: Run Node.js in the browser
Node as you made the point is server-side runtime environment for js and the browser is client-side. Node.js has many useful built-in functionalities and they are not accessible in browser.
I recommend you to take a look how backend and frontend differs and how do they communicate with themselves. Then I think you will understand how to achieve creating a file by clicking a button in the browser.
Sorry I don't know anything about browserify but it would be better to learn node in cli.
I have an existing project, a Node API + Angular project :
https://framagit.org/mael-jarnole/talebear/tree/master
And I am trying to implement SSR, using the official guide:
https://angular.io/guide/universal
Here is my WiP:
https://framagit.org/mael-jarnole/talebear/tree/ssr-wip
The SSR bundle and regular Angular app seem to build fine, my problem is the express server implementation :
So far Webpack outputs tons of warning and errors that I do not understand (probably coming from my lack of knowledge of webpack), that seem to be coming from third party js imports (mongoose, helmet etc.)
My questions are:
Is it necessary to use Webpack and typescript for the Node server ? Porting the code can be quite long, I did it in a very quick way, and it is not very Typescript-like so far. I'd love to stick to my Javascript implementation that works.
Why are there errors when running npm run webpack:server on my SSR branch ?
If the answer is yes to the first question, what should I modify in order to have a working server Webpack configuration ? Where should I look at ? The configuration from the official guide outputs a huge server.js file
Sorry if my question is too broad ! Thank you for your help.
I started over from another angular + node boilerplate: https://github.com/angular/universal-starter, and merged my project step by step, re installing every dependencies. and my server now works...
So problem solved but no clue why it did not work on my ssr-wip branch.
Recently i have deployed a node.js server side app with budo and it works fine.. but after deploying to Azure(WebAPP) it is not working and throws error that 'require' is not defined. I have used VSCode to develop the project
After some research, I found that the bodu which is a browserify development server. So it looks like your app is in client-side JavaScript but the node.js app is in server-site, they are technically different. And require() does not exist in the browser/client-side JavaScript, so it raised your issue.
To fix this issue please try using a modular script loader like browserify to traverse all your sources and concatenate all required files into the bundle then including bundle.js in your HTML file. Finally, redeploy it and you will get it worked.
Any further concern or if I have any misunderstanding, please feel free to let me know.
I'm trying to learn how to create and publish an npm package.
I have created an npm package, https://github.com/nitte93/OnBoarding
for my learning purpose.
https://www.npmjs.com/package/onBoarding
It works fine in dev build, but when I try to import it in my isomorphic react app, I get : ReferenceError: window is not defined
I have not made any explicit use of the window object in the package, but there are places where I have explicitly use jquery.
Now, I am not sure but all I understood was, that while importing this npm package in my isomorphic app, I'm trying to use the window object in NODE environment, which I assume is wrong since window object is only accessible on the browser side.
My question is how do I handle this.
1) Do I need to handle this in my npm package itself.
2)Should I handle it in my Isomorphic app? How?
Please answer or point to a right resource to solve this issue.
I looked through your repository, and the only thing I think could be the culprit is that the semantic-ui vendor js files are required in the OnBoarding.js component, which I assume is also a server rendered file. You need to instead require those packages that only run on the browser inside the client file (the one that will call ReactDom.render().. I think it's /src/example/index.js).
Also, as a rule of thumb don't put any browser specific code in componentWillMount, as that does get called on the server. componentDidMount is safe, though, as it's only called in the browser.