sxa rebuild -d command fails to execute

Question

I'm working on an existing project which uses Sitecore 10.1.3 PRE and built using SXA.

There is a themes folder in the Solution which has the custom theme.

When I browse the local site, it doesn't have the css.

I'm new to SXA and trying to upload this theme to the local website.

When I run sxa rebuild -d from the themes folder, in the terminal, it throws this error:

error: D:\Projects\Myproject\theme\-\media\Themes\Myproject\Shared\Shared
Theme\node_modules\@eslint\eslintrc\universal.js:1   
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
D:\Projects\Myproject\theme\-\media\Themes\Myproject\Shared\Shared
Theme\node_modules\@eslint\eslintrc\universal.js   require() of ES
modules is not supported.   require() of
D:\Projects\Myproject\theme\-\media\Themes\Myproject\Shared\Shared
Theme\node_modules\@eslint\eslintrc\universal.js from
D:\Projects\Myproject\theme\-\media\Themes\Myproject\Shared\Shared
Theme\node_modules\eslint\lib\linter\linter.js is an ES module file as
it is a .js file whose nearest parent package.json contains "type":
"module" which defines all .js files in that package scope as ES
modules.   Instead rename universal.js to end in .cjs, change the
requiring code to use import(), or remove "type": "module" from
D:\Projects\Myproject\theme\-\media\Themes\Myproject\Shared\Shared
Theme\node_modules\@eslint\eslintrc\package.json.

I'm using sc10.1.3 PRE with Node 14.21.1

Answer 1

This can be an issue with the different node versions, as you mentioned that you are working on an existing project.

So you can try two options here.

• Change Node.js version to the one required by this project and build again
• Stay on the Node.js version you have and remove the node_modules directory and package-lock.json file and do npm install again.

Hope this solves your issue.

Answer 2

Sitecore helped me resolve this issue.

1. Navigate to this folder in the webroot \App_Config\Include\z.Feature.Overrides\

And rename the file z.SPE.Sync.Enabler.Gulp.config.disabled to z.SPE.Sync.Enabler.Gulp.config

2. Open this file in the solution folder D:\Projects\External\MyProject\theme\-\media\Themes\MyProject\Shared\Shared Theme\gulp\config.js

And replace the existing instance URL with your instance URL.

3. Open this file D:\Projects\External\MyProject\theme\-\media\Themes\MyProject\Shared\Shared Theme\.eslintrc.js

And comment the existing babel parser. Add this – parser: ‘@babel/eslint-parser’,

4. Open this file D:\Projects\External\MyProject\theme\-\media\Themes\MyProject\Shared\Shared Theme\package.json

In devDependencies, modify the version for eslint – "eslint": "^7.32.0",

5. Open the terminal and set it to the theme’s root directory of the solution. In my case - D:\Projects\External\MyProject\theme\-\media\Themes

Run this command to register your hostname - sxa register https://myprojectsc.dev.local

6. Open the terminal and set it to the theme’s directory of the solution. D:\Projects\External\MyProject\theme\-\media\Themes\MyProject\Shared\Shared Theme

7. Run this command - npx browserslist@latest --update-db

8. Run this command npm install

9. Run this command sxa init

10. Run this command gulp buildAll

If there is any error saying gulp command is undefined, run this command to install gulp - npm install -g gulp-cli.
Once that is completed, run gulp buildAll
11. Run this command gulp rebuildAll
12. Run this command sxa upload All