fix: issues using `NextJS`

[krichdev]

Receiving an error about the Lato-Black font in the Application component.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Describe the bug

Add library to project and tried using the ProgressIndicator and ProgressStep components. Would get the error below in console and browser.

Screenshots

Console error

.../node_modules/react-rainbow-components/components/Application/fonts/Lato-Black/Lato-Black.eot:1
��

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:891:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/node_modules/react-rainbow-components/components/Application/rainbowLegacyStyles.js:10:41)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/node_modules/react-rainbow-components/components/Application/index.js:22:51)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)

To Reproduce 🕹

Steps to reproduce the behavior:

1. Install library
2. Import ProgressIndicator and ProgressStep component
3. Include above components in your own component
4. See error

Expected Behavior 🤔

Ability to render the components without error.

Current Behavior 😯

Page will not load and displays the error about the font

Context 🔦

Just simply trying to add two components to a page

Your Environment 🌎

Desktop (please complete the following information):

• OS: [Mac OS]
• Browser [chrome]
• Version [80.0.3987.149]
• Framework: [NextJS v. 9.3.4]

[TahimiLeonBravo]

Hi @krichdev, I see that you are using Next, currently, our components are having issues with SSR. Solve these problems is a priority for us, this is work in progress :)

[TahimiLeonBravo]

some problems can be solved using this config

const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withFonts = require("next-fonts");
const withTM = require("next-transpile-modules")(["react-rainbow-components"]);

module.exports = withTM(
  withFonts(
    withCSS(
      withSass({
        enableSvg: true,
        cssModules: true,
        webpack: (config, options) => {
          return config;
        },
      })
    )
  )
);

[gabeszrozsa]

With next@9.5 the above mentioned config didn't work for me. Next has built-in CSS & Sass support.

I managed make it work with slight modifications:

const withFonts = require('next-fonts');
const withTM = require('next-transpile-modules')(['react-rainbow-components']);

module.exports = withTM(
  withFonts({
    enableSvg: true,
    webpack(config, options) {
      return config;
    },
  })
);

[nomocas]

Hello,

After applying what gabeszrozsa said, I still have an Error which is coming from the FileSelector component (from ./components/FileSelector/icon.js). (next.js 9.5.5)

FileList (which is provided by browser and that is not available server side) is undefined when compiling.

So when you check in that file, at the end in the propTypes definition, you see : files: _propTypes['default'].instanceOf(FileList),

To allow next.js to compile things correctly, this is better : files: _propTypes['default'].instanceOf(typeof FileList !== 'undefined' ? FileList : Array),

@TahimiLeonBravo Could you please check how to include that fix (the icon.js file is already transpiled) ?

Thanks a lot.

Edit : I could create the PR if needed. The untranspiled Icon.js file is here : https://github.com/nexxtway/react-rainbow/blob/master/src/components/FileSelector/icon.js. We juts need to add the quick fix above.

Another (less good) solution would be to import https://github.com/node-file-api/FileList somewhere through the webpack config when trying to use react-rainbow with nextJS. But it implies that it should be done in each project.

[maximegheraille]

Hi,

I got the same problem, I am using @gabeszrozsa code fix with @nomocas changes. This does for my part give another error when using

import { Application } from 'react-rainbow-components'
import { theme } from '../config/React-Rainbow-Theme'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <Application theme={theme}>
      <Component {...pageProps} />
    </Application>
  )
}

export default MyApp

I get this message

The second I remove the <Appacation part it does all work properly (with the fixes from above).

Are there any plans on fixing that problem because it is really sad to not be able to use this awsome package with next.js

[LeandroTorresSicilia]

We are working on moving fonts to a CDN which will solve some problems with the SSR.

@maximegheraille the issue with the navigator is specific to the Application component, which uses the navigator browser API, also there are other components that use specific browser APIs that have the same issue. Since we are not using Next JS, it is not a priority to us, but we are open to receiving PR from the community.

Thanks for using react-rainbow.

[TahimiLeonBravo]

I'm not very familiar with Next.js but maybe @wildergd knows how to fix it. @wildergd, have you seen this problem before?

[LeandroTorresSicilia]

@maximegheraille we have released version 1.24.0 where we fix issues with the Application and the FileSelector with SSR, you can try it now

[maximegheraille]

@LeandroTorresSicilia just tried it out and it works. Thanks a lot for the quick fix

[AltumSonatur]

Just installed the last version (1.24.0) on my NextJS project and not working. @maximegheraille Did you do any config ?

[maximegheraille]

@arthurpietruch the only thing I have configured is this inside my next.config.js

const withFonts = require('next-fonts');
const withTM = require('next-transpile-modules')(['react-rainbow-components']);

module.exports = withTM(
  withFonts({
    enableSvg: true,
    webpack(config, options) {
      return config;
    },
  })
);

[wildergd]

@arthurpietruch this is the config we have in our rainbow-next-experience repo:

const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withFonts = require("next-fonts");
const withTM = require("next-transpile-modules")(["react-rainbow-components"]);

module.exports = withTM(
  withFonts(
    withCSS(
      withSass({
        enableSvg: true,
        webpack: (config, options) => {
          return config;
        },
      })
    )
  )
);

also if you are using styled-components, it is recoomended to add babel-plugin-styled-components

yarn add --dev babel-plugin-styled-components and add it to .babelrc plugins section

    "plugins": [
        [
            "styled-components",
            {
                "ssr": true,
                "displayName": true,
                "preprocess": false
            }
        ]
    ]

this have been tested on this environment "next": "~10.0.5", "react": "~17.0.1", "react-dom": "~17.0.1", "react-rainbow-components": "~1.23.0", "styled-components": "^5.2.1", "webpack": "~5.14.0"

[LeandroTorresSicilia]

In the new version 1.24.1, we have moved the fonts to a CDN, now react-rainbow-components works out of the box with Next.js, I have updated the next experience example project (https://github.com/nexxtway/rainbow-next-experience)

We wait for your feedback.

[maximegheraille]

@LeandroTorresSicilia Hi, I tested it with no config at all and i'm getting this in the console.

react-dom.development.js:88 Warning: Text content did not match. Server: "
@font-face {
    font-family: 'Lato Black';
    src: url(/_next/static/chunks/fonts/Lato-Black-3b9a71682a2e9930e6efcaf190b432dd.eot);
    src: url(/_next/static/chunks/fonts/Lato-Black-ca5b79629fd822fa1f52ac4d57374b85.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Black-6b88f512cf6e77d59a2cddecd4d610ec.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Black-e5c10b5f2dd0f93e72d3d4c91b84b1e1.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Black-ea702583981d52d68a41e5c839146f38.svg#Lato-Black") format("svg"), url("/_next/static/chunks/fonts/Lato-Black-3b9a71682a2e9930e6efcaf190b432dd.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Black Italic';
    src: url(/_next/static/chunks/fonts/Lato-BlackItalic-d4caec152cb6334fb2c98a50bfeca6f6.eot);
    src: url(/_next/static/chunks/fonts/Lato-BlackItalic-fe00ba7540acbcb989fba880f3506cab.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-BlackItalic-f0edd2396d9947fa0e88ce40bf8341f6.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-BlackItalic-bd2bad5cf3be6dbc8a3aba3e6fd53d3e.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-BlackItalic-8a6439ce58122be42f8a0e80b354290d.svg#Lato-BlackItalic") format("svg"), url("/_next/static/chunks/fonts/Lato-BlackItalic-d4caec152cb6334fb2c98a50bfeca6f6.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Bold';
    src: url(/_next/static/chunks/fonts/Lato-Bold-e5e2ca0eb7ab620d5729ae611ad38fc3.eot);
    src: url(/_next/static/chunks/fonts/Lato-Bold-8209b84286e4eaa38b833987998ce9f2.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Bold-4375bb07202ed7abd88387e2fba62030.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Bold-401bd636a7027c695b084800aa6e31c5.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Bold-07d42ae2eea73c1e33b662bda8e2c253.svg#Lato-Bold") format("svg"), url("/_next/static/chunks/fonts/Lato-Bold-e5e2ca0eb7ab620d5729ae611ad38fc3.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Bold Italic';
    src: url(/_next/static/chunks/fonts/Lato-BoldItalic-c85035c3043b6c9a5f9976b66e001e93.eot);
    src: url(/_next/static/chunks/fonts/Lato-BoldItalic-af7de8898e587f93599936b7d0ce3d12.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-BoldItalic-42d0a179d30311cf56eb3dc5a6612595.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-BoldItalic-f9d1ae3ef26c61251a017040bf1ee8d8.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-BoldItalic-692b851334cdcbd046d152060a5f550b.svg#Lato-BoldItalic") format("svg"), url("/_next/static/chunks/fonts/Lato-BoldItalic-c85035c3043b6c9a5f9976b66e001e93.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Hairline';
    src: url(/_next/static/chunks/fonts/Lato-Hairline-74f25d8f5c565c711db6d3be1518e3e1.eot);
    src: url(/_next/static/chunks/fonts/Lato-Hairline-62909893e8af99b728ea6ee0c2cdffea.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Hairline-1586218a2950f55d473aa9f0fc736fba.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Hairline-7113c6e96dc218b107bc8752ad37e978.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Hairline-4742613856e7d66d1f40afe77926272b.svg#Lato-Hairline") format("svg"), url("/_next/static/chunks/fonts/Lato-Hairline-74f25d8f5c565c711db6d3be1518e3e1.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Hairline Italic';
    src: url(/_next/static/chunks/fonts/Lato-HairlineItalic-989b76ba71fc416d3872494ff0bebd74.eot);
    src: url(/_next/static/chunks/fonts/Lato-HairlineItalic-056be36c9641557ebe904a5edf65dfb0.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-HairlineItalic-af0cfb23f19a34a5035495c469ba1ebc.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-HairlineItalic-6340a31b7e515b0b955ea51570adfa9a.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-HairlineItalic-a9f8adf81666bad4c67794d79508a1b7.svg#Lato-HairlineItalic") format("svg"), url("/_next/static/chunks/fonts/Lato-HairlineItalic-989b76ba71fc416d3872494ff0bebd74.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
 " Client: "
@font-face {
    font-family: 'Lato Black';
    src: url(/_next/static/chunks/fonts/Lato-Black-3b9a71682a2e9930e6efcaf190b432dd.eot);
    src: url(/_next/static/chunks/fonts/Lato-Black-ca5b79629fd822fa1f52ac4d57374b85.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Black-6b88f512cf6e77d59a2cddecd4d610ec.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Black-e5c10b5f2dd0f93e72d3d4c91b84b1e1.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Black-ea702583981d52d68a41e5c839146f38.svg#Lato-Black") format("svg"), url("/_next/static/chunks/fonts/Lato-Black-3b9a71682a2e9930e6efcaf190b432dd.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Black Italic';
    src: url(/_next/static/chunks/fonts/Lato-BlackItalic-d4caec152cb6334fb2c98a50bfeca6f6.eot);
    src: url(/_next/static/chunks/fonts/Lato-BlackItalic-fe00ba7540acbcb989fba880f3506cab.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-BlackItalic-f0edd2396d9947fa0e88ce40bf8341f6.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-BlackItalic-bd2bad5cf3be6dbc8a3aba3e6fd53d3e.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-BlackItalic-8a6439ce58122be42f8a0e80b354290d.svg#Lato-BlackItalic") format("svg"), url("/_next/static/chunks/fonts/Lato-BlackItalic-d4caec152cb6334fb2c98a50bfeca6f6.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Bold';
    src: url(/_next/static/chunks/fonts/Lato-Bold-e5e2ca0eb7ab620d5729ae611ad38fc3.eot);
    src: url(/_next/static/chunks/fonts/Lato-Bold-8209b84286e4eaa38b833987998ce9f2.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Bold-4375bb07202ed7abd88387e2fba62030.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Bold-401bd636a7027c695b084800aa6e31c5.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Bold-07d42ae2eea73c1e33b662bda8e2c253.svg#Lato-Bold") format("svg"), url("/_next/static/chunks/fonts/Lato-Bold-e5e2ca0eb7ab620d5729ae611ad38fc3.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Bold Italic';
    src: url(/_next/static/chunks/fonts/Lato-BoldItalic-c85035c3043b6c9a5f9976b66e001e93.eot);
    src: url(/_next/static/chunks/fonts/Lato-BoldItalic-af7de8898e587f93599936b7d0ce3d12.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-BoldItalic-42d0a179d30311cf56eb3dc5a6612595.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-BoldItalic-f9d1ae3ef26c61251a017040bf1ee8d8.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-BoldItalic-692b851334cdcbd046d152060a5f550b.svg#Lato-BoldItalic") format("svg"), url("/_next/static/chunks/fonts/Lato-BoldItalic-c85035c3043b6c9a5f9976b66e001e93.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Hairline';
    src: url(/_next/static/chunks/fonts/Lato-Hairline-74f25d8f5c565c711db6d3be1518e3e1.eot);
    src: url(/_next/static/chunks/fonts/Lato-Hairline-62909893e8af99b728ea6ee0c2cdffea.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Hairline-1586218a2950f55d473aa9f0fc736fba.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Hairline-7113c6e96dc218b107bc8752ad37e978.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Hairline-4742613856e7d66d1f40afe77926272b.svg#Lato-Hairline") format("svg"), url("/_next/static/chunks/fonts/Lato-Hairline-74f25d8f5c565c711db6d3be1518e3e1.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Hairline Italic';
    src: url(/_next/static/chunks/fonts/Lato-HairlineItalic-989b76ba71fc416d3872494ff0bebd74.eot);
    src: url(/_next/static/chunks/fonts/Lato-HairlineItalic-056be36c9641557ebe904a5edf65dfb0.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-HairlineItalic-af0cfb23f19a34a5035495c469ba1ebc.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-HairlineItalic-6340a31b7e515b0b955ea51570adfa9a.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-HairlineItalic-a9f8adf81666bad4c67794d79508a1b7.svg#Lato-HairlineItalic") format("svg"), url("/_next/static/chunks/fonts/Lato-HairlineItalic-989b76ba71fc416d3872494ff0bebd74.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Italic';
    src: url(/_next/static/chunks/fonts/Lato-Italic-ceac579bf50400725feaf80bdecd258b.eot);
    src: url(/_next/static/chunks/fonts/Lato-Italic-3e9bd20f6a375ed8218cba1fb91cc57f.woff2) format("woff2"), url(/_next/static/chunks/fonts/Lato-Italic-a6d5dbc9324e647bb08d48183dbb5f48.woff) format("woff"), url(/_next/static/chunks/fonts/Lato-Italic-9c78378493b151adf24402026beff88a.ttf) format("truetype"), url("/_next/static/chunks/fonts/Lato-Italic-610444"
    in style (created by Application)
    in div (created by Application)
    in ThemeProvider (created by Application)
    in Application (at _app.tsx:63)
    in Provider (at _app.tsx:62)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

[wildergd]

@maximegheraille after install react-rainbow-components@1.24.1 run npm rimraf .next in order to clean next cache.. i have face this problem and it have been solved this way.... i have tested the library on a next project with minimal config and using the same index.js in our example...

my package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.5",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-rainbow-components": "^1.24.1"
  }
}

[maximegheraille]

@wildergd I did not work for my project,

1. I added a "fix": "rimraf .next" inside my package.json and installed rimraf
2. I ran the command without errors
3. Used npm run build & npm run dev

The console message was still there, while making a new project works fine (tested it)

[wildergd]

@maximegheraille this is weird .. as far i can see.. in the css code you posted it is still using a version of the library that has embed fonts, the url in @font-face have been transformed by next.js (ex: src: url(/_next/static/chunks/fonts/Lato-Italic-ceac579bf50400725feaf80bdecd258b.eot);)... since v1.24.0 we moved fonts to remote server... now, the url in @font-face is an https address (ex:src: url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.eot);) which means two things... 1: your project is using a wrong version, or, 2-there is something cached...

[maximegheraille]

@wildergd I tried this and the message is still there, while using version
"react-rainbow-components": "^1.24.1" , "react": "^16.12.0" , "next": "latest"

1. removed package-lock.json & the node_module folder and .next folder
2. npm install
3. npm run build& npm run dev

Because this project is almost empty, I think I am just going to remake it instead

[wildergd]

@maximegheraille imcan you share your project code? In order to check?

[maximegheraille]

@wildergd I just added you to my repo

[wildergd]

Ok i'll check

[wildergd]

@maximegheraille ok.. i cloned your repo, removed package-lock.json, then i ran yarn install, yarn build and yarn start.. here are the results

wildergd@Wilders-MacBook-Pro /V/W/P/g/n/xxxx>
git clone https://github.com/maximegheraille/test.git
Cloning into 'test'...
remote: Enumerating objects: 20373, done.
remote: Total 20373 (delta 0), reused 0 (delta 0), pack-reused 20373
Receiving objects: 100% (20373/20373), 59.07 MiB | 208.00 KiB/s, done.
Resolving deltas: 100% (2118/2118), done.
Updating files: 100% (9326/9326), done.
wildergd@Wilders-MacBook-Pro /V/W/P/g/n/xxxx> cd test/
wildergd@Wilders-MacBook-Pro /V/W/P/g/n/x/test> rm package-lock.json
wildergd@Wilders-MacBook-Pro /V/W/P/g/n/x/test> yarn install
yarn install v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning @zeit/next-css@1.0.1: Next.js now has built-in support for CSS: https://nextjs.org/docs/basic-features/built-in-css-support. The built-in support solves many bugs and painpoints that the next-css plugin had.
warning @zeit/next-sass@1.0.1: Next.js now has built-in support for Sass: https://nextjs.org/docs/basic-features/built-in-css-support\#sass-support. The built-in support solves many bugs and painpoints that the next-sass plugin had.
warning @zeit/next-sass > @zeit/next-css@1.0.1: Next.js now has built-in support for CSS: https://nextjs.org/docs/basic-features/built-in-css-support. The built-in support solves many bugs and painpoints that the next-css plugin had.
warning next > chokidar > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
info There appears to be trouble with your network connection. Retrying...
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning next > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning uni > npm-registry > mana > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning uni > npm-registry > mana > request > har-validator@5.1.5: this library is no longer supported
[2/4] 🚚  Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[3/4] 🔗  Linking dependencies...
warning "@zeit/next-css > css-loader@1.0.0" has unmet peer dependency "webpack@^4.0.0".
warning "@zeit/next-css > mini-css-extract-plugin@0.4.3" has unmet peer dependency "webpack@^4.4.0".
warning " > @zeit/next-sass@1.0.1" has unmet peer dependency "node-sass@^4.7.2".
warning "@zeit/next-sass > sass-loader@6.0.6" has unmet peer dependency "node-sass@^4.0.0".
warning "@zeit/next-sass > sass-loader@6.0.6" has unmet peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning " > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > next-fonts@1.5.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "react-rainbow-components > react-async-script-loader@0.3.0" has incorrect peer dependency "react@^15.5.4".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 780.48s.
wildergd@Wilders-MacBook-Pro /V/W/P/g/n/x/test> yarn build
yarn run v1.22.4
$ next build
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (9/9)
info  - Finalizing page optimization

Page                                                           Size     First Load JS
┌ ○ /                                                          4.86 kB        1.44 MB
├   /_app                                                      0 B            1.43 MB
├ ○ /404                                                       3.46 kB        1.44 MB
├ ○ /about                                                     600 B          1.44 MB
├ λ /api/users                                                 0 B            1.43 MB
├ ○ /navigation/navigation                                     1.48 kB        1.43 MB
├ ● /users                                                     776 B          1.44 MB
└ ● /users/[id]                                                711 B          1.44 MB
    ├ /users/101
    ├ /users/102
    ├ /users/103
    └ /users/104
+ First Load JS shared by all                                  1.43 MB
  ├ chunks/4322cd96.957471.js                                  22.4 kB
  ├ chunks/6bb4ab098477f1d5ecc7579fabdfb86ff23775fe.c31fa7.js  991 kB
  ├ chunks/75fc9c18.d33285.js                                  19.2 kB
  ├ chunks/ca7c75cbcb394ef8c6930736c9d54088ccde518c.964928.js  13.3 kB
  ├ chunks/cb1608f2.4ec71e.js                                  510 B
  ├ chunks/d378b58a199842d2929d038e4446066ebbb4f0ed.e73540.js  14.6 kB
  ├ chunks/dff27125.89c25a.js                                  197 kB
  ├ chunks/f10e284a.7d4197.js                                  127 kB
  ├ chunks/framework.351929.js                                 40.2 kB
  ├ chunks/main.0e2aba.js                                      6.37 kB
  ├ chunks/pages/_app.a591ab.js                                599 B
  ├ chunks/webpack.50bee0.js                                   751 B
  └ css/2acbbb60bccf24ccd236.css                               1.52 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✨  Done in 291.79s.
wildergd@Wilders-MacBook-Pro /V/W/P/g/n/x/test> yarn start
yarn run v1.22.4
$ next start --port 3007
ready - started server on http://localhost:3007

[maximegheraille]

@wildergd do you stil get the console message ? Like I showed above ?

[wildergd]

@maximegheraille no... i didn't get the same messages... see the log i got from yarn build... i preffer yarn over npm.. but i don't think the problem is there

my env is: yarn 1.22.4 npm 6.14.4 node v12.16.3

anyway... sometimes i also clear npm and yarn caches... you can try.. npm cache clean --force or yarn cache clean --force... remove foldersnode_modules and .next.. and then yarn (or npm) install again

[maximegheraille]

@wildergd I meant when using npm run dev and open the dev tools, in the console there you should see the message.

I tried you solution and still getting the error inside the chrome dev tools.

my env: node: v14.15.3 npm: 6.14.9

[wildergd]

@maximegheraille Yes... now i see the problem... is like if next was escaping css... it shows a warning but load the css.... i'll take a look at this....

[nyousefzai]

 same issue here:  nextjs: latest , react-rainbow-components:"^1.24.1"

Server: "
@font-face {
    font-family: 'Lato Black';
    src: url(https://fonts.react-rainbow.io/Lato-Black/Lato-Black.eot);
    src: url(https://fonts.react-rainbow.io/Lato-Black/Lato-Black.woff2) format("woff2"), url(https://fonts.react-rainbow.io/Lato-Black/Lato-Black.woff) format("woff"), url(https://fonts.react-rainbow.io/Lato-Black/Lato-Black.ttf) format("truetype"), url("https://fonts.react-rainbow.io/Lato-Black/Lato-Black.svg#Lato-Black") format("svg"), url("https://fonts.react-rainbow.io/Lato-Black/Lato-Black.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Black Italic';
    src: url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.eot);
    src: url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.woff2) format("woff2"), url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.woff) format("woff"), url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.ttf) format("truetype"), url("https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.svg#Lato-BlackItalic") format("svg"), url("https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

  @font-face {
    font-family: 'Lato Bold';
    src: url(https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.eot);
    src: url(https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.woff2) format("woff2"), url(https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.woff) format("woff"), url(https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.ttf) format("truetype"), url("https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.svg#Lato-Bold") format("svg"), url("https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; }

[nyousefzai]

@wildergd any movement on this, it seems it has been solved, but have the latest version of react-rainbow still not working.

[maximegheraille]

@nyousefzai They haven't released a new version since Jan 22, so I guess we have to wait until they release it

[TahimiLeonBravo]

@maximegheraille @nyousefzai react-rainbow-components v1.25.0 is now available :)

[ltbittner]

Just commenting here to let anyone know that if you use NextJS + Vercel and your Vercel deployments hang for infinite amount of time, it's because of this library. Importing the Calendar component caused my Vercel deployments to hang for 45 minutes before they eventually timed out, with no error messages.

This is a great looking component library but its a shame that the maintainers cannot figure out SSR. I ended up using react-datepicker which had no problems and a similar API.

[TahimiLeonBravo]

Just commenting here to let anyone know that if you use NextJS + Vercel and your Vercel deployments hang for infinite amount of time, it's because of this library. Importing the Calendar component caused my Vercel deployments to hang for 45 minutes before they eventually timed out, with no error messages.

This is a great looking component library but its a shame that the maintainers cannot figure out SSR. I ended up using react-datepicker which had no problems and a similar API.

I am very sorry to hear that, we try to maintain the library in our free time, and many times users find issues that we have not had before. This is an open-source library and you are free to contribute by fixing any problems if you wish.

[nomocas]

Just commenting here to let anyone know that if you use NextJS + Vercel and your Vercel deployments hang for infinite amount of time, it's because of this library. Importing the Calendar component caused my Vercel deployments to hang for 45 minutes before they eventually timed out, with no error messages.

This is a great looking component library but its a shame that the maintainers cannot figure out SSR. I ended up using react-datepicker which had no problems and a similar API.

Yep exactly same thing for us. A lot of time was lost to find the cause of nextjs 12 hang.

We're searching for an alternative calendar.

The problem is not provided by nextjs build logs. Hard to say what is the problem with rainbow components.

[ertyagi]

This bug is still there, I have created an issue for https://github.com/vercel/next.js/issues/37573 for NextJs team.

[shlomo20]

if you are still struggling with the long build time, since the issue is with ssr the only thing that fixed it for me was importing the component that uses this library as a dynamic component

the page that imports the components

// don't use normal import 
// import Calendar from '@/components/calendar ';

// dynamic 
const Calendar = dynamic(() => import('@/components/calendar'), {
  ssr: false,
});

calendar.ts

import {  DatePicker } from 'react-rainbow-components';
const Calendar = () => {
 return (
    <DatePicker 
            id="datePicker-1"
            value={dueDate}
            onChange={value => setDueDate( value )}
            label="Due Date"
            formatStyle="large"/>
    )
}
export default Calendar

[mohit21dh]

@shlomo20 this worked :) thanks a lot 👍