Cannot import message files with filename that contain hyphens in v11

Check for duplicates

I have searched for similar issues before opening a new one.

Description

An error occurs when importing message files with filenames that contain hyphens (en-gb, zh-hant, etc).

In v11, a script for building message files was updated (#8091). The code below reveals that we directly use the filenames from msg/json/*.json to name the default export object.

blockly/scripts/gulpfiles/build_tasks.js

Lines 658 to 688 in 9519333

    
        <
8000
/tr>

           /** 
        
            * This task builds the ESM wrappers used by the langfiles "import" 
        
            * entrypoints declared in package.json. 

            */ 
        
           async function buildLangfileShims() { 
        
             // Create output directory. 
        
             fs.mkdirSync(path.join(RELEASE_DIR, 'msg'), {recursive: true}); 
        
             // Get the names of the exports from the langfile by require()ing 
        
             // msg/messages.js and letting it mutate the (global) Blockly.Msg. 
        
             // (We have to do it this way because messages.js is a script and 
        
             // not a CJS module with exports.) 
        
             globalThis.Blockly = {Msg: {}}; 
        
             require('../../msg/messages.js'); 
        
             const exportedNames = Object.keys(globalThis.Blockly.Msg); 
        
             delete globalThis.Blockly; 
        
             await Promise.all(getLanguages().map(async (lang) => { 
        
               // Write an ESM wrapper that imports the CJS module and re-exports 
        
               // its named exports. 
        
               const cjsPath = `./${lang}.js`; 
        
               const wrapperPath = path.join(RELEASE_DIR, 'msg', `${lang}.mjs`); 
        
               await fsPromises.writeFile(wrapperPath, 
        
                   `import ${lang} from '${cjsPath}'; 
        
           export const { 
        
           ${exportedNames.map((name) => `  ${name},`).join('\n')} 
        
           } = ${lang}; 
        
           `); 
        
             })); 
        
           }

However, hyphens are not legal in javascript names, which seems to be the root cause of the issue.

Reproduction steps

Get Blockly through Create-package script.
Import message files in index.js (ex: en-gb).
import * as enGb from 'blockly/msg/en-gb';

Stack trace

ERROR in ./node_modules/blockly/msg/en-gb.mjs 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import en-gb from './en-gb.js';
| export const {
|   LOGIC_HUE,
 @ ./src/index.js 8:0-42 16:18-22

Screenshots

No response

Browsers

No response

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Check for duplicates

Description

Reproduction steps

Stack trace

Screenshots

Browsers

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	/**
	* This task builds the ESM wrappers used by the langfiles "import"
	* entrypoints declared in package.json.
	*/
	async function buildLangfileShims() {
	// Create output directory.
	fs.mkdirSync(path.join(RELEASE_DIR, 'msg'), {recursive: true});

	// Get the names of the exports from the langfile by require()ing
	// msg/messages.js and letting it mutate the (global) Blockly.Msg.
	// (We have to do it this way because messages.js is a script and
	// not a CJS module with exports.)
	globalThis.Blockly = {Msg: {}};
	require('../../msg/messages.js');
	const exportedNames = Object.keys(globalThis.Blockly.Msg);
	delete globalThis.Blockly;

	await Promise.all(getLanguages().map(async (lang) => {
	// Write an ESM wrapper that imports the CJS module and re-exports
	// its named exports.
	const cjsPath = `./${lang}.js`;
	const wrapperPath = path.join(RELEASE_DIR, 'msg', `${lang}.mjs`);

	await fsPromises.writeFile(wrapperPath,
	`import ${lang} from '${cjsPath}';
	export const {
	${exportedNames.map((name) => ` ${name},`).join('\n')}
	} = ${lang};
	`);
	}));
	}

Description

Check for duplicates

Description

Reproduction steps

Stack trace

Screenshots

Browsers

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions