NextJS start project guide doesn't work

[hi15 (Tom Smedley)]

Hi,

This is the first time me trying Prismic and I'm looking at trying it out for a future project. Following the guide when creating a new Next.JS project

npx create-next-app dan-hayes
cd dan-hayes

Then

npx @slicemachine/init --repository dan-hayes
npm run slicemachine

Is giving me the error:

C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js:8
const ora_1 = __importDefault(require("ora"));
                              ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\ora\index.js from C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js not supported.
Instead change the require of index.js in C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js:8:31)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\index.js:34:14)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\filesystem\manifest.js:4:17)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\filesystem\index.js:13:14)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\index.js:26:35)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\slice-machine-ui\build\scripts\start\index.js:7:16)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\slice-machine-ui\bin\start.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

NPM Version:
v8.5.5

Node Version:
v16.14.2

Package.json:

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine"
  },
  "dependencies": {
    "@prismicio/client": "^6.4.1",
    "@prismicio/helpers": "^2.2.1",
    "@prismicio/react": "^2.1.2",
    "@prismicio/slice-simulator-react": "^0.2.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "slice-machine-ui": "^0.3.3"
  }
}

[Fares]

Hi @hi15,

Welcome to the Prismic community,

It seems that in some places in your code you are using es 6 import where the SM modules use require, can you try to switch in require for your modules

Looking forward to your reply,
Fares

[hi15 (Tom Smedley)]

Hi @Fares

I feel like people are not understanding what I'm talking about here.

1. This is a blank new project. An empty folder.
2. I create a "Next.JS Project" on Prismic.
3. It gives a guide on the right hand side on how to start a project.
4. I run the required commands:

npx create-next-app dan-hayes
cd dan-hayes

and

npx @slicemachine/init --repository dan-hayes
npm run slicemachine

5. It returns the error

C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js:8
const ora_1 = __importDefault(require("ora"));
                              ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\ora\index.js from C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js not supported.
Instead change the require of index.js in C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\cliLogs.js:8:31)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\utils\index.js:34:14)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\filesystem\manifest.js:4:17)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\src\filesystem\index.js:13:14)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\@slicemachine\core\build\index.js:26:35)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\slice-machine-ui\build\scripts\start\index.js:7:16)
    at Object.<anonymous> (C:\Users\toms\Documents\Projects\GitHub\dan-hayes\node_modules\slice-machine-ui\bin\start.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

If you have a look at where the error is coming from it's @slicemachine\core\build\src\utils\cliLogs.js:8 const ora_1 = __importDefault(require("ora"));.

This is an error coming from Slice Machine. This isn't some place in my code, because there is no "my code". I haven't been able to get to that point.

[Fares]

Thanks, @hi15 for the clarification I will investigate and try to reproduce and will get back to you.

[Fares]

Hi @hi15,

I have tried to reproduce the issue, and it is working fine for me, and the cliLogs.js file doesn't exists in my latest version of @slicemachine:

Can you try to restart again with a brand new project to see if the issue still happens?

Note that I haven't tested on windows, and if the problem persists, I will try to do that.