Unlocking Global Opportunities with Stencil for Internationalization

Hi there, I've been attempting to implement Internationalization in my stencil project but unfortunately, it's not working as expected. I'm not sure what's causing the issue, and all I'm seeing is a 404 error. I followed these articles closely and none of them seemed to encounter this problem. Here are the links to the articles: Medium Article and Dev.to Article

Here's a snippet from my package.json file:

{
  "name": "iii",
  "version": "0.0.1",
  "description": "Stencil Component Starter",
  // Additional properties go here ...
}

And here's a portion of my stencil.config.json file:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'iii',
  outputTargets: [
    // Output targets configuration goes here ...
  ],
  copy: [
    {
      src: "**/*.i18n.*.json",
      dest: "i18n"
    }
  ]
};
`

I have tried to replicate the code exactly as shown in the articles, but still facing issues with Internationalization. Any tips, additional articles or support would be greatly appreciated. Thank you!

Answer №1

It appears that the files may not have been copied, or they might not be in the expected location. Please confirm if they are located within the dist and/or www folders.

Starting from Stencil 2, the copy task has been relocated to the output target configuration (refer to breaking changes). We recommend moving it into the www output target config like so:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'iii',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
      copy: [
        {
          src: "**/*.i18n.*.json",
          dest: "i18n"
        }
      ],
    },
  ],
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the solution to resolving the warning about the router no longer defaulting the history prop to hash history?

I have implemented browser history in my code within routes.js export default ( <Router history={browserHistory}> <Route path="/" component={Main}> <Route path="home/:username" component={Home}> <IndexRoute co ...

Plugin refresh after callback

I have a webpage that features a row of buttons at the top, followed by some content below. Whenever one of the buttons is clicked, the content is updated using UpdatePanels. Within this content, I am attempting to incorporate the royal slider plugin, wh ...

Sorting tables in Jquery with advanced filter options and seamless integration with an ajax pager

I've implemented a tablesorter library for sorting and filtering data in a table along with a plugin that allows me to paginate the table across multiple pages. Due to the increasing number of records in my table causing slow loading times (>60 se ...

Continuously converting methods recursively until the array is fully processed

My current code has a method that is not very efficient and does not scale well. The object y is an array consisting of key/value pairs, each containing two properties: 1. A unique string property called name. This value is identified by the childre ...

Tips for effectively utilizing the select feature with Firebase data within the Angular UI typeahead functionality

I am currently attempting to integrate Angular-UI typeahead with data retrieved from my Firebase database. The structure of the data is as follows: Data:{ "-JL8IPEAs0vLSt4DJ4V9": { "name": "Something" }, "-JL8IbggYn3O8jkWoPmv": { "name": "Something Els ...

Accessing a factory from within another in AngularJS Ionic

My Ionic app has been developed with two separate factories: one called Api, which handles API calls, and another called LDB (local database), responsible for interacting with a local Sqlite database using the CordovaSqlite plugin. While each factory work ...

The alert box in Javascript appears before the execution of the statement preceding it

I am encountering a peculiar issue, which is not unexpected considering my limited experience with JavaScript. I am currently working on developing a basic high-low card game where two cards are drawn and the highest card wins. Below you can find the code ...

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

Finding the correct path for ts-loader with webpack version 2.2.1 within a script

When running the gulp task below, I encounter an error: Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin' gulp.task("admin:js", function (done) { module.exports = { context: "wwwroot/js/admin", ...

Enlist partial components in express-handlebars

I'm having trouble registering partials in my app. Despite trying various solutions from other sources, nothing seems to work for me... I have set up the express handlebars as follows: import { engine } from 'express-handlebars'; const __fi ...

substituting the deep watcher in Angular

In my application, I am working with a data object called fulldata, which consists of an array of objects. fulldata = [ {'key': 'abc', values: {.....},....}, {'key': 'efg', values: ...

Tally up various figures in all tables

I am dealing with a dynamic table generated from a PHP loop. Below is an example of the table structure extracted from the browser source code: <table class="table"> ... (table content) </table> <table class="table"> ... (t ...

Sharing an object's attributes as props in Vuejs

Greetings everyone, I am facing some confusion. I am working with two components (child and parent component) where I pass the properties of an object as props <child :child-data="abc" ></child> Vue.componen ...

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Transpilation is the act of converting code from one language to another with a similar level of abstraction. Can you point out some distinctive characteristics that indicate TypeScript transpires into JavaScript? ...

Creating a new web application, I require a loading overlay to appear during transitions between pages

I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...

What is the reason behind the automatic activation of a function when a nested React modal is

I've been experimenting with using react-responsive-modal and then switching to react-modal, but I'm encountering the same issue. Additionally, all my forms are built using react-hook-form. The problem arises when I have one modal triggering ano ...

transmit data via Javascript to interact with a Python web application

I'm having issues sending a json object from JavaScript to a Python webservice. The service keeps treating it as a string. Here are the codes for both client and server sides: CLIENT SIDE: $("#button").click(function () { $.ajax({ ...

"Enhance Your Website with qTip2 Feature to Load Multiple AJAX Sites Simult

I'm currently utilizing the qTip2 library for my project and I've implemented their AJAX retrieval functions following this example: http://jsfiddle.net/L6yq3/1861/. To enhance my query, I have modified their HTML to include multiple links. The ...

Solving compatibility problems with jquery AJAX requests on multiple browsers

searchCompanyExecutives: function(criteria, callback) { var params = $j.extend({ type: "GET", data: criteria, url: "/wa/rs/company_executives?random=" + Math.floor(Math.random() * (new Date()).getTime() + 1), ...

How can one interpret the act of "passing" an interface to an RxJS Store using angle brackets?

When working with NgRx and typescript, I often come across this syntax within class constructors: import { Store, select } from '@ngrx/store' class MyClass { constructor(private store: Store<AppState>) { this.count$ = store.pipe(sele ...