Unable to resolve "@spectrum-icons/.*"

[jeepers3327]

🐛 Bug Report

I would like to use react-spectrum in my Nextjs project with version 10.1.3 and it seems that the issue from #1326 still occurs.

I follow step by step instructions here on using this library for SSR but I cannot get it to work.

🤔 Expected Behavior

Should be able to start the app

😯 Current Behavior

Compile error

💻 Code Sample

Nextjs config file

const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withTM = require('next-transpile-modules')([
  '@adobe/react-spectrum',
  '@spectrum-icons/.*',
  '@react-spectrum/.*'
]);

module.exports = withPlugins([withCSS, withTM], {
  future: {
    webpack5: true,
  },
});

Error log

➜  app git:(main) ✗ yarn dev
yarn run v1.22.10
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: next-transpile-modules - an unexpected error happened when trying to resolve "@spectrum-icons/.*"
Error: Can't resolve '@spectrum-icons/.*' in '/home/hei/projects/senti/app'
    at getPackageRootDirectory (/home/hei/projects/senti/app/node_modules/next-transpile-modules/src/next-transpile-modules.js:136:15)
    at Array.map (<anonymous>)
    at withTM (/home/hei/projects/senti/app/node_modules/next-transpile-modules/src/next-transpile-modules.js:145:34)
    at /home/hei/projects/senti/app/node_modules/next-compose-plugins/lib/compose.js:100:23
    at Array.forEach (<anonymous>)
    at composePlugins (/home/hei/projects/senti/app/node_modules/next-compose-plugins/lib/compose.js:77:11)
    at /home/hei/projects/senti/app/node_modules/next-compose-plugins/lib/index.js:22:38
    at normalizeConfig (/home/hei/projects/senti/app/node_modules/next/dist/next-server/server/config-shared.js:1:1558)
    at loadConfig (/home/hei/projects/senti/app/node_modules/next/dist/next-server/server/config.js:8:158)
    at async NextServer.loadConfig (/home/hei/projects/senti/app/node_modules/next/dist/server/next.js:1:2962)

🌍 Your Environment

Software	Version(s)
react-spectrum	3.9.0
Browser	Mozilla Firefox
Operating System	Windows 10

[snowystinger]

just making sure, apologies if you have already done this. you included @spectrum-icons/workflow in your package.json deps?

[jeepers3327]

Hi @snowystinger , I already have that installed.

  "dependencies": {
    "@adobe/react-spectrum": "3.9.0",
    "@spectrum-icons/workflow": "3.2.0",
    "@zeit/next-css": "1.0.1",
    "next": "10.1.3",
    "next-compose-plugins": "2.2.1",
    "next-transpile-modules": "6.4.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },

[snowystinger]

And are you able to set yourself to an earlier version next-transpile-modules as the other issue author did?

[jeepers3327]

Yes I tried downgrading to 4.1.0 as mentioned in similar issue ticket.

Here's my finding.

When downgrading next-transpile-modules version to 4.1.0,

When running the app, even after downgrading the version, a new error popup. The error is related to webpack not present.

➜  app git:(main) ✗ yarn dev
yarn run v1.22.10
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

error - ./src/styles/global.css
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /home/hei/projects/app/node_modules/mini-css-extract-plugin/dist/loader.js
- /home/hei/projects/app/node_modules/next/dist/compiled/webpack/bundle4.js
- /home/hei/projects/app/node_modules/next/dist/compiled/webpack/webpack.js
- /home/hei/projects/app/node_modules/next/dist/next-server/server/config-utils.js
- /home/hei/projects/app/node_modules/next/dist/next-server/server/config.js
- /home/hei/projects/app/node_modules/next/dist/next-server/server/next-server.js
- /home/hei/projects/app/node_modules/next/dist/server/next.js
- /home/hei/projects/app/node_modules/next/dist/server/lib/start-server.js
- /home/hei/projects/app/node_modules/next/dist/cli/next-dev.js
- /home/hei/projects/app/node_modules/next/dist/bin/next

With webpack installed ➜ app git:(main) ✗ yarn add webpack@webpack-4 --dev

➜  app git:(main) ✗ yarn dev
yarn run v1.22.10
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

event - compiled successfully

Also note that css modules no longer work.

Module not found: Can't resolve '@styles/Home.module.css'

When replacing alias with relevant import import styles from '../styles/Home.module.css';
The css no longer applied in the page

So far I was able to use react-spectrum , workflow icons along with their respective styles.

Note

• Needed to install webpack@4 explicitly in order for it to work
• CSS Modules no longer work

I'm not sure though regarding having to install webpack@4 explicitly since it was not installed in this example repo

[jkwchui]

This may be related to this issue, for which there is a workaround/solution.