3

Hii I am working with language translation using "react-intl": "^4.1.1", but when I creating production build then code is not compiled and shows the error about default export

Error :

Creating an optimized production build...
Failed to compile.

./src/lang/entries/es_ES.js
Attempted import error: '../locales/es_ES' does not contain a default export (imported as 'enMessages').

I am importing file like this: 

import enMessages from '../locales/en_US';

Exporting :

export default {
   "sidebar.dashboard" : "Dashboard"
}

The most important thing is its working on the local and generating issues while creating a production build and I am using "react-scripts": "^3.3.0" in this project. How can I solve this?

Update: After import enMessages

import endata from '@formatjs/intl-pluralrules/dist/locale-data/en';
import enMessages from '../locales/en_US';

const EnLang = {
   messages: {
      ...enMessages
   },
   locale: 'en-US',
   data: endata
};
export default EnLang;
Varinder Sohal
  • 1,142
  • 5
  • 24
  • 44

2 Answers2

0

Your code looks fine. Have you tried a named export?

/** ./src/lang/entries/es_ES.js */
import { enMessages } from '../locales/en_US

/** ./src/lang/locales/en_US.js */
export const enMessages = { "sidebar.dashboard" : "Dashboard" }

Default exports are generally a bad idea... and ambiguous. What's to stop someone importing like this?

import esMessages from '../locales/en_US
Harley Alexander
  • 186
  • 3
  • 8
0

Try this...

// ./src/lang/locales/en_US.js
export default {
   // We are trying to export a `key`, initiated as a String
-  "sidebar.dashboard" : "Dashboard",

   // let's treat sidebar/dashboard as plain keys
+  sidebar: {
+     dashboard: "Dashboard"
+  }
}

And consider using as follows...

// ./src/lang/entries/es_ES.js
import enMessages from '../locales/en_US';

// Based on how you are using `enMessages`
+ export default { // best to use this to avoid `conflict` in later use
+  ...enMessages,  // destructure directly here
   locale: 'en-US',
   data: endata
};

// Use this for reference (though )
<Component id="sidebar.dashboard" />
MwamiTovi
  • 2,425
  • 17
  • 25
  • `./src/lang/locales/en_US.js Line 2:11: Parsing error: Unexpected token, expected "," 1 | export default { > 2 | sidebar.dashboard : "Dashboard" | ^ 3 | }` It generates errors – Varinder Sohal Mar 19 '20 at 07:02
  • This is good progress, at least now it means the `export/import` is a success but what we now have a `parsing error`. Can you share exactly how you are using `enMessages` after being imported? – MwamiTovi Mar 19 '20 at 07:07
  • Ok, so based on this `parsing error`, we need to look into this part `sidebar.dashboard` because compilation is failing there. Could you kindly share more about `sidebar`? I think, we might have to do something like this `export default { sidebar.dashboard as Dashboard }`. – MwamiTovi Mar 19 '20 at 09:42
  • `"sidebar.dashboard" : "Dashboard"` it just a key pair value of object ..nothing else. and `export default { sidebar.dashboard as Dashboard }` this is not working. – Varinder Sohal Mar 19 '20 at 10:37
  • Definitely, we are dealing with a key/value pair but clearly something isn't working. Kindly let me know - what the aim of `export/import` a key/value pair of strings in this situation. Probably then `Dashboard` is a function, right? – MwamiTovi Mar 19 '20 at 10:41
  • No!! dashboard is not a function it is a just string I am using these stings for language translation. you just read is https://levelup.gitconnected.com/localizing-your-react-redux-application-with-react-intl-2c4fb60311e1 article. – Varinder Sohal Mar 19 '20 at 10:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209927/discussion-between-mwamitovi-and-varinder-sohal). – MwamiTovi Mar 19 '20 at 13:28