1

This is my first app and first time trying to deploy and I'm facing an error I really don't know how to fix. This is what I'm getting when I run "npm run build"

PS C:\Users\julyj\Desktop\CODING\00 - Proton Media\BloCurate> npm run build

> [email protected] build
> next build

(node:11768) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\julyj\Desktop\CODING\00 - Proton Media\BloCurate\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
Loaded env from C:\Users\julyj\Desktop\CODING\00 - Proton Media\BloCurate\.env.local
Failed to compile.

./components/AllAssets/index.tsx:32:8
Type error: Object is possibly 'undefined'.

  30 |   return (
  31 |     <ul>
> 32 |       {assets.map((result) => {
     |        ^
  33 |         const {
  34 |           collection: { name },
  35 |           data: { image },
info  - Creating an optimized production build .
PS C:\Users\julyj\Desktop\CODING\00 - Proton Media\BloCurate>

I tried looking up (node:11768) [DEP0148] and there was a suggestion about changing a format under node modules from "./" to "./*" but that didn't fix the error. I'm not sure if the error is being caused by that or if it's the type error that's shown below.

Although it says info - Creating an optimized production build at the bottom, it doesn't create the build folder. Not sure if I need to post more information here but I'll gladly do so if requested in order to solve this issue.

Improve this question
2
  • 2
    The DeprecationWarning seems to actually just be a warning. The real error is "Type error: Object is possibly 'undefined'" in your index.tsx file. That is Typescript strict type checking you, and you should either assert to Typescript that assets will not be "undefined": assets!.map( or use optional chaining: assets?.map(
    – Bao Huynh Lam
    Commented Mar 20, 2022 at 20:34
  • 1
    DeprecationWarning is, as the name suggests, just a warning. The Type error is your problem. You should check for null / undefined with ? or some if statement prior to the return.
    – Mushroomator
    Commented Mar 20, 2022 at 20:34

1 Answer 1

Reset to default
1

The real error seems to be the TypeError in your TypeScript code. This can be fixed in two ways.

1. You can add the following code.

assets!.map( // ...

This tells TypeScript that the object will never have the value of undefined. Therefore, it will infer that the type is array, instead of array | undefined.

2. You can add the following code.

assets?.map( // ...

This code works both in JavaScript and TypeScript. The method used in this option is called optional chaining. It basically tells JavaScript/TypeScript that if assets is undefined, then it will not use the map() method, instead of throwing an error.

Extra: The DeprecationWarning can be safely ignored; it won't cause any issues with your deployment.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.