# Aurelia 2 i18n webpack translation.json not found

**URL:** <https://discourse.aurelia.io/t/aurelia-2-i18n-webpack-translation-json-not-found/4538>\
**Category:** Help Requests\
**Created:** [December 29, 2021, 9:26am UTC](https://discourse.aurelia.io/t/aurelia-2-i18n-webpack-translation-json-not-found/4538 "2021-12-29T09:26:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [December 29, 2021, 9:26am UTC](https://discourse.aurelia.io/t/aurelia-2-i18n-webpack-translation-json-not-found/4538/1 "2021-12-29T09:26:30Z")

</div>

Started a new au2 project with webpack: `npx makes aurelia` and selected option: Default TypeScript Aurelia 2 App

Got started with setting up i18n from the docs: [Internationalization (i18n)](https://docs.aurelia.io/developer-guides/internationalization)  
After installing the plugin and registering the first example, it seems to work just fine:

```auto
options.initOptions = {
  resources: {
    en: { translation: { key: "Hello I18N"} },
    de: { translation: { key: "Hallo I18N"} },
  }
};

```

I’m interested in getting the i18next Backend plugin method working to asynchronously load the resource file when needed. I followed the instructions in the docs and installed **[i18next-fetch-backend](https://github.com/dotcore64/i18next-fetch-backend)** plugin and using the default settings:

```auto
options.initOptions = {
  plugins: [Fetch],
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    }
};

```

After that setup and running the app with `npm start` the translation `<span t="key"></span>` is not working anymore because the `translation.json` file I created gets a 404 somehow. I also noticed that the favicon.ico file that came with the aurelia template is getting a 404:

 ![404](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/dd945840e79592c9f265b294932affb6176a5833.png)

Maybe these 404’s are somehow connected that webpack is not able to serve these static files? Has anybody got an idea?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [December 29, 2021, 9:20pm UTC](https://discourse.aurelia.io/t/aurelia-2-i18n-webpack-translation-json-not-found/4538/2 "2021-12-29T21:20:27Z")

</div>

Make sure that you have configured webpack to copy the locale files to the output directory. If your build process is solely dependent on webpack, then you can use the [`CopyWebpackPlugin`](https://webpack.js.org/plugins/copy-webpack-plugin/) to this end.  
If you are using a task runner like gulp you can leverage that as well to copy the locale files to the output directory.

---

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [December 30, 2021, 8:58am UTC](https://discourse.aurelia.io/t/aurelia-2-i18n-webpack-translation-json-not-found/4538/3 "2021-12-30T08:58:42Z")

</div>

**Thank you for the guidance!** 👏 I totally missed the section in the docs that mentions that same thing 🤕

I learned that when using `webpack 5.65` and `webpack-dev-server 4.5` there has been a change of propery in `webpack-dev-server` - `contentBase` has been renamed to `static` - [link to github comment](https://gist.github.com/johnrichardrinehart/c8ec6ab1e60f39fc3b8dc738db649ec0#gistcomment-3671351)

So instead of this setting in the docs:

```auto
devServer: {
  contentBase: path.join(__dirname, "dist"),
}

```

I changed it like that and got rid of the webpack error:

```auto
devServer: {
  static: path.join(__dirname, "dist"),
}

```