Project does not build when configured payload-plugin-oauth plugin

[engmsilva]

I'm using node v16.17.0, Payload v1.6.26 and payload-plugin-oauth v0.2.0.

This is the configuration from the ~/app-payload/src/payload.config.ts file:

import { buildConfig } from 'payload/config';
import { oAuthPlugin } from 'payload-plugin-oauth'
import path from 'path';
// import Examples from './collections/Examples';
import Users from './collections/Users';

require('dotenv').config();

export default buildConfig({
  serverURL: 'http://localhost:3000',
  admin: {
    user: Users.slug,
  },
  collections: [
    Users,
    // Add Collections here
    // Examples,
  ],
  plugins: [
    oAuthPlugin({
      clientID: process.env.CLIENT_ID,
      clientSecret: process.env.CLIENT_SECRET,
      authorizationURL: process.env.OAUTH_SERVER + '/oauth2/default/v1/authorize',
      tokenURL: process.env.OAUTH_SERVER + '/oauth2/default/v1/token',
      callbackURL: process.env.SERVER_URL + '/authorization-code/callback',
      scope: 'openid profile email',
      async userinfo(accessToken) {
        const response = await fetch(`${process.env.OAUTH_SERVER}/oauth2/default/v1/userinfo?access_token=${accessToken}`);
        const user = await response.json();
        return {
          sub: user.ID,

          // Custom fields to fill in if user is created
          name: user.display_name || user.user_nicename || 'Naamloos',
          email: user.user_email,
          role: user.capabilities?.administrator ? 'admin' : 'user',
        }
      },
    }),
  ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
});

After running the npm run build command, it returns the error:

ERROR in main
Module not found: Error: Can't resolve './src' in ' ~/app-payload'
resolve './src' in ' ~/app-payload'
  using description file:  ~/app-payload/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file:  ~/app-payload/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
         ~/app-payload/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
         ~/app-payload/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
         ~/app-payload/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
         ~/app-payload/src.wasm doesn't exist
      as directory
        existing directory  ~/app-payload/src
          using description file:  ~/app-payload/package.json (relative path: ./src)
            using path:  ~/app-payload/src/index
              using description file:  ~/app-payload/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                   ~/app-payload/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                   ~/app-payload/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                   ~/app-payload/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                   ~/app-payload/src/index.wasm doesn't exist

webpack 5.76.3 compiled with 1 error and 1 warning in 275 ms

Any idea what could be going on?

[engmsilva]

At the suggestion of a Discord group member, I added the line of code below to the ~/app-payload/src/payload.config.ts. This allowed executing the project construction command without error.

admin: {
     user: Users.slug,
     webpack: (a) => a, // line of code added
   },

But when running the npm run dev command, it opens a blank screen with the below error in the browser console.

Uncaught TypeError: __webpack_require__(...).config is not a function
     at ./src/payload.config.ts (payload.config.ts:7:25)
     at __webpack_require__ (bootstrap:24:1)
     at fn (hot module replacement:62:1)
     at fn (hot module replacement:62:1)
     at ./node_modules/payload/dist/admin/Root.js (Root.js:8:42)
     at __webpack_require__ (bootstrap:24:1)
     at fn (hot module replacement:62:1)
     at fn (hot module replacement:62:1)
     at ./node_modules/payload/dist/admin/index.js (index.js:10:32)
     at __webpack_require__ (bootstrap:24:1)

Is there anything else I can do?

[thgh]

Hmm, that could be because I'm adding some dependencies to resolve.alias:

axios: false,
'passport-oauth2': false,
'express-session': false,
passport: false,

Do you use axios in the frontend? I removed the alias in v0.3.0 so it shouldn't be a problem anymore.

v0.3.0 has been refactored to not need a special password field. It may result in a slightly different user token tough.

[guillermoscript]

hello im using node 18.12.1 "payload": "^1.8.3", "payload-plugin-oauth": "^0.3.1", i added the webpack: (a) => a, // line of code added and when i try to build the app, it just stays building the app forever

[thgh]

I'm unable to reproduce, can you post a minimal example repository?