fix: issues using `NextJS` #1471

krichdev · 2020-04-08T19:28:20Z

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

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:

Install library
Import ProgressIndicator and ProgressStep component
Include above components in your own component
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]

The text was updated successfully, but these errors were encountered:

TahimiLeonBravo · 2020-04-09T21:34:05Z

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 · 2020-07-28T02:16:50Z

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 · 2020-08-26T07:40:50Z

With [email protected] 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 · 2020-11-24T10:07:46Z

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 · 2021-01-14T19:21:28Z

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 · 2021-01-14T19:33:50Z

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 · 2021-01-14T19:43:31Z

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

LeandroTorresSicilia · 2021-01-19T19:50:46Z

@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 · 2021-01-19T19:59:56Z

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

AltumSonatur · 2021-01-20T11:23:10Z

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

maximegheraille · 2021-01-20T11:55:16Z

@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 · 2021-01-20T14:28:17Z

@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 · 2021-01-22T16:04:35Z

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 · 2021-01-22T21:55:10Z

@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: &#x27;Lato Black&#x27;;
    src: url(/_next/static/chunks/fonts/Lato-Black-3b9a71682a2e9930e6efcaf190b432dd.eot);
    src: url(/_next/static/chunks/fonts/Lato-Black-ca5b79629fd822fa1f52ac4d57374b85.woff2) format(&quot;woff2&quot;), url(/_next/static/chunks/fonts/Lato-Black-6b88f512cf6e77d59a2cddecd4d610ec.woff) format(&quot;woff&quot;), url(/_next/static/chunks/fonts/Lato-Black-e5c10b5f2dd0f93e72d3d4c91b84b1e1.ttf) format(&quot;truetype&quot;), url(&quot;/_next/static/chunks/fonts/Lato-Black-ea702583981d52d68a41e5c839146f38.svg#Lato-Black&quot;) format(&quot;svg&quot;), url(&quot;/_next/static/chunks/fonts/Lato-Black-3b9a71682a2e9930e6efcaf190b432dd.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Black Italic&#x27;;
    src: url(/_next/static/chunks/fonts/Lato-BlackItalic-d4caec152cb6334fb2c98a50bfeca6f6.eot);
    src: url(/_next/static/chunks/fonts/Lato-BlackItalic-fe00ba7540acbcb989fba880f3506cab.woff2) format(&quot;woff2&quot;), url(/_next/static/chunks/fonts/Lato-BlackItalic-f0edd2396d9947fa0e88ce40bf8341f6.woff) format(&quot;woff&quot;), url(/_next/static/chunks/fonts/Lato-BlackItalic-bd2bad5cf3be6dbc8a3aba3e6fd53d3e.ttf) format(&quot;truetype&quot;), url(&quot;/_next/static/chunks/fonts/Lato-BlackItalic-8a6439ce58122be42f8a0e80b354290d.svg#Lato-BlackItalic&quot;) format(&quot;svg&quot;), url(&quot;/_next/static/chunks/fonts/Lato-BlackItalic-d4caec152cb6334fb2c98a50bfeca6f6.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Bold&#x27;;
    src: url(/_next/static/chunks/fonts/Lato-Bold-e5e2ca0eb7ab620d5729ae611ad38fc3.eot);
    src: url(/_next/static/chunks/fonts/Lato-Bold-8209b84286e4eaa38b833987998ce9f2.woff2) format(&quot;woff2&quot;), url(/_next/static/chunks/fonts/Lato-Bold-4375bb07202ed7abd88387e2fba62030.woff) format(&quot;woff&quot;), url(/_next/static/chunks/fonts/Lato-Bold-401bd636a7027c695b084800aa6e31c5.ttf) format(&quot;truetype&quot;), url(&quot;/_next/static/chunks/fonts/Lato-Bold-07d42ae2eea73c1e33b662bda8e2c253.svg#Lato-Bold&quot;) format(&quot;svg&quot;), url(&quot;/_next/static/chunks/fonts/Lato-Bold-e5e2ca0eb7ab620d5729ae611ad38fc3.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Bold Italic&#x27;;
    src: url(/_next/static/chunks/fonts/Lato-BoldItalic-c85035c3043b6c9a5f9976b66e001e93.eot);
    src: url(/_next/static/chunks/fonts/Lato-BoldItalic-af7de8898e587f93599936b7d0ce3d12.woff2) format(&quot;woff2&quot;), url(/_next/static/chunks/fonts/Lato-BoldItalic-42d0a179d30311cf56eb3dc5a6612595.woff) format(&quot;woff&quot;), url(/_next/static/chunks/fonts/Lato-BoldItalic-f9d1ae3ef26c61251a017040bf1ee8d8.ttf) format(&quot;truetype&quot;), url(&quot;/_next/static/chunks/fonts/Lato-BoldItalic-692b851334cdcbd046d152060a5f550b.svg#Lato-BoldItalic&quot;) format(&quot;svg&quot;), url(&quot;/_next/static/chunks/fonts/Lato-BoldItalic-c85035c3043b6c9a5f9976b66e001e93.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Hairline&#x27;;
    src: url(/_next/static/chunks/fonts/Lato-Hairline-74f25d8f5c565c711db6d3be1518e3e1.eot);
    src: url(/_next/static/chunks/fonts/Lato-Hairline-62909893e8af99b728ea6ee0c2cdffea.woff2) format(&quot;woff2&quot;), url(/_next/static/chunks/fonts/Lato-Hairline-1586218a2950f55d473aa9f0fc736fba.woff) format(&quot;woff&quot;), url(/_next/static/chunks/fonts/Lato-Hairline-7113c6e96dc218b107bc8752ad37e978.ttf) format(&quot;truetype&quot;), url(&quot;/_next/static/chunks/fonts/Lato-Hairline-4742613856e7d66d1f40afe77926272b.svg#Lato-Hairline&quot;) format(&quot;svg&quot;), url(&quot;/_next/static/chunks/fonts/Lato-Hairline-74f25d8f5c565c711db6d3be1518e3e1.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Hairline Italic&#x27;;
    src: url(/_next/static/chunks/fonts/Lato-HairlineItalic-989b76ba71fc416d3872494ff0bebd74.eot);
    src: url(/_next/static/chunks/fonts/Lato-HairlineItalic-056be36c9641557ebe904a5edf65dfb0.woff2) format(&quot;woff2&quot;), url(/_next/static/chunks/fonts/Lato-HairlineItalic-af0cfb23f19a34a5035495c469ba1ebc.woff) format(&quot;woff&quot;), url(/_next/static/chunks/fonts/Lato-HairlineItalic-6340a31b7e515b0b955ea51570adfa9a.ttf) format(&quot;truetype&quot;), url(&quot;/_next/static/chunks/fonts/Lato-HairlineItalic-a9f8adf81666bad4c67794d79508a1b7.svg#Lato-HairlineItalic&quot;) format(&quot;svg&quot;), url(&quot;/_next/static/chunks/fonts/Lato-HairlineItalic-989b76ba71fc416d3872494ff0bebd74.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    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 · 2021-01-23T00:49:44Z

@maximegheraille after install [email protected] 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 · 2021-01-23T10:43:16Z

@wildergd I did not work for my project,

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

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

wildergd · 2021-01-23T13:15:43Z

@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 · 2021-01-23T13:44:19Z

@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"

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

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

wildergd · 2021-01-23T16:14:17Z

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

maximegheraille · 2021-01-23T16:36:47Z

@wildergd I just added you to my repo

wildergd · 2021-01-23T16:41:57Z

Ok i'll check

wildergd · 2021-01-23T21:29:22Z

@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/[email protected]: 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/[email protected]: 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/[email protected]: 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 > [email protected]: "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 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning next > resolve-url-loader > rework > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning uni > npm-registry > mana > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning uni > npm-registry > mana > request > [email protected]: 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 > [email protected]" has unmet peer dependency "webpack@^4.0.0".
warning "@zeit/next-css > [email protected]" has unmet peer dependency "webpack@^4.4.0".
warning " > @zeit/[email protected]" has unmet peer dependency "node-sass@^4.7.2".
warning "@zeit/next-sass > [email protected]" has unmet peer dependency "node-sass@^4.0.0".
warning "@zeit/next-sass > [email protected]" has unmet peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "react-rainbow-components > [email protected]" 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 · 2021-01-23T21:32:07Z

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

wildergd · 2021-01-23T21:45:06Z

@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 · 2021-01-23T22:27:41Z

@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 · 2021-01-23T23:15:45Z

@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 · 2021-02-27T00:38:53Z

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

     

Server: "
@font-face {
    font-family: &#x27;Lato Black&#x27;;
    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(&quot;woff2&quot;), url(https://fonts.react-rainbow.io/Lato-Black/Lato-Black.woff) format(&quot;woff&quot;), url(https://fonts.react-rainbow.io/Lato-Black/Lato-Black.ttf) format(&quot;truetype&quot;), url(&quot;https://fonts.react-rainbow.io/Lato-Black/Lato-Black.svg#Lato-Black&quot;) format(&quot;svg&quot;), url(&quot;https://fonts.react-rainbow.io/Lato-Black/Lato-Black.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Black Italic&#x27;;
    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(&quot;woff2&quot;), url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.woff) format(&quot;woff&quot;), url(https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.ttf) format(&quot;truetype&quot;), url(&quot;https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.svg#Lato-BlackItalic&quot;) format(&quot;svg&quot;), url(&quot;https://fonts.react-rainbow.io/Lato-BlackItalic/Lato-BlackItalic.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }
  
  @font-face {
    font-family: &#x27;Lato Bold&#x27;;
    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(&quot;woff2&quot;), url(https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.woff) format(&quot;woff&quot;), url(https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.ttf) format(&quot;truetype&quot;), url(&quot;https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.svg#Lato-Bold&quot;) format(&quot;svg&quot;), url(&quot;https://fonts.react-rainbow.io/Lato-Bold/Lato-Bold.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;);
    font-weight: normal;
    font-style: normal; }

nyousefzai · 2021-03-09T18:53:10Z

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

maximegheraille · 2021-03-09T18:56:21Z

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

TahimiLeonBravo · 2021-03-09T21:47:31Z

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

ltbittner · 2022-03-19T23:46:36Z

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 · 2022-03-29T17:05:57Z

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 · 2022-03-31T08:21:18Z

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 · 2022-06-09T15:42:20Z

This bug is still there, I have created an issue for vercel/next.js#37573 for NextJs team.

shlomo20 · 2022-11-07T12:56:06Z

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 · 2022-12-31T01:21:00Z

@shlomo20 this worked :) thanks a lot 👍

krichdev added the bug Something isn't working label Apr 8, 2020

TahimiLeonBravo mentioned this issue Apr 9, 2020

fix: ProgressIndicator and ProgressStep in Next.js SSR on POC #1474

Closed

TahimiLeonBravo changed the title ~~fix: Lato-Black font error~~ fix: issues using NextJS Jul 28, 2020

TahimiLeonBravo pinned this issue Jan 14, 2021

wildergd mentioned this issue Jan 16, 2021

fix: fix application component issue in next.js #2101

Merged

1 task

wildergd mentioned this issue Jan 31, 2021

fix: fix warning with legacy styles in SSR #2140

Merged

1 task

balazsorban44 mentioned this issue Jun 9, 2022

next run build hangs indefinitely with react-rainbow-components vercel/next.js#37573

Closed

1 task

TahimiLeonBravo added the NextJS label Nov 19, 2022

fix: issues using NextJS #1471

fix: issues using NextJS #1471

Comments

krichdev commented Apr 8, 2020

Describe the bug

Screenshots

To Reproduce 🕹

Expected Behavior 🤔

Current Behavior 😯

Context 🔦

Your Environment 🌎

TahimiLeonBravo commented Apr 9, 2020

TahimiLeonBravo commented Jul 28, 2020 • edited Loading

gabeszrozsa commented Aug 26, 2020

nomocas commented Nov 24, 2020 • edited Loading

maximegheraille commented Jan 14, 2021

LeandroTorresSicilia commented Jan 14, 2021

TahimiLeonBravo commented Jan 14, 2021

LeandroTorresSicilia commented Jan 19, 2021

maximegheraille commented Jan 19, 2021 • edited Loading

AltumSonatur commented Jan 20, 2021

maximegheraille commented Jan 20, 2021

wildergd commented Jan 20, 2021

LeandroTorresSicilia commented Jan 22, 2021

maximegheraille commented Jan 22, 2021

wildergd commented Jan 23, 2021

maximegheraille commented Jan 23, 2021

wildergd commented Jan 23, 2021 • edited Loading

maximegheraille commented Jan 23, 2021

wildergd commented Jan 23, 2021

maximegheraille commented Jan 23, 2021

wildergd commented Jan 23, 2021

wildergd commented Jan 23, 2021

maximegheraille commented Jan 23, 2021

wildergd commented Jan 23, 2021

maximegheraille commented Jan 23, 2021

wildergd commented Jan 23, 2021

nyousefzai commented Feb 27, 2021

nyousefzai commented Mar 9, 2021

maximegheraille commented Mar 9, 2021

TahimiLeonBravo commented Mar 9, 2021

ltbittner commented Mar 19, 2022

TahimiLeonBravo commented Mar 29, 2022

nomocas commented Mar 31, 2022

ertyagi commented Jun 9, 2022

shlomo20 commented Nov 7, 2022 • edited Loading

mohit21dh commented Dec 31, 2022

fix: issues using `NextJS` #1471

fix: issues using `NextJS` #1471

TahimiLeonBravo commented Jul 28, 2020 •

edited

Loading

nomocas commented Nov 24, 2020 •

edited

Loading

maximegheraille commented Jan 19, 2021 •

edited

Loading

wildergd commented Jan 23, 2021 •

edited

Loading

shlomo20 commented Nov 7, 2022 •

edited

Loading