frontarm / navi

🧭 Declarative, asynchronous routing for React.
https://frontarm.com/navi/
MIT License
2.07k stars 71 forks source link

Error: Uncaught [SecurityError: localStorage is not available for opaque origins] #148

Open AlysCole opened 5 years ago

AlysCole commented 5 years ago

Hello! I'm getting this error whenever I try to build my app:

navi-scripts: Using config at /directorytoapp/navi.config.js
Error: Uncaught [SecurityError: localStorage is not available for opaque origins]
    at reportException (/directorytoapp/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
    at processJavaScript (/directorytoapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:243:7)
    at HTMLScriptElementImpl._innerEval (/directorytoapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:168:5)
    at onLoadExternalScript (/directorytoapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:90:12)
    at onLoadWrapped (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/resources/per-document-resource-loader.js:53:33)
    at Object.check (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:76:23)
    at Promise.resolve.then (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:83:27) SecurityError: localStorage is not available for opaque origins
    at Window.get localStorage [as localStorage] (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/Window.js:240:15)
    at b (/static/js/main.ae90c729.chunk.js:1:206435)
    at Object.180 (/static/js/main.ae90c729.chunk.js:1:5543)
    at p (about:blank:1:526)
    at Object.308 (/static/js/main.ae90c729.chunk.js:1:45690)
    at p (about:blank:1:526)
    at Module.858 (/static/js/main.ae90c729.chunk.js:1:184742)
    at p (about:blank:1:526)
    at Object.478 (/static/js/main.ae90c729.chunk.js:1:150792)
    at p (about:blank:1:526)
Error: Uncaught [SecurityError: localStorage is not available for opaque origins]
    at reportException (/directorytoapp/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
    at processJavaScript (/directorytoapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:243:7)
    at HTMLScriptElementImpl._innerEval (/directorytoapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:168:5)
    at onLoadExternalScript (/directorytoapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:90:12)
    at onLoadWrapped (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/resources/per-document-resource-loader.js:53:33)
    at Object.check (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:76:23)
    at Promise.resolve.then (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/resources/resource-queue.js:83:27) SecurityError: localStorage is not available for opaque origins
    at Window.get localStorage [as localStorage] (/directorytoapp/node_modules/jsdom/lib/jsdom/browser/Window.js:240:15)
    at b (/static/js/main.ae90c729.chunk.js:1:206435)
    at Object.180 (/static/js/main.ae90c729.chunk.js:1:5543)
    at p (about:blank:1:526)
    at Object.308 (/static/js/main.ae90c729.chunk.js:1:45690)
    at p (about:blank:1:526)
    at Module.858 (/static/js/main.ae90c729.chunk.js:1:184742)
    at p (about:blank:1:526)
    at Object.478 (/static/js/main.ae90c729.chunk.js:1:150792)
    at p (about:blank:1:526)
[ohshit] An error occured while building your app
Couldn't find window.NaviScripts - did you call register()?
Error: Couldn't find window.NaviScripts - did you call register()?
    at crawl (/directorytoapp/node_modules/navi-scripts/lib/crawl.js:22:15)

The thing with my setup is that I initialized a blog with the create-react-blog command and copied the files into an existing React app. It worked with react-scripts start, but there seems to be an issue with jsdom and the navi-scripts build command. react-scripts build runs without a hitch, but the entire build grinds to a halt when it gets to navi-scripts build.

Any idea what might be causing this issue? I thought it might be related to issue #87.

AlysCole commented 5 years ago

This is what my package.json looks like, currently.

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
    "@fortawesome/free-brands-svg-icons": "^5.7.2",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "apollo-boost": "^0.4.1",
    "apollo-link-ws": "^1.0.18",
    "auth0-js": "^9.10.0",
    "blueimp-md5": "^2.3.0",
    "brace": "^0.11.1",
    "feed": "^2.0.2",
    "graphql": "^14.1.1",
    "import-all.macro": "^2.0.3",
    "jwt-decode": "^2.2.0",
    "loadable-components": "^2.2.2",
    "lodash": "^4.17.11",
    "navi": "^0.13.3",
    "navi-scripts": "^0.13.3",
    "netlify-cli": "^2.6.0",
    "prismjs": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-ace": "^6.4.0",
    "react-adopt": "^0.6.0",
    "react-apollo": "^2.5.2",
    "react-click-outside": "^3.0.1",
    "react-content-loader": "^4.2.1",
    "react-dom": "^16.8.6",
    "react-dropzone": "^10.0.1",
    "react-ga": "^2.5.3",
    "react-grid-system": "^4.4.3",
    "react-gtm-module": "^2.0.8",
    "react-helmet": "^5.2.0",
    "react-motion-drawer": "^3.1.0",
    "react-navi": "^0.13.3",
    "react-navi-helmet-async": "^0.13.3",
    "react-notify-toast": "^0.5.0",
    "react-popover": "^0.5.7",
    "react-quill": "^1.3.1",
    "react-redux": "^6.0.1",
    "react-responsive-modal": "^3.6.0",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^4.3.1",
    "react-router-hash-link": "^1.2.1",
    "react-scripts-mdx": "^3.0.3",
    "react-select": "^2.4.2",
    "react-smooshpack": "^0.0.56",
    "react-sortable-tree": "2.2.0",
    "react-sortable-tree-theme-full-node-drag": "^1.1.0",
    "react-splitter-layout": "^4.0.0",
    "react-tabs": "^3.0.0",
    "react-textarea-autosize": "^7.1.0",
    "react-window-size": "^1.2.0",
    "redux": "^4.0.0",
    "redux-form": "^8.1.0",
    "rimraf": "^2.6.2",
    "runkit-embed-react": "^1.0.0",
    "simple-react-validator": "^1.0.7",
    "slugify": "^1.3.2",
    "styled-components": "^4.1.3",
    "subscriptions-transport-ws": "^0.9.16"
  },
  "scripts": {
    "predeploy": "npm run build",
    "start": "react-scripts start",
    "build": "react-scripts build && navi-scripts build",
    "analyze": "rm -rf bundle && source-map-explorer 'build/static/js/*.js' --html bundle/analyze.html",
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(react-smooshpack|react-sortable-tree|react-splitter-layout|react-quill|react-day-picker|simple-line-icons|react|react-apollo)/)\"",
    "eject": "react-scripts eject",
    "serve": "navi-scripts serve",
    "deploy": "netlify deploy --dir=build",
    "deploy:prod": "netlify deploy --dir=build --prod"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.13.2",
    "enzyme-to-json": "^3.3.5",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jest": "^22.3.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "gh-pages": "^2.0.1",
    "prettier": "^1.16.4",
    "react-test-renderer": "^16.8.6",
    "redux-mock-store": "^1.5.3",
    "source-map-explorer": "^2.0.0"
  }
}

I previously tried using yarn's resolutions config to use version 11.11.0, as suggested here. I've also tried setting it to use a newer version, 13.2.0 and 14.0.0 and even the latest version. No dice.

I've also tried setting testURL in Jest's config but, because I'm using create-react-app`, that config option isn't available to me. Besides, based on this pull request, create-react-app should've resolved that issue a long time ago.