SyntaxError: Unexpected reserved word

[jednano]

I'm getting the following error:

$ gulp css
import neatCore from './neat-core.es6.js';
^^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (z:\xxx\node_modules\postcss-neat\index.js:3:18)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

Using the following processors:

require('postcss-mixins')({
    mixins: require('postcss-neat')()
}),
require('postcss-nested'),
require('postcss-each'),
require('postcss-for'),
require('postcss-conditionals'),
require('cssnext')(),
require('autoprefixer-core')()

[karantin2020]

Hello.
Have the same problem.
I think that it is server side error. Use if (process.env.BROWSER) ... like in https://github.com/gpbl/isomorphic500

[karantin2020]

Can you help me?

Undefined mixin span-columns
    .container {
      @mixin span-columns 4;
      ^

What is that? Postcss-loader includes in webpack are:
postcssMixins({mixins: postcssNeat}), postcssNested, postcssSimpleVars

[jo-asakura]

@jedmao, @karantin2020, sorry for the late reply. It requires you to use babel-core/register because it uses ES6 syntax. Add the following line require('postcss-neat/es6-reg'); to the top of your gulp file like it's shown in gulp usage example in the beginning of README.

[joekrill]

@jo-asakura check out the note on the babel site regarding this. es6-reg.js uses the require hook, which really shouldn't be used for libraries because it can cause conflicts (it takes over ALL require calls -- not just those used by this library). Even worse, es6-reg.js sets ignore: false, so everything in node_modules is going to be affected, too.

I think the preferred way to handle this is to create a build that has already been run through babel before exporting to NPM (something like the way https://github.com/babel/babel-library-boilerplate handles it). Either that or I think you can use the babel runtime transformer.

[jednano]

@jo-asakura that does solve the immediate problem. What do you think about what @joekrill is saying?

[jo-asakura]

@jedmao, I fully agree with @joekrill's idea and will implement it once I have a free minute.

[joekrill]

@jo-asakura I just submitted a pull request (#5) that implements this, if you'd like to use it.

[qasimalyas]

I've just downloaded neat and started to play with it and I'm still getting this error. Below is my output. If this is unrelated then please let me know.

08:00:39] Using gulpfile ~/Desktop/grid-test/gulpfile.js
[08:00:39] Starting 'css'...
[08:00:39] 'css' errored after 109 ms
[08:00:39] /Users/qasim/Desktop/grid-test/node_modules/postcss-neat/neat-mixins.es6.js:3
import neatCore from './neat-core.es6.js';
^^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/qasim/Desktop/grid-test/node_modules/postcss-neat/index.js:3:18)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

[jednano]

@qasimalyas it's the same problem I was having. See #4 (comment). @jo-asakura hasn't done a version bump yet on npm I think.

[qasimalyas]

Thanks @jedmao

That does seem to be case here. Surely the ticket should only be closed once NPM has been updated otherwise others will be getting the same issue and potentially reporting it again

[eduarddotgg]

i get

Undefined mixin outer-container
.container {
  @mixin outer-container;
  ^
}

I'm using webpack, my setup looks like this

var postcssNested       = require('postcss-nested');
var postcssMixins       = require('postcss-mixins');
var postcssNeat         = require("postcss-neat/es6-reg");

postcssNested, postcssMixins({mixins: postcssNeat})

[jo-asakura]

@Admdh, I suggest you drop the es6-reg (thanks to @joekrill) and use it the following way:

var postcssNested       = require('postcss-nested');
var postcssMixins       = require('postcss-mixins');
var postcssNeat         = require("postcss-neat");

postcssNested, postcssMixins({ mixins: postcssNeat() })

[eduarddotgg]

but than i get this message

import neatCore from './neat-core.es6.js';
SyntaxError: Unexpected reserved word

[jednano]

@Admdh you clearly have not read this thread.

[eduarddotgg]

i understand.. but I'm running webpack with node.js how can i setup babel so neat could work properly?

[jo-asakura]

@Admdh, make sure you're running 1.1.0 version of postcss-neat.

[eduarddotgg]

version update helped! i think that was the problem! thank you!