question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Load locales with webpack

See original GitHub issue

Hi,

I am trying to use this module with webpack. Sadly, it doesn’t work as expected. When I init the plugin with:

aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-validation');

I get validation-locale.js:78 Uncaught (in promise) ReferenceError: System is not defined.

I tracked the bug and it seems that System.import is explicitly used in the code to load the locale files here preventing the module to work with anything else than SystemJS.

I tried to load the locale manually. To do that, I used this code in main.js:

import {bootstrap} from 'aurelia-bootstrapper-webpack';
import {ValidationLocale} from '../node_modules/aurelia-validation/src/validation-locale';
import { data } from '../node_modules/aurelia-validation/src/resources/en-US';

bootstrap(function (aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging();

    ValidationLocale.Repository.addLocale('en-US', data)

    aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

Once I did that,

console.log(ValidationLocale.Repository.instances.has('en-US'))

does respond true. However, I still have the following errors:

validation-locale.js:78 Uncaught (in promise) ReferenceError: System is not defined
validation-property.js:86 Uncaught (in promise) Error: An exception occurred while trying to load the locale(…)

To make it work, I had to modify the modules loaders in webpack and add this line:

{ test: /aurelia-validation\/src\/.*\.js$/, loader: 'babel', query: {stage: 0} },

Would it be possible to remove the need for System.import or allow the user to load a locale manually?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:1
  • Comments:27 (23 by maintainers)

github_iconTop GitHub Comments

1reaction
jsobellcommented, Apr 10, 2016

For those trying to get it working in the meantime: npm install Zensavona/validation#use-aurelia-loader-instead-of-systemjs Thanks @Zensavona

1reaction
EisenbergEffectcommented, Mar 15, 2016

@PWKad This is a similar issue that was reported the other day. We need to switch this to using the Loader abstraction otherwise it won’t work with Webpack, require.js, dojo or any non-system.js loader. I’d put this fix at a pretty high priority. @zewa666

Read more comments on GitHub >

github_iconTop Results From Across the Web

i18n-loader - webpack - JS.ORG
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
i18n-locales-loader - npm
A webpack loader that splits your locales.json file into locale-specific files (eg. en.json , zh.json ) for better locale-specific translations ...
Read more >
How do I load locale data when using Webpack #34 - GitHub
Hi, I'm trying to figure out how to load locale data in an application using Webpack. The application is based on Este.js.
Read more >
How to bundle and then load i18n modules at runtime?
Make your bundle lazy load the locale. ... The i18n plugin for Webpack will help you create individual bundles ... It will load...
Read more >
How to prevent moment.js from loading locales with webpack?
How to prevent moment.js from loading locales with webpack? - A local file is a .json file that contains a set of translations...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found