Search code examples
javascripttypescriptfrontendinternationalizationstenciljs

Internationalisation With Stencil

Hey so I have been trying to do Internationalisation with my stencil project but it's not working i don't know whats wrong this is all i getting enter image description here

i know 404 means its not able to find the file or whatever but i followed these articles and none of them havig this issues and i did exact steps as in these articles https://medium.com/stencil-tricks/implementing-internationalisation-i18n-with-stencil-5e6559554117 and https://dev.to/teamhive/using-i18n-translations-within-stencil-components-4n30

here's my package.json

{
  "name": "iii",
  "version": "0.0.1",
  "description": "Stencil Component Starter",
  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/iii/iii.esm.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/ionic-team/stencil-component-starter.git"
  },
  "files": [
    "dist/",
    "loader/"
  ],
  "scripts": {
    "build": "stencil build --docs",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "dependencies": {
    "@stencil/core": "^2.13.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.3",
    "jest": "^27.4.5",
    "jest-cli": "^27.4.5",
    "puppeteer": "^10.0.0"
  },
  "license": "MIT"
}`

stencil.config.json

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"
    }
  ]
};
`

and as for the code i write exact code as in the given articles I really need some tips or any articles or help ,anything which can help me do Internationalisation in stencil

Solution

  • Looks like the files aren't copied, or not to where you expect. Verify whether they are actually in the dist and/or www folders.

    Also, since Stencil 2 the copy task has been moved into the output target configuration (see breaking changes) so try moving it into the www output target config:

    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"
        }
      ],
    },
  ],
};