Hi,
I want to use this node module https://github.com/surferseo/intl-segmenter-polyfill. Local it works with:
const Segmenter = await createIntlSegmenterPolyfill(
fetch(‘http://localhost:5173/node_modules/intl-segmenter-polyfill/dist/break_iterator.wasm’),
)
How I have to write the fetch for netlify? Or what I have to do?
netlify.toml:
…
[functions]
directory = “functions/”
node_bundler = “esbuild”
external_node_modules = [“intl-segmenter-polyfill”]
netlify dev also works
@frankroc2022 You’re not going to be able to load from localhost:5173 on Netlify.
As per the documentation for the module you’ve linked to, you don’t need to use a fetch, you can also import the module with other formats:
https://github.com/surferseo/intl-segmenter-polyfill#web–bundle-with-base64-encoded-module
Thx 4 answer.
I tried it with node solution, error:
Module “fs” has been externalized for browser compatibility. Cannot access “fs.readFileSync” in client code.
With fetch the error was:
404 for the file break_iterator.wasm
Is it possible to use the fetch solution with netlify or not? If yes is it only possible as netlify function? Or how? Where I can read about this. I mean at least I have only to know how to use a file from node_modules folder. There I think of other node_modules, I will look in the source files. But if you will help me further thx.
Web bundle I never worked with before. Yesterday I cloned the repository and let it build. But I have to google what to do next with it.
Edit:
It works if I copy the file in the dist/build folder. But here is the problem that the file is deleted in build process, so I have to copy the file always after build process and before deploy with netlify cli.
The problem with node_mules is described here:
https://stackoverflow.com/questions/54527465/no-node-modules-from-netlify-deploy
quote:
It took a while to figure this out but I discovered that Netlify does npm install into your repo root or Base directory when you have a package.json. This can be seen by changing the Build command to something like ls and reading the deploy console output (there will be a node_modules folder listed).
However, at some point after running the Build command and before deploying, this node_modules is deleted. Hence, if you use something similar to the following as a Build command, node_modules can be copied to your Publish directory:
How is the right way to work with files from node_modules in netlify?
You need to include the wasm file in your bundle: How to Include Files in Netlify Serverless Functions. Then you can change the path passed to fs.readFileSync() relative from function file to the node_modules folder.
I added to my netlify.toml:
[functions]
included_files = [“node_modules/intl-segmenter-polyfill/dist/break_iterator.wasm”]
But the file is not in the deploy.
I use the node_modules in a component not in a serverless function.
Can I only bundle node_modules files which are used in serverless functions? This can’t be. So how to include node_modules files used in components in netlify?
I created now a function with the netlify cli and I get this error:
netlify/functions/segmenter/segmenter.ts:11:10: ERROR: No loader is configured for “.wasm” files: node_modules/intl-segmenter-polyfill/dist/break_iterator.wasm
The file is never in the deploy download.zip. (My function is named segmenter)
But I have the folder (build by netlify cli) .netlify/functions-serve/segmenter/src/node_modules/intl-segmenter-polyfill/dist/break_iterator.wasm. So why is the file not in the deploy? Or is this a feature that only works with a billing plan???
Or is it somehow possible to auto copy a file in the build process like in package.json scripts->postinstall?
Its not even possible to fetch the file I copied in public folder on another (not netlify) website.
In a serverless function it works now with fs.readFileSync. This was useful:
https://cli.netlify.com/vscode/functions-dev
So I know that the wasm file is in the deploy.
But how I can use this file now in a component?
Or do I have to write the whole logic in the serverless function and call this function from my component?
I tried to return the whole wasm file, but the file is too large:
Function.ResponseSizeTooLarge - Response payload size exceeded maximum allowed payload size (6291556 bytes).
Ok netlify uses the package.json in the project root folder and auto copy works with:
“scripts”: {
“build”: “qwik build && cp node_modules/intl-segmenter-polyfill/dist/break_iterator.wasm dist/build/break_iterator.wasm”,
I use qwik.
This is my solution for now. But I would prefer to direct use the wasm out of the I think .netlify folder.
If I am able to edit the thread title I would edit it to … (maybe solved) and please delete the second “y” in the title polyyfill.
Edit: Interesting the download.zip of the deploy has the same size either I add to netlify.toml or not:
[functions]
included_files = [“node_modules/intl-segmenter-polyfill/dist/break_iterator.wasm”]
But only with this include my serverless function works. So I think the download.zip of the deploy has not all files. Would be great to know the structure of how node_modules are included?!
You’re using fs.readFileSync, how can you use that in a browser? fs is not available in browsers.
I think you’re confused on what exactly it is that you want to do. There’s no concept of Node Modules for browsers and your code is generally bundled together into JS files that do not depend on Node Modules.
I used fs.readFileSync in a serverless function. In component I use fetch. I didn’t write anywhere that I used fs.readfile in browser, only that I tried it and this was the result:
Quote, s. a.:
Thx 4 answer.
I tried it with node solution, error:
Module “fs” has been externalized for browser compatibility. Cannot access “fs.readFileSync” in client code.
You can try to retrieve a file using the fetch API to make an HTTP request to the server and receive the file’s contents as a response.