Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Parcel reports a missing dependency while building a site with i18nextify #91

Open
Kilkenni opened this issue Feb 15, 2023 · 7 comments
Open

Parcel reports a missing dependency while building a site with i18nextify #91

Kilkenni opened this issue Feb 15, 2023 · 7 comments

Comments

@Kilkenni
Copy link

🐛 Bug Report

I am building a static site with Parcel as bundler. It uses its own development server to serve and hot-reload pages.

I've added
<script src="/node_modules/i18nextify/i18nextify.min.js" type="module" id="i18nextify" fallbacklng="en"></script>
in <head> of my html file and created a translation.json, so i18nextify properly runs with ?debug=true.

However, building the site fails, as Parcel points out that the dependency "cross-fetch" that i18nextify uses is missing in its package.json :

Flameshot_2023-02-15_21-42-11

To Reproduce

  1. Create a project in NPM and add Parcel as bundler
  2. Install i18nextify as an npm module (npm i i18nextify)
  3. Configure scripts for Parcel in package.json like this:
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "rm -rf dist/* && parcel src/*.html src/locales/*/*",
    "build": "rm -rf dist/* && parcel build src/*.html scr/locales/*/*"
  }

What I'm doing here is processing all html files via parcel as well as any files in locales/*/ path - i.e. all the i18nextify translation files. My main file to serve is /src/index.html
4. Add i18nextify in the head of /src/index.html as the guide suggests:

<script src="/node_modules/i18nextify/i18nextify.min.js" type="module" id="i18nextify" fallbacklng="en"></script>
  1. Install namer plugin for Parcel to preserve directory structure. Additionally, .parcelrc in root directory of the project needs another option to skip bundling JSONs and copy them verbatim, so it should look like this in the end:
{
	"extends": "@parcel/config-default",
	"namers": ["@mischnic/parcel-namer-preserve-structure", "..."],
  "transformers": {
    "*.json": ["@parcel/transformer-raw"]
  }
}
  1. At this point if we launch dev version via npm run dev, Parcel serves the page with i18nextify working in it (with ?debug=true, of course). However, trying npm run build triggers this error.

Expected behavior

I expect the production version to be built and work just like the dev one does.

Your Environment

  • runtime version: Parcel 2.8.3, Firefox 110 64x
  • i18nextify version: 3.2.3
  • os: Ubuntu 22.01.1 LTS
@adrai
Copy link
Member

adrai commented Feb 15, 2023

I'm not familiar with parcel... but cross-fetch is a dependency of i18next-http-backend (https://github.com/i18next/i18next-http-backend/blob/master/package.json#L25) and i18next-http-backend is a dependency of i18nextify (https://github.com/i18next/i18nextify/blob/master/package.json)...
🤷‍♂️

@Kilkenni
Copy link
Author

Interesting. So what you're suggesting is, the problem is with the resolver.
I'll try and poke Parcel devs about it, it's a pretty popular alternative to Webpack for small-scale projects.

@adrai
Copy link
Member

adrai commented Feb 15, 2023 •
edited
Loading

btw: why are you not importing i18nextify (or i18next) directly in your js code instead of using the script tag?

import i18nextify from "i18nextify";

i18nextify.init({debug: true})

@Kilkenni
Copy link
Author

Kilkenni commented Feb 15, 2023 •
edited
Loading

btw: why are you not importing i18nextify (or i18next) directly in your js code instead of using the script tag?

I'm completely new to using i18next, and that was simply the first thing described in the guide. I'm not sure how exactly does i18next work when added to a script, and how should I pass arguments to it. Still poking around.

However, I've tried to import it as you suggest, and strangely enough, now the build ends just fine. What gives?

@adrai
Copy link
Member

adrai commented Feb 15, 2023

I think, then you better use i18next directly... (no script tag)...
If you're new to i18next, have a look at this video: https://youtu.be/SA_9i4TtxLQ

@Kilkenni
Copy link
Author

Kilkenni commented Feb 15, 2023 •
edited
Loading

I think, then you better use i18next directly... (no script tag)... If you're new to i18next, have a look at this video: https://youtu.be/SA_9i4TtxLQ

Thanks, I've already watched it. The problem is, it shows some pretty in-depth things from the get-go - like interpolation or pluralization, which I don't need now (and chances are, won't need at all in this project). My site is merely a static landing which doesn't use any frameworks, but I needed JSONs for translation, so I immediately latched onto the idea :)

I'm not sure what backend portion of i18next does. Is it there only to auto-add missing keys to the translation files? Since my site is entirely static, I have no backend, so I'm kinda confused here. It does resemble the stack of middlewares for Express tho...

(also, while I appreciate the help, I feel like I'm deviating from the topic )

@adrai
Copy link
Member

adrai commented Feb 15, 2023

For static website i18nextify is the perfect package...
example: https://github.com/i18next/i18nextify/tree/master/example/landing
if you have no own server side, you'll not be able to use the saveMissing feature, unless you use locize:
https://locize.com/blog/jquery-i18next/#save-missing

@Kilkenni Kilkenni mentioned this issue Feb 15, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@adrai @Kilkenni