[Solved] Getting Set Up not running

Trying to using the step-by-step process of:

When running


npm run start

Output:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'publicPath'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

Also
npm start build
produces warning: clean-webpack-plugin: options.output.path not defined. Plugin disabled

Tried out the steps and did not get as far as you.

Needed to do

npm install -g typescript

before

tsc --init

would work

Then doing

npm install --save-dev typescript webpack ts-loader webpack-cli

led to

$ npm install --save-dev typescript webpack ts-loader webpack-cli
npm WARN @babylonjs/inspector@4.2.0 requires a peer of @types/react@>=16.7.3 but none is installed. You must install peer dependencies yourself.
npm WARN @babylonjs/inspector@4.2.0 requires a peer of @types/react-dom@>=16.0.9 but none is installed. You must install peer dependencies yourself.
npm WARN bjs-temp@1.0.0 No description
npm WARN bjs-temp@1.0.0 No repository field.

npm ERR! code EPERM
npm ERR! syscall rename
npm ERR! path C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json.3938245996
npm ERR! dest C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json.3938245996' -> 'C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json'
npm ERR!  [OperationalError: EPERM: operation not permitted, rename 'C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json.3938245996' -> 'C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, rename 'C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json.3938245996' -> 'C:\Users\johnk\Documents\BJS TEMP\node_modules\fast-deep-equal\package.json'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'rename',
npm ERR!     path: 'C:\\Users\\johnk\\Documents\\BJS TEMP\\node_modules\\fast-deep-equal\\package.json.3938245996',
npm ERR!     dest: 'C:\\Users\\johnk\\Documents\\BJS TEMP\\node_modules\\fast-deep-equal\\package.json'        
npm ERR!   },
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'rename',
npm ERR!   path: 'C:\\Users\\johnk\\Documents\\BJS TEMP\\node_modules\\fast-deep-equal\\package.json.3938245996',
npm ERR!   dest: 'C:\\Users\\johnk\\Documents\\BJS TEMP\\node_modules\\fast-deep-equal\\package.json',
npm ERR!   parent: 'BJS TEMP'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\johnk\AppData\Roaming\npm-cache\_logs\2021-10-09T09_00_28_105Z-debug.log

pinging @RaananW @msDestiny14

As it is the weekend you may have to wait for a reply

w000t this is really strange… It looks like you are not using the same version of webpack cli / dev server as we do … which is weird considering we have a lock file :frowning:

@RaananW do you have any idea ?

The command should probably be ‘npm install’ without the names of the dependencies, as we have the dependencies in package.json.
Can I ask both of you if you see a got change in your package.json? Was the webpack version updated?

After doing an nmp install then

npm install --save-dev typescript webpack ts-loader webpack-cli

installs OK but won’t have time to check further until tomorrow.

It appears that there are at least 2 missing steps in the instructions as the first post link.

Ohhh that is strange as they are all part of the package.json so they should be all installed for you :frowning:

By adding in an

npm install

and making sure that the newly created file was webpack.config.js was closed

everything seemed to install OK.

As did @Todilo when I got to npm run build I got the error message

clean-webpack-plugin: options.output.path not defined. Plugin disabled...

and on

npm run start
clean-webpack-plugin: options.output.path not defined. Plugin disabled...
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

Perhaps someone who knows more of what they are doing could start with a blank root folder and follow the instructions step by step to see if they have the same problem.

I wonder if you could be using webpack 5 somehow (you should double check you have webpack only in the root folder node_modules installed and not in tools/gulp)

@sebavan @RaananW I think we might be talking at cross purposes.

The question is NOT about developing Babylon.js it is about writing a game using BJS. There is no tools folder let alone a gulp one.

Please check out the link given it is from the Guided Learning section of the docs not from Diving Deeper/Develop with Babylon.js

1 Like

OHHHHHH you are so right @JohnK :slight_smile: @RaananW will revisit the guide soon and I guess it is probably even more the webpack 5 issue I am thinking about clean-webpack-plugin: options.output.path not defined. Plugin disabled... · Issue #194 · johnagan/clean-webpack-plugin · GitHub

basically the setup should change a bit and the plugin would not be needed.

1 Like

Sorry didn’t get any notifications(my fault). I actually though this was guide getting started Babylon when I started. I just wanted to run it outside the online or the IDE (so directly from VSCode) and found this instructions.

It does seem to install webpack 5 which doesn’t seem to be what the author has written the guide for. The syntax of the webserver part has been changed which is unfortunate since googling “Getting started babylonjs” will render that link as a top suggestion.

Is there a getting started local development?
My goal is not to make a game but dabbling with a medical application, hopefully BabylonJS is the tool for me.

If you work through this section it includes local

1 Like

Of course, we hope so too.

The getting started guide and our playground might be a good place to start. There is also this project for more advanced usage - GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.

1 Like

Thank you. I will work my way too to bottom!

Wait, what was the fix for this? I’m new to webpack and everything has been working well with ThreeJS. Thought I’d give Babylon a go and can’t get past installation.

I also get:
“Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.” when running “npm run start”

Any help for a noob much appreciated.

Hi @marcio, no fix as yet it is still to be done.

If you want to to get started and look at an overview of babylon.js features and local builds then start here Welcome to Getting Started with Babylon.js | Babylon.js Documentation.

You can come back to the more advanced game development at Introduction To Creating Games | Babylon.js Documentation later.

OK thanks, I’m taking a look at the docs - are you saying that I cannot run a local project via webpack currently?

I have updated the getting setup guide to support webpack 5, will be up in a sec

No just the docs needed updating - which are being done as per previous post

Ok great, thanks. Cleared my cache and reloaded the page and waiting for the updated info.