Getting error while creating production build 'does not contain a default export'

user_8206178 0
Viewed 784

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;
react-scripts react-intl reactjs
2 Answers

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
user_117518440

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" />
user_108494380
Related