Unable to execute npm run build (webpack error) in Next.js project?

Question

I've been developing this application for a few months and am able to run npm run dev fine. Today I tried to do a npm run build for the first time and keep getting this strange error every time . It's really frustrating as I'm trying to launch this month.

Some context next-transpile-modules was being used in the next.config.js but I removed it, and still received this same error. I've deleted my .next, and node_modules, updated dependencies and reinstalled multiple times tried multiple node versions. tried multiple next versions.

Current Versions

node: 16.13.0, next: 12.0.7, react: 17.0.2,

> HookWebpackError: Cannot read properties of undefined (reading 'length')

    at makeWebpackError (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\next\dist\compiled\webpack\bundle5.js:45539:9)
    at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\next\dist\compiled\webpack\bundle5.js:29467:12
    at eval (eval at create (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\next\dist\compiled\webpack\bundle5.js:140927:10), <anonymous>:34:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) -- inner error --

> TypeError: Cannot read properties of undefined (reading 'length')

        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\static\css\cf0a424279fe9c8d.css:1622:3
        at p.exports (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:156203) 
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:52141
        at Array.forEach (<anonymous>)
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:52070
        at walk (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:156826)      
        at ValueParser.walk (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:152133)
        at optimise (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:51669)   
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\postcss\lib\container.js:91:18
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\postcss\lib\container.js:74:18
        at Rule.each (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\postcss\lib\container.js:60:16)
    

    **caused by plugins in Compilation.hooks.processAssets** <- This part interest's me

    

> TypeError: Cannot read properties of undefined (reading 'length')

        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\static\css\cf0a424279fe9c8d.css:1622:3
        at p.exports (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:156203) 
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:52141
        at Array.forEach (<anonymous>)
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:52070
        at walk (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:156826)      
        at ValueParser.walk (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:152133)
        at optimise (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:51669)   
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\postcss\lib\container.js:91:18
        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\postcss\lib\container.js:74:18
        at Rule.each (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\postcss\lib\container.js:60:16)

> **Build failed because of webpack errors**

this might help: stackoverflow.com/questions/52724312/…

about14sheep
– about14sheep

2022-01-02 17:24:59 +00:00
Commented Jan 2, 2022 at 17:24 — about14sheep
– about14sheep, Commented Jan 2, 2022 at 17:24

Sebastian Colon · Accepted Answer · 2022-01-03 08:51:39Z

1

Solved :

The issue seemed to be a class in my globals.css file. I ended up removing a bunch of the classes and tried to do a build and it worked fine. I don't know exactly what in the CSS was causing the issue , but I know after removing this class and a few others it seemed to run fine.

.glass-container-dark{
  /* background: linear-gradient(to bottom left, rgba(14, 9, 11, 0.6), rgba(45,46,52,0.9)); */
  

  background: linear-gradient(to 98deg, rgba(224, 224, 224, 0.7), rgb(187, 187, 187));

  border-radius: 1rem;
  margin: 0.5rem 0rem;
  padding:1rem;

  /* width: 250px !important;
  height: 170px !important; */
  box-shadow: 2px 2px 10px rgba(12, 12, 12, 0.612);

  
}

answered Jan 3, 2022 at 8:51

Sebastian Colon

316 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to execute npm run build (webpack error) in Next.js project?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related