Nuxt.js: Error: Could not compile template

Created on 14 Mar 2018  路  9Comments  路  Source: nuxt/nuxt.js

Hello! I'm working on my project, today switched from npm to pnpm and when node_modules is installed with pnpm i got the following error:

Error: Could not compile template D:\work\au2revsite\site\node_modules\.registry.npmjs.org\nuxt\1.4.0\node_mod ules\nuxt\lib\app\App.js: Cannot resolve "bootstrap/dist/css/bootstrap.css" from "D:\work\au2revsite\site\bootstra p\dist\css\bootstrap.css"

  • builder.js:471 Promise.all.templatesFiles.map
    [site]/[1.4.0]/[nuxt]/lib/builder/builder.js:471:17``

I have in dependencies:

"dependencies": {
"ajv": "^6.2.1",
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.2",
"jquery": "^3.3.1",
"nuxt": "^1.0.0",
"vue-style-loader": "^4.0.2",
"webp-loader": "^0.2.1",
"webpack": "^3.11.0"
},

How to fix this?

This question is available on Nuxt.js community (#c2619)
question

Most helpful comment

Hello, i have a similar problem. When I finished developing the feature_A branch, I switched to the develop branch. It is found that the material-design-icons dependency package does not exist. The following error message occurs when the npm run dev is executed.

Error: Could not compile template /Users/x/work/x-project/x-front/node _modules/nuxt/lib/app/App.js: Cannot resolve "material-design-icons/iconfont/material-icons.css" from "/Users/x/work/x-project/x-front/material-design-icons/iconfont/material-icons.css"

  • builder.js:471 Promise.all.templatesFiles.map
    [x-front]/[nuxt]/lib/builder/builder.js:471:17

Delete the old node_modules folder in project root dir.
$ sudo rm -rf node_modules

Then re-execute npm i

Finally, execute npm run dev

I wish you good luck : )

All 9 comments

Hello, i have a similar problem. When I finished developing the feature_A branch, I switched to the develop branch. It is found that the material-design-icons dependency package does not exist. The following error message occurs when the npm run dev is executed.

Error: Could not compile template /Users/x/work/x-project/x-front/node _modules/nuxt/lib/app/App.js: Cannot resolve "material-design-icons/iconfont/material-icons.css" from "/Users/x/work/x-project/x-front/material-design-icons/iconfont/material-icons.css"

  • builder.js:471 Promise.all.templatesFiles.map
    [x-front]/[nuxt]/lib/builder/builder.js:471:17

Delete the old node_modules folder in project root dir.
$ sudo rm -rf node_modules

Then re-execute npm i

Finally, execute npm run dev

I wish you good luck : )

I have same problem. It occur because I don't have npm module "node-sass" and "sass-loader" but have css section in nuxt.config.js

I added stylus and stylus-loader and added

    css: [
        '@/assets/css/main.styl'
    ],

I also tried '~/assets'

to my nuxt.config.js

Got same problem.

When starting npm run dev:

root@martin ~/dev/test/strapi-ssf/public                                                           [11:28:09]
> # npm run dev

> [email protected] dev ~/test/public
> nuxt

  nuxt:build App root: ~/test/public +0ms
  nuxt:build Generating ~/test/public/.nuxt files... +2ms
  nuxt:build Generating files... +30ms
  nuxt:build Generating routes... +19ms

 ERROR

  Error: Could not compile template ~/test/public/node_modules/nuxt/lib/app/App.js: Cannot resolve "@/assets/css/main.styl" from "~/test/public/assets/css/main.styl"

  - builder.js:471 Promise.all.templatesFiles.map
    [public]/[nuxt]/lib/builder/builder.js:471:17

When saving the nuxt config while in development mode:

  nuxt:build [nuxt.config.js] changed +0ms
  nuxt:build Rebuilding the app... +2ms

 ERROR

  TypeError: Cannot read property 'close' of null

  - builder.js:695 Builder.unwatch
    [public]/[nuxt]/lib/builder/builder.js:695:37

  - nuxt-dev:121 Promise.resolve.then
    [public]/[nuxt]/bin/nuxt-dev:121:35

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

Update: The path was wrong! Updated it and now it builds

how did u update the path? @MartinMuzatko

@jjhesk have you made sure the path is correct?

D:\work\au2revsite\site\bootstra p\dist\css\bootstrap.css"
didn't you install bootstrap via npm? In that case you would look for that in 'bootstrap' rather than '~/boostrap/dist/css/boostrap.css`. You'd only do that if you directly placed the entire bootstrap folder into the project folder.

What does your nuxt.config.js say, and how does your folder structure look like?

Because this issue seems to be inactive for quite some time, I'll close it now. If you feel like it deserves some attention because it's not fixed, feel free to ping me and I'll reopen it.

This worked for me

  plugins: [
    '~/../plugins/vuetify'
  ],
  css: [
    '~/../assets/style/app.styl'
  ],

Using @ instead of ~ also works.

Seems like the "base path" is starting from client directory

{
  plugins: [
    '~plugins/vuetify'
  ],
  css: [
    '~assets/style/app.styl'
  ]
}

should work as well :thinking: (depending where your sourceDir path is set)

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

uptownhr picture uptownhr  路  3Comments

gary149 picture gary149  路  3Comments

vadimsg picture vadimsg  路  3Comments

shyamchandranmec picture shyamchandranmec  路  3Comments

jaredreich picture jaredreich  路  3Comments