[Resolved] SSR not possible due to lodash-es

[shariffy]

Hi,

After having successfully used this package in a standard react setting, I was trying to port that code to next.js to enable some Server-Side rendering, when the following error was thrown:

[...]/node_modules/lodash-es/isNumber.js:1
import baseGetTag from './_baseGetTag.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> ([...]/node_modules/react-d3-speedometer/dist/core/util/index.js:1:616)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)

It appears from the Changelog that normal lodash was replaced not that long ago, without significant changes since, so I was able to downgrade to 0.10.1 without much issue but thought I'd post a shout as an FYI, for future design consideration, or other people running into this.

[palerdot]

@shariffy It is possible to make this library work with nextjs. Please refer this issue for more details - #84 ... In short, you need to use next-transpile-modules so that nextjs understands es6 exports ...

Please feel free to reopen if you think you still can't integrate with nextjs. I will add this information as FAQ in README

[palerdot]

I have updated the title to [Resolved] so that future visitors would have more context from the title itself. Please feel free to reopen in case you run into any troubles integrating with next.js

[palerdot]

Sample next.config.js to make this work

const withTM = require("next-transpile-modules")([
  "lodash-es",
  "react-d3-speedometer"
]);

module.exports = withTM();

sample code sandbox - https://codesandbox.io/s/serene-worker-h094e?file=/next.config.js:0-123

[warmansuganda]

hi @palerdot i've other solution for next.js, it works for me!
Reference: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import React from 'react';
import dynamic from 'next/dynamic';

const ReactSpeedometer = dynamic(
  () => import('react-d3-speedometer'),
  { ssr: false },
);

function Speedometer() {
  return (
    <div>
      <ReactSpeedometer />
    </div>
  );
}

export default Speedometer;

[palerdot]

@warmansuganda Thank you. I will link this issue in the FAQ so that people can find the solution you suggested.

You can also raise a PR for this if you are interested.