import {resolve} from 'path' throws an error

[cbaxter713]

I've tried to implement this loader to load a global scss variable file in my nuxt project, but when I run npm run dev I get the following error:

(function (exports, require, module, filename, dirname) { import {resolve} from 'path' ^^^^^^ SyntaxError: Unexpected token import

Here is my nuxt.config.js:

import {resolve} from 'path'
module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt-community-starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  modules: [
    ['nuxt-sass-resources-loader', resolve(__dirname, 'assets/scss/variables.scss')]
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

Can you see what I am doing wrong? Seems like a simple setup but I can't get past that error

[anteriovieira]

Hi @cbaxter713 , the error is not related to the package.

Try changing the first line to: const resolve = require('path').resolve;

[anteriovieira]

@cbaxter713 have you configured .babelrc in your project?

[cbaxter713]

I have not. I am just using the nuxt-community/starter-template

[anteriovieira]

This seems to me to be some node module definition, try to do as I suggested above.

[anteriovieira]

What version of the node are you using?

[cbaxter713]

I am using 8.9.4. It seems like your fix for the resolve declaration helped, but now I am having issues with node-sass loading as a dependency

[cbaxter713]

What version of node should I be running? I am going to try a fresh nuxt build using: vue init nuxt-community/starter-template `

Unless you suggest a different nuxt setup

[anteriovieira]

but now I am having issues with node-sass loading as a dependency

Can you show me the error?

[cbaxter713]

I started a fresh project just to get this running, and after implementing the setup for nuxt-sass-resource-loader, I get the following error:

ERROR in ./pages/index.vue Module not found: Error: Can't resolve 'sass-loader' in '/Users/colinbaxter/repos/nuxt-basic/pages' @ ./pages/index.vue 4:2-494 @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

Do I just need to add sass-loader as a dev dependency?

[cbaxter713]

I install sass-loader, and I get:

npm WARN sass-loader@6.0.6 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.

[anteriovieira]

Install too node-sass

[cbaxter713]

Right, this is the problem I ran into before. When I install node-sass I get the following output:

`> node-sass@4.7.2 install /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass

node scripts/install.js

Unable to save binary /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/vendor/darwin-x64-57 : { Error: EACCES: permission denied, mkdir '/Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/vendor' at Object.fs.mkdirSync (fs.js:885:18) at sync (/Users/colinbaxter/repos/nuxt-basic/node_modules/mkdirp/index.js:71:13) at Function.sync (/Users/colinbaxter/repos/nuxt-basic/node_modules/mkdirp/index.js:77:24) at checkAndDownloadBinary (/Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/scripts/install.js:111:11) at Object. (/Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/scripts/install.js:154:1) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) errno: -13, code: 'EACCES', syscall: 'mkdir', path: '/Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/vendor' }

node-sass@4.7.2 postinstall /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass node scripts/build.js

Building: /usr/local/bin/node /Users/colinbaxter/repos/nuxt-basic/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp info it worked if it ends with ok gyp verb cli [ '/usr/local/bin/node', gyp verb cli '/Users/colinbaxter/repos/nuxt-basic/node_modules/node-gyp/bin/node-gyp.js', gyp verb cli 'rebuild', gyp verb cli '--verbose', gyp verb cli '--libsass_ext=', gyp verb cli '--libsass_cflags=', gyp verb cli '--libsass_ldflags=', gyp verb cli '--libsass_library=' ] gyp info using node-gyp@3.6.2 gyp info using node@8.9.4 | darwin | x64 gyp verb command rebuild [] gyp verb command clean [] gyp verb clean removing "build" directory gyp verb command configure [] gyp verb check python checking for Python executable "python2" in the PATH gyp verb which failed Error: not found: python2 gyp verb which failed at getNotFoundError (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:13:12) gyp verb which failed at F (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:68:19) gyp verb which failed at E (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:80:29) gyp verb which failed at /Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:89:16 gyp verb which failed at /Users/colinbaxter/repos/nuxt-basic/node_modules/isexe/index.js:42:5 gyp verb which failed at /Users/colinbaxter/repos/nuxt-basic/node_modules/isexe/mode.js:8:5 gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb which failed python2 { Error: not found: python2 gyp verb which failed at getNotFoundError (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:13:12) gyp verb which failed at F (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:68:19) gyp verb which failed at E (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:80:29) gyp verb which failed at /Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:89:16 gyp verb which failed at /Users/colinbaxter/repos/nuxt-basic/node_modules/isexe/index.js:42:5 gyp verb which failed at /Users/colinbaxter/repos/nuxt-basic/node_modules/isexe/mode.js:8:5 gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb which failed stack: 'Error: not found: python2\n at getNotFoundError (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:13:12)\n at F (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:68:19)\n at E (/Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:80:29)\n at /Users/colinbaxter/repos/nuxt-basic/node_modules/which/which.js:89:16\n at /Users/colinbaxter/repos/nuxt-basic/node_modules/isexe/index.js:42:5\n at /Users/colinbaxter/repos/nuxt-basic/node_modules/isexe/mode.js:8:5\n at FSReqWrap.oncomplete (fs.js:152:21)', gyp verb which failed code: 'ENOENT' } gyp verb check python checking for Python executable "python" in the PATH gyp verb which succeeded python /usr/bin/python gyp verb check python version /usr/bin/python -c "import platform; print(platform.python_version());" returned: "2.7.10\n" gyp verb get node dir no --target version specified, falling back to host node version: 8.9.4 gyp verb command install [ '8.9.4' ] gyp verb install input version string "8.9.4" gyp verb install installing version: 8.9.4 gyp verb install --ensure was passed, so won't reinstall if already installed gyp verb install version is already installed, need to check "installVersion" gyp verb got "installVersion" 9 gyp verb needs "installVersion" 9 gyp verb install version is good gyp verb get node dir target node version installed: 8.9.4 gyp verb build dir attempting to create "build" dir: /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/build gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/build' gyp ERR! System Darwin 17.2.0 gyp ERR! command "/usr/local/bin/node" "/Users/colinbaxter/repos/nuxt-basic/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass gyp ERR! node -v v8.9.4 gyp ERR! node-gyp -v v3.6.2 gyp ERR! not ok Build failed with error code: 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.7.2 postinstall: node scripts/build.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.7.2 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/colinbaxter/.npm/_logs/2018-01-26T17_20_30_272Z-debug.log `

[cbaxter713]

Any idea why the install of node-sass is failing? That seems to be the main issue here

[anteriovieira]

You appear to be having permission issues in this directory.

Unable to save binary /Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/vendor/darwin-x64-57 : { Error: EACCES: permission denied, mkdir '/Users/colinbaxter/repos/nuxt-basic/node_modules/node-sass/vendor'

[anteriovieira]

Can I see your package.json?

[cbaxter713]

package.json:

{ "name": "nuxt-basic", "version": "1.0.0", "description": "My wicked Nuxt.js project", "author": "Colin Baxter", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", "build": "nuxt build", "start": "cross-env NODE_ENV=production node server/index.js", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }, "dependencies": { "@nuxtjs/axios": "^4.4.0", "express": "^4.15.3", "nuxt": "^1.0.0", "vuetify": "^0.17.3" }, "devDependencies": { "babel-eslint": "^8.2.1", "cross-env": "^5.0.1", "eslint": "^4.15.0", "eslint-loader": "^1.7.1", "eslint-plugin-vue": "^4.0.0", "node-sass": "^4.7.2", "nodemon": "^1.11.0", "nuxt-sass-resources-loader": "^1.1.1", "sass-loader": "^6.0.6", "stylus": "^0.54.5", "stylus-loader": "^3.0.1" } }

[anteriovieira]

It seems to be related to this question https://github.com/angular/angular-cli/issues/6848

https://docs.npmjs.com/getting-started/fixing-npm-permissions

[cbaxter713]

Yeah I think you are correct about that. I will get it sorted out. Thanks for your help!

One last question. What would you recommend as the best way to fire up a nuxt project? the community starter template or the create-nuxt-app ?

[anteriovieira]

The vue-cli will to upgrade to version 3 soon, then the starter template of the nuxt may not have support so quickly. Now create-nuxt-app has received active support and does not follow the vue-cli template, so it will not be impacted by the version change.

But they are just my thoughts.

[cbaxter713]

Good to know. Thank you! I was able to resolve my npm global permission errors and have node-sass installed globally now. Thanks for your help

[anteriovieira]

I'm glad to have helped.

[anteriovieira]

What would you recommend as the best way to fire up a nuxt project? the community starter template or the create-nuxt-app ?

I threw your question in the discord. https://chat.vuejs.org/