This is a really good tutorial Willem. Unfortunately I had a few issues getting it working on my environment.
There are a few issues with some of the sample files - the packages.json provided is invalid, even after removing the 'deleted' line and the plus signs. Should there be a "script" tag there, with an opening curly brace?
Also the webpack file is throwing errors:
[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 'overlay'.
By removing the DevServer element I was able to get it to compile and run, but then am striking Javascript errors on the Index page:
Uncaught TypeError: (0 , auth_userWEBPACK_IMPORTED_MODULE_0_.userAuthState) is not a function
at checkAuthContent (main.bundle.js:143934)
But thank you for your article anyway - it was valuable in getting to understand the Amplify stack.
Thank you for the kind words and picking up on those issues.
For future readers:
I've updated the tutorial slightly, including the missing "scrips:" tag in the package.json file.
The error regarding the Dev Server has to do with the npm install ... command installing the latest versions of packages listed under "devDependencies:". If one were to replace the latest versions with those of the tutorial, it will work. Just remember to run npm install again when replacing any devDependancies items.
As I recall, this is fundementally a problem with Amplify and breaking changes in Webpack 5, which in turn has to do with changes in standards in module loading that have yet to be resolved in many underlying packages that Amplify uses, although don't quote me on that.
One can confirm that this is an ongoing issue as even AWS haven't updated their JS Amplify tutorials (see docs.amplify.aws/start/getting-sta...), where they currently have the devDependancies listed as:
This is a really good tutorial Willem. Unfortunately I had a few issues getting it working on my environment.
There are a few issues with some of the sample files - the packages.json provided is invalid, even after removing the 'deleted' line and the plus signs. Should there be a "script" tag there, with an opening curly brace?
Also the webpack file is throwing errors:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
By removing the DevServer element I was able to get it to compile and run, but then am striking Javascript errors on the Index page:
Uncaught TypeError: (0 , auth_userWEBPACK_IMPORTED_MODULE_0_.userAuthState) is not a function
at checkAuthContent (main.bundle.js:143934)
But thank you for your article anyway - it was valuable in getting to understand the Amplify stack.
Thank you for the kind words and picking up on those issues.
For future readers:
I've updated the tutorial slightly, including the missing
"scrips:"tag in the package.json file.The error regarding the Dev Server has to do with the
npm install ...command installing the latest versions of packages listed under"devDependencies:". If one were to replace the latest versions with those of the tutorial, it will work. Just remember to runnpm installagain when replacing anydevDependanciesitems.As I recall, this is fundementally a problem with Amplify and breaking changes in Webpack 5, which in turn has to do with changes in standards in module loading that have yet to be resolved in many underlying packages that Amplify uses, although don't quote me on that.
One can confirm that this is an ongoing issue as even AWS haven't updated their JS Amplify tutorials (see docs.amplify.aws/start/getting-sta...), where they currently have the devDependancies listed as:
If anyone has a resolution to this, pelase feel free to leave a comment, I'd love to keep this tutorial updated for future users.