{"componentChunkName":"component---src-templates-post-js","path":"/blog/2020/07/07/snowpack-the-requested-module-web-modules-recoil-js-does-not-provide-an-export-named-recoil-root/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"c58f658c-a6e7-5c7b-8b47-b6d6a98802f1","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Snowpack - The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'\",\n  \"date\": \"2020-07-07\",\n  \"published\": true,\n  \"tags\": \"react, snowpack\",\n  \"author\": \"Sung M. Kim\",\n  \"banner\": \"./images/featured-image.jpg\",\n  \"bannerCredit\": \"Image by [zmortero](https://pixabay.com/users/zmortero-1348534/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247)\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"I started learning \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.snowpack.dev/\"\n  }), \"Snowpack\"), \" and have been pleased with the speed and development experience.\"), mdx(\"p\", null, \"As I was learning \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://recoiljs.org/\"\n  }), \"Recoil\"), \", a new React state management library by Facebook (but not by React core team), I was running into following error message.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Uncaught SyntaxError: The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'\")), mdx(\"p\", null, \"I will talk about how to get around the issue and this won't be about how to use Snowpack or Recoil.\"), mdx(\"h2\", null, \"Reproducing the error\"), mdx(\"p\", null, \"I used \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.snowpack.dev/#create-snowpack-app-(csa)\"\n  }), \"Create Snowpack App (CSA)\"), \" with a React template, \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/pikapkg/create-snowpack-app/tree/master/templates/app-template-react\"\n  }), \"@snowpack/app-template-react\"), \" to bootstrap a new React project.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"npx create-snowpack-app new-dir --template @snowpack/app-template-react --use-yarn\"))), mdx(\"p\", null, \"And then \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://recoiljs.org/docs/introduction/getting-started#installation\"\n  }), \"installed Recoil\"), \" as a dependency.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"yarn\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"add\"), \" recoil\"))), mdx(\"p\", null, \"I initially wrapped the root element with \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://recoiljs.org/docs/introduction/getting-started/#recoilroot\"\n  }), \"RecoilRoot\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" React \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'react'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" ReactDOM \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'react-dom'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" App \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'./App'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// imported \\uD83D\\uDC47 as shown in the Reoil doc\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// https://recoiljs.org/docs/introduction/getting-started/#recoilroot\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" RecoilRoot \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'recoil'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'./index.css'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\nReactDOM\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"render\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"React\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"StrictMode\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"RecoilRoot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"App \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"/\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"/\"), \"RecoilRoot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"/\"), \"React\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"StrictMode\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  document\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"getElementById\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'root'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// Learn more: https://www.snowpack.dev/#hot-module-replacement\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"if\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"meta\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"hot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"meta\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"hot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"accept\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"But then the error mentioned in the \\\"Introduction\\\" occurred.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/dcb264add0f54fe8f9d0335494c4a1e6/af659/error-in-browser.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.826254826254825%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQAEBv/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAcTg3Uh8hH//xAAaEAABBQEAAAAAAAAAAAAAAAADAAIEEBQ0/9oACAEBAAEFAo7GkNjAsYFC6a//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAYEAADAQEAAAAAAAAAAAAAAAAAAjGhEP/aAAgBAQAGPwJVaE0mi9//xAAbEAACAgMBAAAAAAAAAAAAAAAAARGRUWGhsf/aAAgBAQABPyFRMunNGzY2bHO/CFghYP/aAAwDAQACAAMAAAAQiA//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAn/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EK2v/8QAHxAAAgEDBQEAAAAAAAAAAAAAAAERIUGRMVFhwfDR/9oACAEBAAE/EKQIiY0aKo812Q2PW4iamp+o4mCCzB//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"error\",\n    \"title\": \"error\",\n    \"src\": \"/static/dcb264add0f54fe8f9d0335494c4a1e6/af659/error-in-browser.jpg\",\n    \"srcSet\": [\"/static/dcb264add0f54fe8f9d0335494c4a1e6/8356d/error-in-browser.jpg 259w\", \"/static/dcb264add0f54fe8f9d0335494c4a1e6/bc760/error-in-browser.jpg 518w\", \"/static/dcb264add0f54fe8f9d0335494c4a1e6/af659/error-in-browser.jpg 1035w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Resolution\"), mdx(\"p\", null, \"It looks like Snowpack has an issue with CJS (CommonJS) libraries according this issue, \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/pikapkg/snowpack/issues/440\"\n  }), \"https://github.com/pikapkg/snowpack/issues/440\"), \".\"), mdx(\"p\", null, \"The resolution in the GitHub issue is not to use named export, but to import the whole module.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" React \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'react'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" ReactDOM \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'react-dom'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" App \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'./App'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// Import \\uD83D\\uDC47 the library as a whole\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" Recoil \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"from\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'recoil'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'./index.css'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\nReactDOM\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"render\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"React\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"StrictMode\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"/* \\uD83D\\uDC47 Explicitly named element */\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"Recoil\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"RecoilRoot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"App \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"/\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"/\"), \"Recoil\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"RecoilRoot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"/\"), \"React\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"StrictMode\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  document\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"getElementById\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'root'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// Learn more: https://www.snowpack.dev/#hot-module-replacement\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"if\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"meta\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"hot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"import\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"meta\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"hot\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"accept\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"This means, everywhere you use Recoil, you need to import the whole module.\\nI found it a bit annoying but haven't been able to find out a better solution.  \"), mdx(\"p\", null, \"Please leave a comment if you can share a different way :)\"), mdx(\"hr\", null), mdx(\"p\", null, \"Image by \", mdx(\"a\", {\n    href: \"https://pixabay.com/users/zmortero-1348534/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247\"\n  }, \"zmortero\"), \" from \", mdx(\"a\", {\n    href: \"https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247\"\n  }, \"Pixabay\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Snowpack - The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='300'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2026v26h7c11%200%2020%202%2022%203%201%202%203%202%205%200h3c2%202%2010%202%2012-1%201-1%202-1%207%201v-1c-2-2%200-3%203-2h12l15%203h4l9-2c8%201%2013%200%2012-2-2-2%200-3%201-1h3l6-2%205-1%204-1h3l-4-2-5-3-2-1-2-2-1-4c-3-3-1-4%204-4l5%202c1%201%203%202%205%201%203%200%204%200%205%202%201%203%204%203%208%201%205-2%2016-2%2018%200%201%201%203%202%209%202%207-1%2013%200%2017%202h10l5-1%207-1%208-1c1-2%202-2%205-1l6%202%205%202c3%202%2011%202%2013%201h3l4%202%204%203%205%202%204%202%202-1h2l4%201c4%202%2010%202%2011%201h2l4%201%203-1%202-1h5l12-2%2013-1%207-3%2010-2%202-1-2-1c-2-1-2-1%202-1%203%200%204%200%204%202l1-1%203-2c2%200%202%200%201-1l-2-1c0-2%205%200%206%201h1c0-2%204-4%205-3%202%201%2010-1%2012-3%203-3%202-3-3-2h-6l-4%201h-3c-3-2-8-2-14-1h-9l-7-1-7-3-4-2-3-2-2-2-2%202c-2%202-3%203-6%202l-5-1c-1%200%203-8%205-8s-3-4-5-4V9c0-1-1-2-3-2l-5-2-2%201c0%201-1%202-2%201V4c0-3-2-4-5-1a3730%203730%200%2000-144-3H-1v26M397%206v3c1%202%200%203-3%202l-2%201h-2l-3%202c-1%202-1%202%202%202l4%201c0%202%205%207%206%207%202%200%201-15%200-17s-2-2-2-1M33%2042c-3%202%201%205%2012%207h10c0-2%201-2%203-2l3-1-5-1-4-1c0-1-11-3-13-2h-6m308%2022l-3%201v2l-2-1c-1-1-3-2-7-2l-5%201v2c-2%201-9%200-10-1l-13-1c-4%200-9%205-7%206s1%205-3%208l-3%206-2%205-2%202-3%202-3%201h-2c-1-1-4-1-4%201%201%201%200%201-2%201-2-1-3%200-4%201h-5l-3%201%201%201c3%200%203%202%202%203-2%200-3-1-5-3l-5-3-3-1c0-1-1-2-2-1s-1%201%202%203l1%203h-1c0-2-3-1-4%201h-5l-3%201c0%202-1%202-2%201s-1-2%202-3h-5c-3%202-3%202-3%200h-3v2c1%201%202%202%201%203-1%200-1%201%201%202%203%201%203%204%200%204h-2l2%202c2%203%203%206%201%206l-1%201h3c2-1%203-5%201-5l-1-3%202-2v2h1c1-1%201-1%201%201-1%203-1%203%201%202l1-4c-1-3%201-3%202%200l-1%204v3l1%201-3%202h-2c0-1-1-1-3%201-1%201-1%202%201%202l2%201h-1l-4%201-5%201c-3%200-5%201-3%203h1c1-2%202-1%201%202%200%203-3%203-5%200-2-2-4-3-4-1s2%204%203%204c3-1%203%200-1%202h-7l2-1%201-5%201-2%203-4%201-2c0%202%200%202%201%201%202-1%200-4-3-4-2%200-2%200%200-1h3l1-1-4-1-3-1%202-1%201-1c-1-2%200-2%203-3l4-1c0-2-4-2-8%200l-7%201-20%204%202%201c-1%201-10%200-11-1h-2l-3%202v1l-3%201c-2%200-3%200-2-1l-2-1c-4%200-5-1-4-3v-1l-1%201-3-1c-3-1-4-2-5-1h-2v-1l3-1c1-1%203-2%207-1%206%200%2018-1%2021-3l15-3c15-3%2020-5%2021-7l3-1c2%200%204-3%204-6l1-2c2%200%202%201%201%203-1%205-1%205%203%204l4-1c1%200%204-2%204-4l4-2c3-2%204-2%202%201v2l10-8%204-2c3-1%204-4%202-6-2-1-5-1-9%203l-4%202c-1-2%200-5%201-5%201%201%204-2%204-3v-1l1-2-2%201c-1%202-9%203-11%202-3-1-6%200-10%206l-9%206-4%204h-22l-3%201h-3c0%202-2%201-4-1s-2-2-4-1c-2%202-5%202-7%201-2-2-8-3-7-1%200%201-1%202-4%202-4%201-6%201-6-2l-3-1c-3%200-3%200-2%201l1%201-12%201c-4%200-10-2-10-3l-3-1-9%202-12%202-15%201c-11%200-14%201-5%202%206%200%2012%202%209%202-4%200%200%202%203%202s3%200%201%201c-3%203-10%203-12%202l-3-2-2-1h-5l-15-3-17-5-9-2c-6-3-19-5-23-4-5%202-6%203-4%203%203%200%202%202%200%202l1%201%202%203%204%202%207%202%2011%201c7%200%2010%201%2010%203%200%201%206%203%2012%203l6%201h5c2%200%203%202%201%202l-2%201c0%201%201%201%204-1l6-1%205%201-5%201-4%201h3c3%200%203%200%202%201-2%201-2%201%200%201%206%200%204%202-3%202l-3%201h3l-4%207-2%203%203-1c5-3%2012-4%2012-2%200%201-1%202-4%202-4%201-4%201-3%203%201%201%201%201-10%201l-10%202h-4l-10%204h2l2%201-2%201c-2%200-6%203-6%204l2%201c2%200%203%202%201%202-2%201%202%206%206%207l11%202%208%202a1963%201963%200%2000-34-4c-9-1-12-2-12-5l2-2c2%200%204-2%203-4%200-1%204-3%207-3%202%200%202%200%201%201s-1%201%202%201c6-1%208-3%202-2h-3l3-1c3-2%203-2%201-2-4%200-3-2%202-2l5-2%202-1c2%200%202%200%201-2l-1-1c7%200%2011-1%2012-3%202-2%202-2%202%200%200%201%201%202%204%201l3-1-2-1-2%201%202-2%202-2H48l-7%201-5%202h-6c-3%200-3%200-3%202s-1%203-3%201v-2c1-1-1-1-3-1a327%20327%200%2001-11%202v1l-5%202-4%202-1%2087v88h166a1986%201986%200%2000169-1l33%201h33v-88a4197%204197%200%2000-3-84v1c1%201%200%202-2%204l-4%203c-3%201-6%204-6%206v3l-6%204-2%202c-1%202-3%203-4%201v-1l1-3c0-3-1-3-4%200-3%202-3%203-2%204s-2%203-5%204-5%205-3%207l1%206c-1%207%200%208%209%208l2%202c0%201%200%202%202%202h4v-1c-2-1%200-2%203-3l7-1c4%200%204%202-1%203l-4%203-3%202-3%203-2%202h4c4%200%205-1%206-3s3-2%203%201h3l2%201c-1%201%200%201%201%201%205%200%207%204%203%205-2%201-2%201%200%202s2%201-3%201c-4%200-5%200-4%201h-4l-9%201h-3c0-2-4-2-9%201-6%202-6%205-1%206l1%201c-2%200-1%203%201%203%201%201%201%202-2%203l-6%202v2l-1%201-12%206c-2%202-1%202%204%205l9%204c3%200%204%201%203%202l-1%201-7-1c-14-1-19-2-18-4l-2-2c-3-1-3-3-2-5%202-2-2-9-6-9l1%201c1%201%201%201-1%201l-3-2c0-1-2-2-3-1v-1c0-2-13-5-18-4h-4l-2-1%202-2c3-3%202-4-2-6l-4-3-2-2c-1-1-1-1%202-2%203-2%204-2%205-1%201%202%206%201%207-1h-5v-1h-1l1-2%201-1%201-2c-1-3%202-4%205-2h3c0-2%204-3%204-1l1%201c1%200%202%201%201%202l1%202%201-2h1l2%201c2%201%203%203%202%205h3v-2c-3%200-2-2%200-2l2-2c0-1%201-2%202-1%201%200%202%200%201-1l-1-2c0-2%200-2-1-1h-2v-4l1%201h3l1-2h15l4%202c2%200%203%201%203%202h3v-3l1-1h-4c-2%200-2-1-1-1%202%200%201-2-1-2-2-1-2-1-1-3v-2l-2%201h-2l-4-2-3-1c-1-1-1-1%201-1%201%201%202%200%202-1%200-2%201-3%202-1v-1l2-1%201-1%201-1%201%202h2l3-2c1-1%202-1%201-2l-2-1h-1v1l-1%202-1-1c0-2-1-2-4-1a115%20115%200%2001-8%201l1%201h-3l2%202c3%201%203%201%200%201l-2%201h-1c0-2-2-3-2-1-1%202-5%203-5%202l1-1%201-1-4-1c-3%200-3%201-3%203v2c-2%200-2%202-1%202v1l-3%202-2%201-2-2c-2%200-2%200-1-1l1-2-2%201-4%202c-1%200-2%200-1-1l2-1h1l-3-1c-3-1-5-3-2-3l5-1-3-1-4-1%201-1c3%200%203-2%201-3s-2-1%200-1%203%201%203%203l1%202%202-2v-4l-1-2h5l6-1%202-2%202%202c0%202%200%202%2020-10%204-2%205-3%206-2s1%201%202-1l4-2%206-2c3-3%2013-6%2018-5h3v-1c-2%200-1-3%201-4l5-3%206-4%203-1v-10c0-10%200-11-2-11-14%205-27%2010-23%2010l1%201c0%201-4%202-5%201-2-1-6%200-6%201l1%201v1h-3c1-2%201-2-1-2l-9%203-3%201c-6%200-10%201-9%202l-3%201-4%202-5%202v1h6c8-3%2011-2%209%202l-1%203h21l-6%206v3l-2-1h-2c-3%202-9%203-9%201h-2c0-2-1-2-2-2-1%201-3%200-4-1h-3c-2%200-1-1%201-3%201-1%201-1-2-1s-3%200-2-1-2-3-6-3l-1-2h-8c-6%200-7-1-8-2-2-2-5-3-4-1l-4-1h-6c-3%202-4%200-2-1%202-2%201-2-5-2-8%201-9%201-6%203l1%202-2%201-3%201h-14l-1%202-1-2c1-1%201-1-1-1h-4c-2%201-5%201-5-1l-2-1-2-1h4l5-1-4-1-4%201%203-1%205-3c0-1-7-2-10%200h-6c-1-1%200-1%201-1v-1c-1-1-1-1%201-1l3-1%202-1%201%201h10a1116%201116%200%200139%201c-4%200-5%202-3%204h3l3-1c3%201%2013-1%2012-2l1-2-2-3c-3-3-10-5-14-4-3%201-6-1-8-4s1-3%203%200c2%202%202%202%203%201%201-2%2014-2%2015%200l3%201%202%201c0%202%207%202%2010%200l7-2c5-2%205-2%205-5%200-4%201-5%202-2l2%202h1c1%202%206%201%209-2%202-1%202-1%201%201%200%202%200%203%202%203%204%201%205-1%202-4l-3-2%204-2c5-4%206-4%203-1-2%202%200%206%202%205%202%200%202%201%201%202%200%203%201%202%204%200%201-2%204-3%206-4%204-1%2015-11%2015-13l4-5c5-4%202-8-4-4h-4l-4%201-2%202v-2c4-4%201-5-19-5l-18%201m-67%206c-5%204-12%2015-12%2017h3l2%202%203%202%204%202%203-1c1%200%202-1%201-2v-4l-1-1-2-1c0-2%204-1%205%201%200%202%201%202%202%201l2%201v2c2%200%203-8%201-11l-1-6c0-5-6-6-10-2m-164%2038l-9%202-4%201h-6l-4%202h8l10-1h7c6%201%207%201%204-2-1-1-1-1%204-1l7%201%207%201-2-1c-9-2-14-3-22-2m155%2015v2c3%200%202%205-1%206-2%200-3%202-4%204-2%203-4%204-3%201l-1-2v2h-4c-2-1-2-1%200-1%203%200%203%200%201-1-2-2-6-2-8%200v2l1%202%202%201%205%201%204%201c3-1%204%200%203%202h-4c-3%200-3%200-3%202%201%202%200%202-1%203-4%201-2%202%205%201l6%201-1%201c-1-1-2%200-1%202%204%203%206%200%205-7%200-5%201-8%203-8l2-1%203-2c1%201%204%200%204-1%200-2-3-5-5-5l-2-2-2-2c-2-1-2-1%200-2s2-1%200-1l-4%201m-123%209l-3%202h-4l-1-1-1%201-1%202-1-1v-2l-1%201v2l-5%203-7%203-3%203h3c3%201%207%200%207-1s5-3%208-3c5%201%207%200%207-1l1-2v-1h1l2-1c-1-1%200-1%202-2l2-1-6-1m91%204l-4%202c-2%202-2%202%200%202%203%200-5%203-10%204-5%200-7-1-3-3%202%200%202%200-1-1l-8%202-6%202c-2%200-2%200-1%201l1%201%201%201%201%203%201%202%201-2c-1-2%201-4%203-2h1l1-2c2%200%201%204-1%205-3%201-3%203%200%202l2-2%201-1%201%202c-1%202%200%202%201%203%202%200%202%200%201%202-2%201-6%202-6%200l-1-1c-1-1-1%200-1%201l-2%203c-1%200-4-2-3-3l2%201h1c1-1-3-4-4-2l-6%201a310%20310%200%2000-12-1l2-1%202-1c-1-2%203-6%208-6%205-1%203-3-4-2-6%200-6%200-5-2%200-2%200-2-1-1v3l-1%201-1-1c-1-2-5%202-5%204l-1%201c-2%200-5%204-5%206%200%203%200%204-1%202l-5-2c-6%200-8-1-6-2%201-1%201-1-1-1l-4%202c0%202-3%203-3%201h-13c-7%200-1%201%2014%202%2014%201%2025%203%2024%204%200%202%204%204%205%203v-1l-2-1h2c2%200%203%200%202-1%200-2%205-4%2011-4h3l1-1c2%200%203%204%202%204-1%201-1%201%201%202l2%202h-2c-2%200%200%201%203%202l6%202h5c3-1%203-1%201-1l-5-2c-1-1-3-2-5-1-4%200-5-3-2-4%205-2%2016-1%2018%201h3l2%201h3c2-3%207-3%207%200-1%201%202%201%205-1%202-1%203-1%203%202l-2%201-6%202c-4%202-5%202-10%201h-7c-2%201-1%202%203%203%203%201%203%201%201%201-2%201-2%201%200%202h5l3%202v3l-4%201c-5-1-5-1-4%201s2%203%206%203l13%201h7l1-4%201-5-2-1-2-2c-2-3%200-4%202-2l2%201c0-1%200-2%201-1l1%201c-1%202%201%204%203%203v-2c-1%200-2-1-2-3-1-2-1-2%201-1%202%200%202%200%201%201l-1%202%202-1%202-1-1%202c-1%202-1%202%202%201h9l-3-2c-2-2-2-2%203-3%203-1%204-2%205-6%200-1%201-4%203-5l3-4%202-1%205-2%201%201v1l1%202c0%201%201%201%203-2l6-4c3%200%203%200%204-5l1-3-5%203-7%205-2%202v-2c2-2%201-2-5-1l-6%201-1%201-2%201-2%201c1%201-3%205-5%204l-5%202c-2%202-4%202-5%202l-3%201%202%202%203%201h-4l-3%201h-5c-3%200-3%200-2-1l3-1c3%200%203-2%201-3l-2-1-3-1-6-1c-1-2-3-2-7-2h-8c-2%201-8%200-8-2-1-2%201-4%203-3%201%200%207-4%206-5-2-1%201-2%206-2%204%201%206%200%208-1%204-3%204-4%201-4-5%200-6%200-4-1h2l1-1h-8m109%2067l-1%201-14%201c-2%200-2%204%200%204l1-2c-1-2%203-3%204-1%202%202%202%202%201%203-2%202-2%202%201%202l5%202c2%200%202%200%201-2h1c1%202%202%202%202%201l1%201h1l2-1%201-1%201-1c2%200%205-4%205-6s0-2-1-1h-11m42%206c0%201-1%202-5%201l-4%201c1%201%200%201-3%201l-4%201-1%201-1%201-2%201c-3-1-5%201-3%202l2%203v1l2-1c0-1%201-2%204-1s4%202%202%202c-2%201-2%201%204%201%202%201%202%202%200%202-3%200-6%203-4%204l3-1c2-1%206-1%206%201%200%201%202%202%202%200h3l2-1h2l2-1h4l4%201%201-9c0-11%200-12-6-10h-10'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3333333333333333,"src":"/static/bf2eb9e58a5ec1a798418ad2212aa71b/f422e/featured-image.jpg","srcSet":"/static/bf2eb9e58a5ec1a798418ad2212aa71b/e75b5/featured-image.jpg 160w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/c01e2/featured-image.jpg 320w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/f422e/featured-image.jpg 640w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/a6352/featured-image.jpg 960w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/bf2eb9e58a5ec1a798418ad2212aa71b/991d2/featured-image.webp","srcSetWebp":"/static/bf2eb9e58a5ec1a798418ad2212aa71b/578e8/featured-image.webp 160w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/8dbf3/featured-image.webp 320w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/991d2/featured-image.webp 640w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/1fb14/featured-image.webp 960w,\n/static/bf2eb9e58a5ec1a798418ad2212aa71b/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction I started learning  Snowpack  and have been pleased with the speed and development experience. As I was learning  Recoil , a…","fields":{"year":"2020","slug":"/blog/2020/07/07/snowpack-the-requested-module-web-modules-recoil-js-does-not-provide-an-export-named-recoil-root/"}}},"pageContext":{"id":"c58f658c-a6e7-5c7b-8b47-b6d6a98802f1"}},"staticQueryHashes":["398935099"]}