stephengrider / lyrical-graphql Goto Github PK

Great Course. Learning something is tough, but the biggest headache is experiencing errors when you follow the course line by line. I came across this error in the 34th lesson, which integrate ApolloClient and ApolloProvidor, and I come across these 2 errors

1. Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

2. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

I don't know if it just needs module updating or what, but mLab doesn't even exist anymore.

I bought the tutorial on udemy yesterday thinking it was new.

when I press the LikeLyric button, it says NaN then it says the likes.

this
to
this

When added the following code:

<ApolloProvider client = {client}> 
  <SongList />
</ApolloProvider>

);

Error raised:

bundle.js:356 Warning: Failed prop type: Invalid prop children of type array supplied to ApolloProvider, expected a single ReactElement.
in ApolloProvider (created by Root)
in Root
printWarning @ bundle.js:356
warning @ bundle.js:380
checkReactTypeSpec @ bundle.js:23382
validatePropTypes @ bundle.js:9514
createElement @ bundle.js:9557
Root @ bundle.js:10124
(anonymous) @ bundle.js:14175
measureLifeCyclePerf @ bundle.js:13944
_constructComponentWithoutOwner @ bundle.js:14174
_constructComponent @ bundle.js:14149
mountComponent @ bundle.js:14057
mountComponent @ bundle.js:2649
performInitialMount @ bundle.js:14240
mountComponent @ bundle.js:14127
mountComponent @ bundle.js:2649
mountComponentIntoNode @ bundle.js:8196
perform @ bundle.js:4260
batchedMountComponentIntoNode @ bundle.js:8218
perform @ bundle.js:4260
batchedUpdates @ bundle.js:17871
batchedUpdates @ bundle.js:1283
_renderNewRootComponent @ bundle.js:8412
_renderSubtreeIntoContainer @ bundle.js:8493
render @ bundle.js:8514
_hyphenPattern @ bundle.js:10133
webpack_require @ bundle.js:20
module.exports @ bundle.js:66
(anonymous) @ bundle.js:69
bundle.js:305 Uncaught Error: React.Children.only expected to receive a single React element child.
at invariant (bundle.js:305)
at Object.onlyChild [as only] (bundle.js:23428)
at ApolloProvider.render (bundle.js:11678)
at bundle.js:14665
at measureLifeCyclePerf (bundle.js:13944)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:14664)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:14691)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:14231)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:14127)
at Object.mountComponent (bundle.js:2649)

awesome tutorial!
tiny spelling stuff, in case you care:
https://github.com/StephenGrider/Lyrical-GraphQL/blob/master/server/schema/root_query_type.js#L28

parNEtValue > parENtValue

When I running this code after 'npm install' with 'npm run dev' it's showing this error

`webpack: Compiled successfully.
[nodemon] Internal watch failed: watch /home/arpit/Lyrical-GraphQL/node_modules/caniuse-db/region-usage-json/IE.json ENOSPC

npm ERR! Linux 4.4.0-112-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.12.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: nodemon index.js --ignore client
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'nodemon index.js --ignore client'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the lyrical package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! nodemon index.js --ignore client
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs lyrical
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls lyrical`

Love your courses.
Just that in this one, react router 3 was used. I modified the code to 4 and if it is fine will open a PR to merge it with branch with comments explaining the code.

I've successfully mutated the to add a new song and navigate back to songList component. However, as shown in the video, the songlist should be reflected with the new song automatically, but in my case, I have to manually refresh again in order to see the new song in the list?

I have an issue during initial setting up during following of the course.

Namely, I have an error as soon as I start using Apollo client:
Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I have tried to install prop-types and import them inside of SongList.js. Even due I'm not using anywhere React.PropTypes

Probably my problem is lying down inside of some already used library, but I cannot see exactly where, since webpack has been used and all errors are pointing to the bundle.js

If somebody can support it will be useful.

[nodemon] 1.9.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index.js`
/Users/me/Desktop/websites/lyrical/server/models/song.js:24
        .then(([lyric, song]) => song);
               ^

SyntaxError: Unexpected token [
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/arcomito/Desktop/websites-dev/lyrical/server/models/index.js:1:63)
    at Module._compile (module.js:398:26)
    at Object.Module._extensions..js (module.js:405:10)
[nodemon] app crashed - waiting for file changes before starting...

I'm getting the above error on startup

Sorry , but i am new at using webpack and I want to create a build for this project, i tried putting script under package.json file like

"scripts": {
"dev": "nodemon index.js --ignore client",
"build": "webpack"
},

and in webpack config file is like,
module.exports = {
entry: './client/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader'
}
],
rules: [
{
use: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /.css$/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html'
})
]
};

I can not run the build, I have no idea whether I have created the build correctly or not. Please guide me to create the build for this project.

When using mutating with addLyricToSong like the following query:

mutation {
  addLyricToSong(songId: "5b0d32945cc5987c7dac2170", content: "xxxx") {
    lyrics {
      content
      song {
        title
      }
    }
  }
}

you run in the following error:

{
  "data": {
    "addLyricToSong": null
  },
  "errors": [
    {
      "message": "Unknown modifier: $pushAll",
      "locations": [
        {
          "line": 45,
          "column": 3
        }
      ],
      "path": [
        "addLyricToSong"
      ]
    }
  ]
}

This problem is reported here: Automattic/mongoose#5574.

I will make a PR with the fix

I had some difficulties installing the repository but I solved these issues and want to share with you how to fix them

//first 👍 git clone the repository then git clone it and fix some issues

git clone https://github.com/StephenGrider/Lyrical-GraphQL
cd Lyrical-GraphQL
npm i
npm audit fix
npm audit fix --force

npm install -g [email protected]
npm install --save-dev [email protected]

//inside the file server.js put your mongodb URI that you get from mongoDB site
//copy your Very OWN MONGO_URI the one below is not real

const MONGO_URI = 'mongodb+srv://:@clust0-l1g02.mongodb.net/test';

//then add {useUnifiedTopology: true, useNewUrlParser: true}

mongoose.connect(MONGO_URI, {
useUnifiedTopology: true,
useNewUrlParser: true,
});

Hi,

I'm loving your course 👍

I faced an issue though in Section 8 / Lecture 48 where after creating a new song with title, after the mutation is finished and React route back to song list, the new song does not show there.

After some digging I found this to be addressed here:
https://stackoverflow.com/questions/52232459/gql-doesnt-automatically-invoke-query

Cheers,
Masi

How did you go from the way you had your schema set up in part 1 (users and queries) to the way you have it set up here? You skipped that ENTIRE section

While moving to another route like "localhost:4000/songs-new" , it gives error Can not GET /songs-new.
I'm using latest react-router and react-router-dom.

I guess the issue is from server.js file.

I just forked it and update all packages to the latest version. Students can fork this project for practice nowadays (#32 ).

Any bugfix is appreciate.

Getting this error after running npm run dev -
{ Error: read ECONNRESET
at TCP.onStreamRead (internal/stream_base_commons.js:111:27) name: 'MongoError', message: 'read ECONNRESET'
}
But after that it says - Connected to MongoLab instance.

Now when I try to run a query from GraphiQL, it gives error not authorized on lyricaldb to execute command { insert: "songs", ordered: false, writeConcern: { w: 1 }, $db: "lyricaldb" }

On mutations.js, deleteSong's mutation is using findOneAndRemove method which removes the wrong ID. I would suggest to switch to findByIdAndRemove, otherwise on the apollo client mutation one is forced to use the _id workaround.

Hi! Thanks for the Udemy course. There's problem with version of package.

> [email protected] dev /Users/anvlkv/Projects/graphql-course-2
> nodemon index.js --ignore client

[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index.js`
Listening
(node:41478) DeprecationWarning: `open()` is deprecated in mongoose >= 4.11.0, use `openUri()` instead, or set the `useMongoClient` option if using `connect()` or `createConnection()`
Db.prototype.authenticate method will no longer be available in the next major release 3.x as MongoDB 3.6 will only allow auth against users in the admin db and will no longer allow multiple credentials on a socket. Please authenticate using MongoClient.connect with auth credentials.
(node:41478) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): MongoError: Authentication failed.
Error connecting to MongoLab: { MongoError: Authentication failed.
    at Function.MongoError.create (/Users/anvlkv/Projects/graphql-course-2/node_modules/mongoose/node_modules/mongodb-core/lib/error.js:31:11)
    at /Users/anvlkv/Projects/graphql-course-2/node_modules/mongoose/node_modules/mongodb-core/lib/connection/pool.js:497:72
    at authenticateStragglers (/Users/anvlkv/Projects/graphql-course-2/node_modules/mongoose/node_modules/mongodb-core/lib/connection/pool.js:443:16)
    at Connection.messageHandler (/Users/anvlkv/Projects/graphql-course-2/node_modules/mongoose/node_modules/mongodb-core/lib/connection/pool.js:477:5)
    at Socket.<anonymous> (/Users/anvlkv/Projects/graphql-course-2/node_modules/mongoose/node_modules/mongodb-core/lib/connection/connection.js:321:22)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at readableAddChunk (_stream_readable.js:176:18)
    at Socket.Readable.push (_stream_readable.js:134:10)
    at TCP.onread (net.js:548:20)
  name: 'MongoError',
  message: 'Authentication failed.',
  ok: 0,
  code: 18,
  errmsg: 'Authentication failed.' }
Hash: c5c1a61fae5f1dd0af11
Version: webpack 2.6.1
Time: 1863ms
     Asset       Size  Chunks                    Chunk Names
 bundle.js     726 kB       0  [emitted]  [big]  main
index.html  309 bytes          [emitted]         
chunk    {0} bundle.js (main) 704 kB [entry] [rendered]
    [0] ./~/process/browser.js 5.42 kB {0} [built]
    [8] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
   [10] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
   [15] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
   [18] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
   [19] ./~/react/lib/React.js 2.69 kB {0} [built]
   [79] ./~/react-dom/index.js 59 bytes {0} [built]
   [80] ./~/react/react.js 56 bytes {0} [built]
   [81] ./client/index.js 498 bytes {0} [built]
  [109] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
  [171] ./~/react/lib/ReactDOMFactories.js 5.53 kB {0} [built]
  [172] ./~/react/lib/ReactPropTypes.js 15.8 kB {0} [built]
  [173] ./~/react/lib/ReactPureComponent.js 1.32 kB {0} [built]
  [174] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
  [176] ./~/react/lib/onlyChild.js 1.34 kB {0} [built]
     + 163 hidden modules
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  544 kB       0  
    chunk    {0} index.html 541 kB [entry] [rendered]
        [0] ./~/lodash/lodash.js 540 kB {0} [built]
        [1] ./~/html-webpack-plugin/lib/loader.js!./client/index.html 616 bytes {0} [built]
        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
        [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.```

I believe there's an issue either with the db model or the addLyrics mutation