Custom Class Generation exits with and error when running Webpack DEV Server

[w8ski]

Hello,

I keep running into the same issue when using 'g-custom-class' mixin.

The log suggested to update npm and node to their latest versions, so I did. However, the problem remains.

Everything works fine when I comment out custom class generation.

Grid initiation:

@import 'gridle-flex';

// setting up the grid
$settings : (
    context : 24,           // number of columns in your grid
    gutter-width : 20px,    // size of the gutters
    gutter-height : 0,      // size of top and bottom gutters
    gutter-top    : 0,      // size of top gutter
    gutter-bottom : 0,      // size of bottom gutter
    gutter-left   : 10px,   // size of left gutter
    gutter-right  : 10px,   // size of right gutter
    direction : ltr         // if need to generate support for dir="rtl" in order to set part of layout direction
);

@include g-setup ($settings);

// make the use of media queries really easy
@include g-register-state ( xs, (
    max-width : 480px
) );
@include g-register-state ( sm , (
    min-width : 480px
) );
@include g-register-state ( md, (
    min-width : 768px
) );
@include g-register-state ( lg, (
    min-width : 1024px
) );
@include g-register-state ( xl, (
    min-width : 1224px
) );

// even with full custom queries :
@include g-register-state ( landscape, (
    query : "(orientation : landscape)"
) );

// generate classes :
@include g-classes ( );

// generate a custom class for all the states
@include g-custom-class( ( 'center', '@', '%state' ) ) {
    text-align : center;
}

Complete error log:

1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using npm@5.6.0
3 info using node@v8.9.4
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle theme-testing@1.0.0~predev: theme-testing@1.0.0
6 info lifecycle theme-testing@1.0.0~dev: theme-testing@1.0.0
7 verbose lifecycle theme-testing@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle theme-testing@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Projects\theme-testing\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\Microsoft Service Fabric\bin\Fabric\Fabric.Code;C:\Program Files\Microsoft SDKs\Service Fabric\Tools\ServiceFabricLocalClusterManager;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Users\SimonWierzchowski\AppData\Local\Microsoft\WindowsApps;C:\Users\SimonWierzchowski\AppData\Local\atom\bin;C:\Users\SimonWierzchowski\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code Insiders\bin;C:\Program Files\Heroku\bin;C:\Users\SimonWierzchowski\AppData\Roaming\npm;C:\Program Files\Microsoft VS Code\bin
9 verbose lifecycle theme-testing@1.0.0~dev: CWD: C:\Projects\theme-testing
10 silly lifecycle theme-testing@1.0.0~dev: Args: [ '/d /s /c',
10 silly lifecycle   'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js' ]
11 silly lifecycle theme-testing@1.0.0~dev: Returned: code: 3221225477  signal: null
12 info lifecycle theme-testing@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: theme-testing@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
13 verbose stack Exit status 3221225477
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid theme-testing@1.0.0
15 verbose cwd C:\Projects\theme-testing
16 verbose Windows_NT 10.0.15063
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
18 verbose node v8.9.4
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 3221225477
22 error theme-testing@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
22 error Exit status 3221225477
23 error Failed at the theme-testing@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 3221225477, true ]```

[w8ski]

I'm re-opening the issue as the problem remains. It seems that webpack exits because of '%' sign in '%state' string. I'm not sure if this is down to UTF-8 charset or something else??

[olivierbossel]

Hi man, Can you give me more infos on this? Your sass version, etc...? Thanks in advance