Error: Can't resolve '@spectrum-icons/.*'

[garytalmes]

🐛 Bug Report

I'm attempting to install react spectrum with NextJS. I've followed the steps in the Spectrum docs for configuring NextJS. When I attempt to start up the act, I get the error below.

Here are the relevant package.json entries:

"dependencies": {
    "@adobe/react-spectrum": "^3.6.0",
    "@zeit/next-css": "^1.0.1",
    "next": "9.5.3",
    "next-connect": "^0.6.4",
    "next-images": "^1.4.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
}

"devDependencies": {
    "next-compose-plugins": "^2.2.1",
    "next-transpile-modules": "^5.0.0"
}

Here is the next.config.js:

const Dotenv = require("dotenv-webpack")
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants")
const withPlugins = require("next-compose-plugins")
const withImages = require("next-images")
const withCSS = require("@zeit/next-css")
const withTM = require("next-transpile-modules")([
  "@adobe/react-spectrum",
  "@spectrum-icons/.*",
  "@react-spectrum/.*",
]);

module.exports = withPlugins([withCSS, withTM], {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
      config.plugins.push(new Dotenv({ silent: true }));
      return config;
    },
    withImages: withImages()
})

In pages/_app.js. I have:

import { Provider, defaultTheme } from "@adobe/react-spectrum"

and then later:

<Provider theme={defaultTheme}>
    <div>
        <Component {...pageProps} />
    </div>
</Provider>

And here is the error:

Error: Can't resolve '@react-spectrum/.*' in '/Users/garytalmes/Documents/Projects/nonprofits'
    at finishWithoutResolve (/Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
    at /Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/Resolver.js:362:15
    at /Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/garytalmes/Documents/Projects/nonprofits/node_modules/next-transpile-modules/node_modules/enhanced-resolve/lib/Resolver.js:410:5 {
  details: "resolve '@react-spectrum/.*' in '/Users/garytalmes/Documents/Projects/nonprofits'\n" +
    '  Parsed request is a module\n' +
    '  using description file: /Users/garytalmes/Documents/Projects/nonprofits/package.json (relative path: .)\n' +
    '    resolve as module\n' +
    '      looking for modules in /Users/garytalmes/Documents/Projects/nonprofits/node_modules\n' +
    '        single file module\n' +
    '          using description file: /Users/garytalmes/Documents/Projects/nonprofits/package.json (relative path: ./node_modules/@react-spectrum/.*)\n' +
    '            no extension\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.* doesn't exist\n" +
    '            .js\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.js doesn't exist\n" +
    '            .jsx\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.jsx doesn't exist\n" +
    '            .ts\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.ts doesn't exist\n" +
    '            .tsx\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.tsx doesn't exist\n" +
    '            .mjs\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.mjs doesn't exist\n" +
    '            .css\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.css doesn't exist\n" +
    '            .scss\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.scss doesn't exist\n" +
    '            .sass\n' +
    "              /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.*.sass doesn't exist\n" +
    "        /Users/garytalmes/Documents/Projects/nonprofits/node_modules/@react-spectrum/.* doesn't exist\n" +
    "      /Users/garytalmes/Documents/Projects/node_modules doesn't exist or is not a directory\n" +
    "      /Users/garytalmes/Documents/node_modules doesn't exist or is not a directory\n" +
    "      /Users/garytalmes/node_modules doesn't exist or is not a directory\n" +
    "      /Users/node_modules doesn't exist or is not a directory\n" +
    "      /node_modules doesn't exist or is not a directory"
}

One other note:

This error gets thrown on either @spectrum-icons/.* OR @react-spectrum/.* -- whichever comes first in the next.config.js file. I've tried removing the "/.*" part but with no success.

Thanks very much.

[snowystinger]

Were you able to get this example repo up and running? https://github.com/devongovett/rsp-next

[garytalmes]

Yes, the example repo looks fine... hmm...

[garytalmes]

Ok, it appears that downgrading next-transpile-modules from 5.x to 4.1.0 did the trick.

[snowystinger]

Closing for now, if it comes up again, we can reopen and revisit or if anyone is able to determine the root cause, we're happy to discuss a solution.