Nuxt 3 APP Failed to resolve module specifier "Vue"

Hi, i`m trying to deploy a nuxt 3 app and I’m getting a blank page, along with the message: Uncaught TypeError: Failed to resolve module specifier “Vue”. Relative references must start with either “/”, “./”, or “…/”.
On my computer I can build and start it without problems as you can see in the image.

Hi @weellingtonc

Can you share the site name you are deploying to?

1 Like

yeah, https://rainbow-muffin-dbdc67.netlify.app

How are you building the app?

I found this on Stack Overflow

on my local computer I give yarn run build and then yarn run start, and it works normally!
in netlify it takes from the git repository and does the same, but it generates this error! no build error is generated, follow the logs:

6:38:31 PM: Build ready to start
6:38:39 PM: build-image version: d7b3dbfb0846505993c9a131894d1858074c90b4 (focal)
6:38:39 PM: build-image tag: v4.10.1
6:38:39 PM: buildbot version: 37262c48b1f3cfa88c6caed707d29b19aef6a5a7
6:38:39 PM: Fetching cached dependencies
6:38:39 PM: Starting to download cache of 489.1MB
6:38:43 PM: Finished downloading cache in 3.945444521s
6:38:43 PM: Starting to extract cache
6:38:48 PM: Finished extracting cache in 4.635475724s
6:38:48 PM: Finished fetching cache in 8.648162618s
6:38:48 PM: Starting to prepare the repo for build
6:38:49 PM: Preparing Git Reference refs/heads/main
6:38:50 PM: Parsing package.json dependencies
6:38:50 PM: Starting build script
6:38:50 PM: Installing dependencies
6:38:50 PM: Python version set to 2.7
6:38:51 PM: Started restoring cached node version
6:38:52 PM: Finished restoring cached node version
6:38:52 PM: v16.17.0 is already installed.
6:38:52 PM: Now using node v16.17.0 (npm v8.15.0)
6:38:52 PM: Started restoring cached build plugins
6:38:52 PM: Finished restoring cached build plugins
6:38:52 PM: Attempting ruby version 2.7.2, read from environment
6:38:53 PM: Using ruby version 2.7.2
6:38:53 PM: Using PHP version 8.0
6:38:53 PM: Started restoring cached yarn cache
6:38:56 PM: Finished restoring cached yarn cache
6:38:57 PM: No yarn workspaces detected
6:38:57 PM: Started restoring cached node modules
6:38:57 PM: Finished restoring cached node modules
6:38:57 PM: Installing NPM modules using Yarn version 1.22.10
6:38:57 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
6:38:57 PM: npm WARN config location in the cache, and they are managed by
6:38:57 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
6:38:57 PM: yarn install v1.22.10
6:38:57 PM: [1/5] Validating package.json...
6:38:57 PM: [2/5] Resolving packages...
6:38:57 PM: success Already up-to-date.
6:38:57 PM: Done in 0.25s.
6:38:57 PM: NPM modules installed using Yarn
6:38:57 PM: Started restoring cached go cache
6:38:57 PM: Finished restoring cached go cache
6:38:57 PM: Installing Go version 1.17 (requested 1.17)
6:39:04 PM: unset GOOS;
6:39:04 PM: unset GOARCH;
6:39:04 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
6:39:04 PM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
6:39:04 PM: go version >&2;
6:39:04 PM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
6:39:04 PM: go version go1.17 linux/amd64
6:39:04 PM: Installing missing commands
6:39:04 PM: Verify run directory
6:39:05 PM: ​
6:39:05 PM: ────────────────────────────────────────────────────────────────
6:39:05 PM:   Netlify Build                                                 
6:39:05 PM: ────────────────────────────────────────────────────────────────
6:39:05 PM: ​
6:39:05 PM: ❯ Version
6:39:05 PM:   @netlify/build 27.17.1
6:39:05 PM: ​
6:39:05 PM: ❯ Flags
6:39:05 PM:   baseRelDir: true
6:39:05 PM:   buildId: 6320f85730a1260008f96eba
6:39:05 PM:   deployId: 6320f85730a1260008f96ebc
6:39:05 PM: ​
6:39:05 PM: ❯ Current directory
6:39:05 PM:   /opt/build/repo
6:39:05 PM: ​
6:39:05 PM: ❯ Config file
6:39:05 PM:   No config file was defined: using default values.
6:39:05 PM: ​
6:39:05 PM: ❯ Context
6:39:05 PM:   production
6:39:05 PM: ​
6:39:05 PM: ────────────────────────────────────────────────────────────────
6:39:05 PM:   1. Build command from Netlify app                             
6:39:05 PM: ────────────────────────────────────────────────────────────────
6:39:05 PM: ​
6:39:05 PM: $ nuxt build
6:39:05 PM: [log] Nuxi 3.0.0-rc.9
6:39:05 PM: [log] Nuxt 3.0.0-rc.9 with Nitro 0.5.0
6:39:10 PM: [warn] `autoImports:sources` hook is deprecated. Use `imports:sources` with `nuxt>=3.0.0-rc.9`.
6:39:10 PM: [warn] `autoImports:extend` hook is deprecated. Use `addImports()` from `@nuxt/kit` or `imports:extend` with `nuxt>=3.0.0-rc.9`.
6:39:16 PM: [warn] 'Vue' is imported by Vue?commonjs-external, but could not be resolved – treating it as an external dependency
6:39:22 PM: [warn] 
6:39:22 PM: (!) Some chunks are larger than 500 KiB after minification. Consider:
6:39:22 PM: - Using dynamic import() to code-split the application
6:39:22 PM: - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
6:39:22 PM: - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
6:39:22 PM: [info] Client built in 11358ms
6:39:22 PM: [info] Building server...
6:39:26 PM: [warn] 'Vue' is imported by Vue?commonjs-external, but could not be resolved – treating it as an external dependency
6:39:30 PM: [warn] 
6:39:30 PM: (!) Some chunks are larger than 500 KiB after minification. Consider:
6:39:30 PM: - Using dynamic import() to code-split the application
6:39:30 PM: - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
6:39:30 PM: - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
6:39:30 PM: [success] Server built in 7878ms
6:39:30 PM: [success] [nitro] Generated public dist
6:39:30 PM: [info] [nitro] Initializing prerenderer
6:39:31 PM: [info] [nitro] Prerendering 3 routes
6:39:31 PM: [log] [nitro]   ├─ / (9ms) 
6:39:31 PM: [log] [nitro]   ├─ /200.html (1ms) 
6:39:31 PM: [log] [nitro]   ├─ /404.html (1ms) 
6:39:31 PM: [start] [nitro] Building server...
6:39:32 PM: [start] [nitro] Writing server bundle...
6:39:32 PM: [success] [nitro] Server built
6:39:32 PM:   ├─ .netlify/functions-internal/server/server.mjs (384 B) (244 B gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/package.json (569 B) (265 B gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/nitro/aws-lambda.mjs.map (16.9 kB) (3.06 kB gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/nitro/aws-lambda.mjs (13.8 kB) (4.46 kB gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/handlers/renderer.mjs.map (16.9 kB) (2.95 kB gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/handlers/renderer.mjs (13.1 kB) (4.13 kB gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/error-500.mjs.map (1.04 kB) (371 B gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/error-500.mjs (4.26 kB) (1.83 kB gzip)
6:39:32 PM:   ├─ .netlify/functions-internal/server/chunks/app/client.manifest.mjs.map (20.2 kB) (1.78 kB gzip)
6:39:32 PM:   └─ .netlify/functions-internal/server/chunks/app/client.manifest.mjs (27.8 kB) (2.9 kB gzip)
6:39:32 PM: Σ Total size: 2.73 MB (625 kB gzip)
6:39:32 PM: ​
6:39:32 PM: (build.command completed in 27.6s)
6:39:32 PM: ​
6:39:32 PM: ────────────────────────────────────────────────────────────────
6:39:32 PM:   2. Functions bundling                                         
6:39:32 PM: ────────────────────────────────────────────────────────────────
6:39:32 PM: ​
6:39:32 PM: Packaging Functions from .netlify/functions-internal directory:
6:39:32 PM:  - server/server.js
6:39:32 PM: ​
6:39:33 PM: ​
6:39:33 PM: (Functions bundling completed in 466ms)
6:39:33 PM: ​
6:39:33 PM: ────────────────────────────────────────────────────────────────
6:39:33 PM:   3. Deploy site                                                
6:39:33 PM: ────────────────────────────────────────────────────────────────
6:39:33 PM: ​
6:39:33 PM: Starting to deploy site from 'dist'
6:39:33 PM: Creating deploy tree 
6:39:33 PM: Creating deploy upload records
6:39:33 PM: 50 new files to upload
6:39:33 PM: 1 new functions to upload
6:39:40 PM: Site deploy was successfully initiated
6:39:40 PM: ​
6:39:40 PM: (Deploy site completed in 6.7s)
6:39:40 PM: ​
6:39:40 PM: ────────────────────────────────────────────────────────────────
6:39:40 PM:   Netlify Build Complete                                        
6:39:40 PM: ────────────────────────────────────────────────────────────────
6:39:40 PM: ​
6:39:40 PM: (Netlify Build completed in 34.8s)
6:39:40 PM: Starting post processing
6:39:40 PM: Post processing - HTML
6:39:40 PM: Caching artifacts
6:39:40 PM: Started saving node modules
6:39:40 PM: Finished saving node modules
6:39:40 PM: Started saving build plugins
6:39:40 PM: Finished saving build plugins
6:39:40 PM: Started saving yarn cache
6:39:40 PM: Post processing - header rules
6:39:40 PM: Post processing - redirect rules
6:39:40 PM: Post processing done
6:39:44 PM: Site is live ✨
6:39:46 PM: Finished saving yarn cache
6:39:46 PM: Started saving pip cache
6:39:46 PM: Finished saving pip cache
6:39:46 PM: Started saving emacs cask dependencies
6:39:46 PM: Finished saving emacs cask dependencies
6:39:46 PM: Started saving maven dependencies
6:39:46 PM: Finished saving maven dependencies
6:39:46 PM: Started saving boot dependencies
6:39:46 PM: Finished saving boot dependencies
6:39:46 PM: Started saving rust rustup cache
6:39:46 PM: Finished saving rust rustup cache
6:39:46 PM: Started saving go dependencies
6:39:46 PM: Finished saving go dependencies
6:39:46 PM: Build script success
6:39:59 PM: Uploading Cache of size 489.2MB
6:40:05 PM: Finished processing build request in 1m25.411298743s

about stackoverflow, he’s talking about vue, in my case it’s nuxt, he even recommends using vite, which is already used by default in nuxt.

What is the start script in the package.json? Does it run Nuxt in dev mode? If it is, then running yarn run build beforehand makes no difference.

If you want to test a production build, run yarn run build then npx serve <your-build-directory>. This will serve the build locally for you to test. I suspect you will see the same error then as you do when Netlify builds.

Failing that, please share a public repository for others to test.