DEV Community

Cover image for Snowpack - The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'
Sung M. Kim
Sung M. Kim

Posted on • Originally published at sung.codes on

10 5

Snowpack - The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'

Introduction

I started learning Snowpack and have been pleased with the speed and development experience.

As I was learning Recoil, a new React state management library by Facebook (but not by React core team), I was running into following error message.

Uncaught SyntaxError: The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'

I will talk about how to get around the issue and this won't be about how to use Snowpack or Recoil.

Reproducing the error

I used Create Snowpack App (CSA) with a React template, @snowpack/app-template-react to bootstrap a new React project.

npx create-snowpack-app new-dir --template @snowpack/app-template-react --use-yarn

And then installed Recoil as a dependency.

yarn add recoil

I initially wrapped the root element with RecoilRoot.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// imported 👇 as shown in the Reoil doc
// https://recoiljs.org/docs/introduction/getting-started/#recoilroot
import { RecoilRoot } from 'recoil';

import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
);

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
  import.meta.hot.accept();
}

But then the error mentioned in the "Introduction" occurred.

error

Resolution

It looks like Snowpack has an issue with CJS (CommonJS) libraries according this issue, https://github.com/pikapkg/snowpack/issues/440.

The resolution in the GitHub issue is not to use named export, but to import the whole module.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Import 👇 the library as a whole
import Recoil from 'recoil';

import './index.css';

ReactDOM.render(
  <React.StrictMode>
    {/* 👇 Explicitly named element */}
    <Recoil.RecoilRoot>
      <App />
    </Recoil.RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
);

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
  import.meta.hot.accept();
}

This means, everywhere you use Recoil, you need to import the whole module.
I found it a bit annoying but haven't been able to find out a better solution.

Please leave a comment if you can share a different way :)


Image by zmortero from Pixabay

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
immortaltofu profile image
Clément Danjou

I've started a discussion on GitHub since I try to make recoil work with namedExports option.
github.com/pikapkg/snowpack/discus...

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more