Can't create Layout root app "SyntaxError: Cannot use import statement outside a module"

[bmironov]

Hello,

Please correct me if I'm wrong here.

I'm facing strange issue - I can't generate any Single SPA application via npx create-single-spa. My single-spa installation is

$ npm view single-spa version
6.0.3
$ npm view single-spa-layout version
3.0.0
$ npm view single-spa-react version
6.0.2

$ npx create-single-spa
? Directory for new project host
? Select type to generate single-spa root config
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Would you like to use single-spa Layout Engine Yes
? Organization name (can use letters, numbers, dash or underscore) sprint1-task3

Attempt to load this page ends up with 2 errors "SyntaxError: Cannot use import statement outside a module".

If I repeat creation of the root app without Layout:

$ npx create-single-spa
? Directory for new project host
? Select type to generate single-spa root config
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Would you like to use single-spa Layout Engine No
? Organization name (can use letters, numbers, dash or underscore) sprint1-task3

then application produces expected "Welcome to your single-spa root config!" page

More to that story. As long as non-Layout root app works, I proceed with generation of my app:

$ npx create-single-spa
? Directory for new project users
? Select type to generate single-spa application / parcel
? Which framework do you want to use? react
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Organization name (can use letters, numbers, dash or underscore) sprint1-task3
? Project name (can use letters, numbers, dash or underscore) users

This app has no luck at all. With "npm run start" it produces "Your Microfrontend is not here", but with npm run start:standalone it produces nothing and gets 2 errors "SyntaxError: Cannot use 'import.meta' outside a module".

Attempt to set "type":"module" in package.json of such React application produces webpack 5.95.0 error:

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/blah/blah/blah/users/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

As a side note, it would be great to have an option to specify port for React app during npx create-single-spa and add parameter --port X to package.json "start" and "start:standalone" commands. It would really help to set multiple apps properly under npm.

Best regards, Boris

[bmironov]