React-snap: Error: EISDIR: illegal operation on a directory, open...

[sensuikan1973]

@stereobooster
Would you tell me How to solve this error ?

$ yarn build
yarn run v1.10.1
$ /Users/sensuikan1973/ReactApp/homepage/node_modules/.bin/react-snap
 ️️️💬  console.log at /: Content is cached for offline use.
 ️️️💬  console.log at /: This web app is being served cache-first by a service worker. To learn more, visit https://goo.gl/SC7cgQ
 ️️️💬  console.log at /: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
✅  crawled 1 out of 6 (/)
 ️️️💬  console.log at /programming: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
 ️️️💬  console.log at /404.html: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
 ️️️💬  console.log at /othello: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
 ️️️💬  console.log at /memo: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
💬  in browser redirect (/)
⚠️  warning: 404 page title does not contain "404" string
💬  in browser redirect (/)
✅  crawled 2 out of 6 (/programming)
⚠️  warning: 404 page title does not contain "404" string
🔥  error at /404.html { Error: EISDIR: illegal operation on a directory, open '/Users/sensuikan1973/ReactApp/homepage/build/'
    at Object.openSync (fs.js:443:3)
    at Object.writeFileSync (fs.js:1205:35)
    at saveAsHtml (/Users/sensuikan1973/ReactApp/homepage/node_modules/react-snap/index.js:484:8)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
  errno: -21,
  syscall: 'open',
  code: 'EISDIR',
  path: '/Users/sensuikan1973/ReactApp/homepage/build/' }
💬  in browser redirect (/)
✅  crawled 4 out of 6 (/othello)
💬  in browser redirect (/)
✅  crawled 5 out of 6 (/memo)
 ️️️💬  console.log at /profile: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
💬  in browser redirect (/)
✅  crawled 6 out of 6 (/profile)

error Command failed with exit code 1.

[sensuikan1973]

this is package.json.

```.json
{
"name": "homepage",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.3.2",
"@material-ui/icons": "^3.0.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "1.7.0",
"@types/react-bootstrap": "^0.32.14",
"@types/styled-components": "^4.0.3",
"@types/jest": "^23.3.7",
"@types/node": "^10.12.0",
"@types/react": "^16.4.18",
"@types/react-dom": "^16.0.9",
"@types/react-router-dom": "^4.3.1",
"@types/react-helmet": "^5.0.7",
"node-pre-gyp": "^0.11.0",
"react": "16.7.0-alpha.0",
"react-bootstrap": "^0.32.4",
"react-dom": "16.7.0-alpha.0",
"react-router-dom": "4.4.0-beta.6",
"react-helmet": "^5.2.0",
"react-snap": "^1.21.0",
"react-scripts-ts": "3.1.0",
"styled-components": "^4.0.2",
"firebase": "^5.5.5",
"typescript": "^3.1.3"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"postbuild": "react-snap",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
}
}

this is index.tsx

```.js
import * as React from 'react'
import { hydrate, render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import App from './App'
import registerServiceWorker from './registerServiceWorker'

const root = document.getElementById('root') as HTMLElement
if (root.hasChildNodes()) {
  hydrate(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    root
  )
} else {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    root
  )
}
registerServiceWorker()

[stereobooster]

Something in your source code uses illegal protocol, for example htp:// instead of http://.

What is it exactly is hard to say, because there is no source of message is provided by API.

[sensuikan1973]

yarn start is OK. and no error.
So, I wonder if there is problem in postbuild...

[stereobooster]

yes error in postbuild step, react-snap uses headless chrome, and there is somewhere resource with illegal scheme in your source which makes browser (headless chrome) complain.

Also this is just a console.log, not an error, this is rather warning. Build itself fails because of error at /404.html { Error: EISDIR: illegal operation on a directory, open '/Users/sensuikan1973/ReactApp/homepage/build/'

By searching EISDIR: illegal operation on a directory I found this, for example,
https://stackoverflow.com/questions/34959038/npm-stuck-giving-the-same-error-eisdir-illegal-operation-on-a-directory-read-a

[stereobooster]

Also I noticed 💬 in browser redirect (/) it tries to crawl some pages, like /programming, but all pages are redirected in browser to /.

[sensuikan1973]

Thank you for teaching me very kindly.

perhaps, there is problem in directory constitution.
I'll search and report here later.

[sai-nagarjuna-t]

i am also facing the same issue and the build is failing with exit code 1.
following is the log

💬 in browser redirect (/)
⚠️ warning: 404 page title does not contain "404" string
🔥 error at /404.html { Error: EISDIR: illegal operation on a directory, open 'C:\Users\user\source\repos\web\home\build\'
at Object.openSync (fs.js:436:3)
at Object.writeFileSync (fs.js:1187:35)
at saveAsHtml (C:\Users\user\source\repos\web\node_modulesreact-snap\index.js:561:8)
at process._tickCallback (internal/process/next_tick.js:68:7)
errno: -4068,
syscall: 'open',
code: 'EISDIR',
path:
'C:\Users\user\source\repos\web\home\build\' }

[stereobooster]

This seems to be something windows related. I will not be able to help you with it, because I don't have access to windows machine.

[sai-nagarjuna-t]

I think it is caused because, react-snap is trying to create the same 404.html for the following redirect route.

<Route render={() => (<Redirect to="/" />)} />

@stereobooster do u have any solution to fix this.

[sai-nagarjuna-t]

This seems to be something windows related. I will not be able to help you with it, because I don't have access to windows machine.

ohh !! ok. my assumption is that it is trying to create the same 404.html for the routes "/" and redirected "/"

[stereobooster]

Oh maybe not. First reporter seems using Unix-like system. Maybe you right and it tries to create html files more than once.

[arashkevich25]

so, have you any solutions?

[sai-nagarjuna-t]

I have replaced the redirect route with the following and avoided the error

`Replace <Route render={() => (<Redirect to="/" />)} />` with 
<Route exact path="*" render={({ match }) => <Home match={match} />} />

but now it is showing a diff error for the repeated external url used in a page,

🔥 error at /https://app.myapp.com/registration { Error: EEXIST: file already exists, mkdir 'C:\Us
ers\user\source\repos\web\home\build'

I think this is a blocker, that needs to be looked into.

[arashkevich25]

my temporary resolve it's remove serviceWorker

[stereobooster]

I guess issue was introduced in this PR https://github.com/stereobooster/react-snap/pull/294

        if (routePath !== newPath) {
          console.log(`💬  in browser redirect (${newPath})`);
          filePath = path.join(destinationDir, newPath);
          await saveAsHtml({ page, filePath, options, route, fs });
        }

As a result it tries to write the same file more than once, and that is why it complains. Potential solution is to add this page to the queue instead of writing it immediately

[stereobooster]

Just published v1.23.0, which potentially fix the problem. If not - please open another ticket

[sensuikan1973]

@stereobooster
Thank you ver much !!!!!