Unable to import this package with Remix

[Charlie Blackstock]

When adding use-sound to a Remix react app, I'm getting this error when trying to run or build the app.

✘ [ERROR] [plugin server-bare-modules] Package subpath './package.json' is not defined by "exports" in /Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/use-sound/package.json

    node_modules/@remix-run/dev/compiler/plugins/serverBareModulesPlugin.js:125:32:
      125 │   let packageJsonFile = require.resolve(`${packageName}/package.j...
          ╵                                 ^

    at new NodeError (internal/errors.js:322:7)
    at throwExportsNotFound (internal/modules/esm/resolve.js:322:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:545:3)
    at resolveExports (internal/modules/cjs/loader.js:450:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
    at Function.resolve (internal/modules/cjs/helpers.js:99:19)
    at warnOnceIfEsmOnlyPackage (/Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/@remix-run/dev/compiler/plugins/serverBareModulesPlugin.js:125:33)
    at /Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/@remix-run/dev/compiler/plugins/serverBareModulesPlugin.js:95:11
    at callback (/Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/esbuild/lib/main.js:920:34)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async handleRequest (/Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/esbuild/lib/main.js:700:30)

  This error came from the "onResolve" callback registered here:

    node_modules/@remix-run/dev/compiler/plugins/serverBareModulesPlugin.js:46:12:
      46 │       build.onResolve({
         ╵             ~~~~~~~~~

    at setup (/Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/@remix-run/dev/compiler/plugins/serverBareModulesPlugin.js:46:13)
    at handlePlugins (/Users/charlieblackstock/repos/arena-nft-marketing-page/node_modules/esbuild/lib/main.js:842:23)

  The plugin "server-bare-modules" was triggered by this import

    app/providers/SoundProvider.tsx:8:21:
      8 │   useSound = require("use-sound");
        ╵                      ~~~~~~~~~~~
     ```

Not sure if there are any suggestions for trying to solve this problem.

[Drew Lyton]

Hey @chuckstock - checkout this issue

You should just have to add use-sound to the serverDependenciesToBundle in your remix.config.js 👍

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  serverBuildTarget: "netlify",
  cacheDirectory: "./node_modules/.cache/remix",
  server: "./server.js",
  ignoredRouteFiles: [
    ".*",
    "**/*.css",
    "**/*.test.{js,jsx,ts,tsx}",
    "**/*.spec.{js,jsx,ts,tsx}",
  ],
  serverDependenciesToBundle: [
    "@headlessui/react",
    "@heroicons/react",
    "use-sound",
  ],
};