Unable to build project

[userdeadinterface]

I'm a complete beginner to Node.js, and maybe this is something that my lack of experience is causing.

The issue is that I'm unable to build the project for some reason even though I have everything installed. When I attempt to build the project according to the instructions (with npm run build), it causes this error:

> scrabble-solver@2.13.7 build
> npm run build -w packages

> @scrabble-solver/logger@2.13.7 build
> tsc --project .

> @scrabble-solver/constants@2.13.7 build
> tsc --project .

> @scrabble-solver/types@2.13.7 build
> tsc --project .

> @scrabble-solver/configs@2.13.7 build
> tsc --project .

> @scrabble-solver/word-lists@2.13.7 build
> tsc --project .

> @scrabble-solver/word-definitions@2.13.7 build
> tsc --project .

> @scrabble-solver/dictionaries@2.13.7 build
> tsc --project .

> @scrabble-solver/dictionaries@2.13.7 postbuild
> node ./bin/update-dictionaries.js

> @scrabble-solver/solver@2.13.7 build
> tsc --project .

> @scrabble-solver/scrabble-solver@2.13.7 build
> env-cmd next build

  ▲ Next.js 14.2.4
  - Environments: .env

   Linting and checking validity of types  .
 ⚠ The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config

./src/components/Board/hooks/useBackgroundImage.tsx
201:1  Warning: File has too many lines (231). Maximum allowed is 200.  max-lines

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types
   Creating an optimized production build ...
Failed to compile.

./src/components/Alert/Alert.tsx
Module parse failed: The keyword 'interface' is reserved (8:0)
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 styles from './Alert.module.scss';
|
> interface Props extends HTMLProps<HTMLDivElement> {
|   children: ReactNode;
|   className?: string;

Import trace for requested module:
./src/components/Alert/Alert.tsx
./src/components/Alert/index.ts
./src/components/index.ts
./src/pages/404.tsx

./src/components/Badge/Badge.tsx
Module parse failed: The keyword 'interface' is reserved (6:0)
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 styles from './Badge.module.scss';
|
> interface Props {
|   children?: ReactNode;
|   className?: string;

Import trace for requested module:
./src/components/Badge/Badge.tsx
./src/components/Badge/index.ts
./src/components/index.ts
./src/pages/404.tsx

./src/components/Board/Board.tsx
Module parse failed: The keyword 'interface' is reserved (30:0)
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 { useBoardStyle, useFloatingActions, useFloatingFocus, useFloatingInputPrompt, useGrid } from './hooks';
|
> interface Props {
|   className?: string;
| }

Import trace for requested module:
./src/components/Board/Board.tsx
./src/components/Board/index.ts
./src/components/index.ts
./src/pages/404.tsx

./src/components/Button/Button.tsx
Module parse failed: The keyword 'interface' is reserved (9:0)
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 Link from './Link';
|
> interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
|   'aria-label': string;
|   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;

Import trace for requested module:
./src/components/Button/Button.tsx
./src/components/Button/index.ts
./src/components/index.ts
./src/pages/404.tsx

./src/components/Checkbox/Checkbox.tsx
Module parse failed: The keyword 'interface' is reserved (8:0)
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 styles from './Checkbox.module.scss';
|
> interface Props {
|   checked: boolean;
|   children?: ReactNode;

Import trace for requested module:
./src/components/Checkbox/Checkbox.tsx
./src/components/Checkbox/index.ts
./src/components/index.ts
./src/pages/404.tsx

> Build failed because of webpack errors
npm error Lifecycle script `build` failed with error:
npm error Error: command failed
npm error   in workspace: @scrabble-solver/scrabble-solver@2.13.7
npm error   at location: C:\Users\juliu\AppData\Roaming\npm\node_modules\scrabble-solver\packages\scrabble-solver

Am I missing something?

[kamilmielnik]

Hey @userdeadinterface, thanks for the report!

I just tried a fresh git clone + npm install + npm run build and everything went through just fine. I tried both Windows 10 and Ubuntu 22.04.

---

What Node.js version are you on (node -v)? (minimum supported is 20+) Are there any warnings or errors when running npm install?

[userdeadinterface]

Yes, I do get some depreciation warnings, as you can see in the attatched screenshot. I'm on version v20.14.0, which seems to be the latest full version. I would like to add that I installed it using "npm install -g scrabble-solver" and am building from the installed folder, maybe that's an issue?

[kamilmielnik]

I would like to add that I installed it using "npm install -g scrabble-solver" and am building from the installed folder, maybe that's an issue?

Oh, 100%.

npm install -g scrabble-solver installs a pre-built app, it's not meant to be used for development. If you want to develop it and rebuild, you need to clone the repository first. I'll update README to be specific about this.