mix.version() error: Error: ENOENT: no such file or directory, open '/css/app.css' #1326

sebastiansulinski · 2017-11-18T12:15:47Z

I'm using standalone version of laravel-mix@1.6.1 with npm@5.5.1 and I'm only compiling scss file:

let mix = require('laravel-mix');

mix
    .setPublicPath('/')
    .sass('scss/app.scss', 'css/')
    .sourceMaps()
    .version();

When run with version() it throws an error:

fs.js:646
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/css/app.css'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
...

When I remove call to version() - it does compile without any issues, but of course, manifest does not have version parameter.

I also tried to changing the public path to the relative ./:

let mix = require('laravel-mix');

mix
    .setPublicPath('./')
    .sass('scss/app.scss', 'css/')
    .sourceMaps()
    .version();

but this has resulted with the same error (except for the path, which now was showing as absolute) and mix-manifest.json has cut first letter from the directory - still without the version present:

{
    "/ss/app.css": "/ss/app.css"
}

The text was updated successfully, but these errors were encountered:

sebastiansulinski · 2017-11-18T12:37:37Z

Changing to standaloneSass('scss/app.scss', 'css/') magically resolved the issue.

mix
    .setPublicPath('./')
    .standaloneSass('scss/app.scss', 'css/')
    .sourceMaps()
    .version();

sebastiansulinski · 2017-11-18T12:48:57Z

It seems I've closed it too early.
After compiling for production, I've noticed that it messed up some styling - adding :hover event to many elements - looks like standaloneSass might be having some trouble parsing some scss.

When I tried to compile for production with sass but without version - everything works fine except for the fact that I cannot have versioning in manifest, which is quite important for my project.

Also, using standaloneSass method did not product source maps.

The only time that I've managed to make it work with version is when I set public path to anything else than root of the project i.e. setPublicPath('./dist') - this way everything renders fine.

bretterer · 2017-12-22T23:49:43Z

Any update on this @JeffreyWay .. I am also having this problem... My config is

mix.setPublicPath(`./`);

mix.sass('assets/sass/app.scss', 'css')
    .js('assets/js/app.js', 'js')
    .sourceMaps()
    .version();

it then creates the mix-manifest.json file as

{
    "/js/app.js": "/js/app.js",
    "/ss/app.css": "/ss/app.css"
}

I am doing this inside of a WordPress Theme.

Here is the error log

yarn run dev
yarn run v0.27.5
$ npm run development

> @ development /Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting                                                                      

 DONE  Compiled successfully in 1109ms                                                                                                                                                            6:47:13 PM

fs.js:652
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/ss/app.css'
    at Object.fs.openSync (fs.js:652:18)
    at Object.fs.readFileSync (fs.js:553:33)
    at File.read (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/laravel-mix/src/File.js:180:19)
    at File.version (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/laravel-mix/src/File.js:190:25)
    at Manifest.hash (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/laravel-mix/src/Manifest.js:55:65)
    at manifest.forEach.file (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:79:47)
    at Array.forEach (<anonymous>)
    at CustomTasksPlugin.applyVersioning (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:79:18)
    at Compiler.compiler.plugin.stats (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:12:22)
    at Compiler.applyPlugins (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/tapable/lib/Tapable.js:61:14)
    at emitRecords.err (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/Compiler.js:264:11)
    at Compiler.emitRecords (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/Compiler.js:371:38)
    at emitAssets.err (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/Compiler.js:258:10)
    at applyPluginsAsyncSeries1.err (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/Compiler.js:364:12)
    at next (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/Compiler.js:361:9)
    at require.forEach.err (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/webpack/lib/Compiler.js:350:15)
    at /Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/async/dist/async.js:1050:13)
    at /Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/async/dist/async.js:958:16
    at /Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:135:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development 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/bretterer/.npm/_logs/2017-12-22T23_47_13_311Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And here is the full debug.log file

cat /Users/bretterer/.npm/_logs/2017-12-22T23_47_13_311Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.4.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'development' ]
2 info using npm@5.4.2
3 info using node@v8.4.0
4 verbose run-script [ 'predevelopment', 'development', 'postdevelopment' ]
5 info lifecycle @~predevelopment: @
6 info lifecycle @~development: @
7 verbose lifecycle @~development: unsafe-perm in lifecycle true
8 verbose lifecycle @~development: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/.bin:/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/.bin:/Users/bretterer/.config/yarn/link/node_modules/.bin:/Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer/node_modules/.bin:/Users/bretterer/.config/yarn/link/node_modules/.bin:/usr/local/Cellar/node/8.4.0/bin:/usr/local/Cellar/node/8.4.0/lib/node_modules/npm/bin/node-gyp-bin:/usr/local/Cellar/node/8.4.0/bin/node_modules/npm/bin/node-gyp-bin:/Users/bretterer/.rvm/gems/ruby-2.1.4/bin:/Users/bretterer/.rvm/gems/ruby-2.1.4@global/bin:/Users/bretterer/.rvm/rubies/ruby-2.1.4/bin:./vendor/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/sbin:/sbin:/Users/bretterer/.composer/vendor/bin:/Users/bretterer/.spark:/Users/bretterer/.rvm/bin
9 verbose lifecycle @~development: CWD: /Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer
10 silly lifecycle @~development: Args: [ '-c',
10 silly lifecycle   'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle @~development: Returned: code: 1  signal: null
12 info lifecycle @~development: Failed to exec development script
13 verbose stack Error: @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:280:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:927:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
14 verbose pkgid @
15 verbose cwd /Users/bretterer/Code/brianretterer/wp-content/themes/brianretterer
16 verbose Darwin 17.3.0
17 verbose argv "/usr/local/Cellar/node/8.4.0/bin/node" "/usr/local/bin/npm" "run" "development"
18 verbose node v8.4.0
19 verbose npm  v5.4.2
20 error code ELIFECYCLE
21 error errno 1
22 error @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
22 error Exit status 1
23 error Failed at the @ development script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Running Laravel-Mix 1.7.2
Node: v8.4.0
NPM: 5.4.2
Yarn: v0.27.5

Ringelnatz · 2017-12-27T19:48:32Z

Same problem here.

mix.setPublicPath('./')
mix.js('resources/assets/js/app.js', 'public/js/app.js')
   .sass('resources/assets/sass/app.scss', 'public/css/app.css')
   .version()

produces

{
    "/public/js/app.js": "/public/js/app.js",
    "/ublic/css/app.css": "/ublic/css/app.css"
}

and therefore the error Error: ENOENT: no such file or directory, open '[...]/ublic/css/app.css' when running npm run dev.
setPublicPath to "public" works but is not what I want because it then stores the manifest file in the public directory.

laravel-mix 1.7.2
Node: 8.4.0
NPM: 5.6.0

EDIT: Related to #1373
Leaving out setPublicPath does not work for me either (using standalone without Laravel), getting another error then.

jericopulvera · 2018-01-04T23:41:21Z

Same problem stand alone php

fs.js:641
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: ENOENT: no such file or directory, open '/js/app.js'

mix.js('resources/js/app.js', 'js/app.js')
    .sass('resources/sass/app.scss', 'css/app.css');
    if (mix.inProduction()) {
        mix.version();
        mix.webpackConfig({
          plugins: [
            new purgeCss({
              paths: glob.sync([
                path.join(__dirname, '/index.php'),
                path.join(__dirname, '/resources/js/**/*.vue')
              ]),
              extractors: [
                {
                  extractor: class {
                    static extract(content) {
                      return content.match(/[A-z0-9-:\/]+/g)
                    }
                  },
                  extensions: ['html', 'js', 'php', 'vue']
                }
              ]
            })
          ]
        })
      }

lnpbk · 2018-01-10T19:23:54Z

I had a problem using Mix in a Craft project with this minimal webpack.mix.jsfile:

mix.sass('./resources/scss/main.scss', 'web/css')
    .version();

With the above, the mix-manifest.json file was generated alongside the webpack.mix.js file, and didn't contain hashed values.

I used the setPublicPath() method before calling tasks, and removed the web directory from the output path, and everything worked as expected.

mix.setPublicPath('./web')
    .sass('./resources/scss/main.scss', 'css')
    .version();

andyblackwell · 2018-01-12T00:05:33Z

since the public path is currently used straight in a regex, it's the . that was causing errors for me.
I was able to get around it for now by calling path.resolve() on the relative path.

mix.setPublicPath(path.resolve('./'))

infinity0n3 · 2018-02-08T01:50:09Z

Have tries to use laravel-mix in another project but had issues with getting all the output files in the desired path.
Turns out that laravel-mix checks if it can find ./artisan in which case it sets publicPath = 'public'.

Doing mix.setPublicPath('public') made all the js, css, font and mix-manifest files end up in public directory.

My specific case was this

mix.setPublicPath('static')
    .js('colibriprint/resources/assets/js/app.js', 'static/js')
    .sass('colibriprint/resources/assets/sass/app.scss', 'static/css')
    .version();

sifex · 2018-02-25T10:05:21Z

For those looking for a better solution, often the output of the error is caused by:

mix.webpackConfig({
    ...
    output: {
        publicPath: "/",
    }
    ...
});

Think I stackoverflow'ed from elsewhere and unintentionally caused this error. If you require that public path in your webpack config, then yea, you can use .setPublicPath('...') as mentioned before :)

stale · 2018-12-04T19:41:38Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

n7olkachev · 2019-11-13T20:01:41Z

setPublicPath('public') may help you while dockerization with multi-stage builds, because mix will not set it if artisan file doesn't exist.

abdennour · 2020-06-19T00:01:16Z

Yep ! @andyblackwell . your comment saves my day

sebastiansulinski closed this as completed Nov 18, 2017

sebastiansulinski reopened this Nov 18, 2017

DiaaEddin mentioned this issue Jan 10, 2018

Editing Manifest normalizePath method to escape Config.publicPath special characters #1407

Merged

stale bot added the stale label Dec 4, 2018

stale bot closed this as completed Dec 7, 2018

caendesilva mentioned this issue May 22, 2023

ENOENT upon npm watch hydephp/hyde#224

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mix.version() error: Error: ENOENT: no such file or directory, open '/css/app.css' #1326

mix.version() error: Error: ENOENT: no such file or directory, open '/css/app.css' #1326

sebastiansulinski commented Nov 18, 2017 •

edited

Loading

sebastiansulinski commented Nov 18, 2017

sebastiansulinski commented Nov 18, 2017 •

edited

Loading

bretterer commented Dec 22, 2017

Ringelnatz commented Dec 27, 2017 •

edited

Loading

jericopulvera commented Jan 4, 2018 •

edited

Loading

lnpbk commented Jan 10, 2018

andyblackwell commented Jan 12, 2018

infinity0n3 commented Feb 8, 2018

sifex commented Feb 25, 2018

stale bot commented Dec 4, 2018

n7olkachev commented Nov 13, 2019

abdennour commented Jun 19, 2020

mix.version() error: Error: ENOENT: no such file or directory, open '/css/app.css' #1326

mix.version() error: Error: ENOENT: no such file or directory, open '/css/app.css' #1326

Comments

sebastiansulinski commented Nov 18, 2017 • edited Loading

sebastiansulinski commented Nov 18, 2017

sebastiansulinski commented Nov 18, 2017 • edited Loading

bretterer commented Dec 22, 2017

Ringelnatz commented Dec 27, 2017 • edited Loading

jericopulvera commented Jan 4, 2018 • edited Loading

lnpbk commented Jan 10, 2018

andyblackwell commented Jan 12, 2018

infinity0n3 commented Feb 8, 2018

sifex commented Feb 25, 2018

stale bot commented Dec 4, 2018

n7olkachev commented Nov 13, 2019

abdennour commented Jun 19, 2020

sebastiansulinski commented Nov 18, 2017 •

edited

Loading

sebastiansulinski commented Nov 18, 2017 •

edited

Loading

Ringelnatz commented Dec 27, 2017 •

edited

Loading

jericopulvera commented Jan 4, 2018 •

edited

Loading