How to resolve Cannot import module '@nuxt/builder'?

Question

So I recently created a new project at home using .NET Core with a Nuxt.js front-end.

I know the site ran when it was just a Vue app. I know the site ran when it was a base Nuxt.js app after following this post .

Then I wanted to add some features we use on the Nuxt project I inherited at work but I'm running into this error when I try to build it.

 FATAL  Cannot import module '@nuxt/builder'                                                                                                  16:16:47  

  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
  at Function.Module._load (internal/modules/cjs/loader.js:890:27)
  at Module.require (internal/modules/cjs/loader.js:1080:19)
  at n (node_modules\jiti\dist\v8cache.js:2:2472)
  at Object.<anonymous> (node_modules\webpack-dev-middleware\dist\utils\setupHooks.js:8:39)
  at Module.o._compile (node_modules\jiti\dist\v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
  at Module.load (internal/modules/cjs/loader.js:1040:32)
  at Function.Module._load (internal/modules/cjs/loader.js:929:14)
  at Module.require (internal/modules/cjs/loader.js:1080:19)

I can see that @nuxt/builder is referenced in my package-lock.json file at work, but it is not referenced in the package.json file.

I tried installing the 'missing' package in my home project yet the error remains.

It feels like - from what I've read - that this package is built into Nuxt in some fashion, but that Nuxt has lost it's marbles and isn't finding it.

What can I do to fix this as there are no examples I can find through searching that covers this specific failure, so I'm blocked and don't know how to move forward. I'd prefer not to start all over again, plus I'm keen to understand the root cause.

Any help is truly appreciated.

Answer 1

In my case, I removed package-lock.json and node_modules, then re-run

npm install

npm run build

Answer 2

For those in the same boat as I was, think critically.

If something feels wrong it probably is. Revert your changes if possible until your project works again, then be sure to test each addition/change as they're made.

In my case I turned a bunch of settings off and removed packages that were ultimately not needed (ie webpack and @nuxt/builder as they're a part of Nuxt as I suspected) then followed the steps above until things started working again.

Answer 3

I was stuck on this error for an hour. The stack trace was:

 ERROR  Cannot import module '@nuxt/builder'                                                                                  15:17:39

  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
  at Function.Module._load (internal/modules/cjs/loader.js:667:27)
  at Module.require (internal/modules/cjs/loader.js:887:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at Object.<anonymous> (node_modules/@nuxt/friendly-errors-webpack-plugin/src/core/extractWebpackError.js:4:26)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
  at Module.load (internal/modules/cjs/loader.js:863:32)
  at Function.Module._load (internal/modules/cjs/loader.js:708:14)
  at Module.require (internal/modules/cjs/loader.js:887:19)

I looked into node_modules/@nuxt/friendly-errors-webpack-plugin/src/core/extractWebpackError.js and on L4 I saw this:

const RequestShortener = require('webpack/lib/RequestShortener')

On a hunch I ran npm ls webpack and saw an unmet peer dependency. I then ran npm install --save-dev webpack and the error was fixed.

Answer 4

1. rm package-lock.json
2. rm -r node_modules
3. npm i
4. npm run build