hey there, having a hard time setting up resium and cesium with for react using next.j

I was able to get this to work with a little tweaking: <p dir

Hi guys! Going through the same process... <a class="user-mention notranslate" data-ho

use resium with next.js about resium HOT 8 CLOSED

TobiasSchaeuble commented on June 4, 2024

use resium with next.js

from resium.

Comments (8)

pchokanson commented on June 4, 2024 1

I was able to get this to work with a little tweaking:

The components you're using Cesium in need to be client-side. They have an example of how to do this.
You can set the webpack settings in next.config.js by doing most of the steps in the guide. I ended up with the following:

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        try{
            config.externals.cesium = "Cesium";
        } catch {
            config.externals = {
                cesium: "Cesium",
            };
        }

        if(isServer){
            config.plugins.push(new CopyWebpackPlugin([{
                from: path.join(__dirname, (dev ? 
                    "node_modules/cesium/Build/CesiumUnminified/" :
                    "node_modules/cesium/Build/Cesium/")),
                to: path.join(__dirname, "static/Cesium"),
            }, ]));
        }
        config.plugins.push(new HtmlWebpackPlugin({ }));
        config.plugins.push(new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify("static/Cesium"),
        }));
        return config;
    },
    ...
};

Note that this copies to the static directory that's used by next.js for serving assets directly. You should probably use public, but I haven't switched over yet.

I wasn't trivially able to use the webpack configuration to pull in the assets, so I just added them directly to the page that actually needs my component. There is probably a better solution there, but it hasn't been worth my time to find.

That said, this has still been a bit fragile, but I'm not sure exactly where in the stack is actually causing the trouble.

from resium.

rot1024 commented on June 4, 2024 1

Good news, I succeeded in getting Resium to work with Next.js!

Documentation: https://resium.reearth.io/installation#2-nextjs
Example project: https://github.com/reearth/resium/tree/main/example/next

from resium.

rot1024 commented on June 4, 2024

I'm trying to run Resium in Next.js. but it seems to be hard...

Copying Cesium files is OK:

// next.config.js
const path = require('path');
const webpack = require('webpack');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = (config) => ({
  ...config,
  webpack(conf, { isServer }) {
    conf.externals = { cesium: "Cesium" };
    if (!isServer) {
      conf.plugins.push(
        new CopyPlugin([{
          from: path.join(__dirname, "node_modules/cesium/Build/Cesium"),
          to: path.join(__dirname, "static/cesium")
        }]),
	new webpack.DefinePlugin({
          CESIUM_BASE_URL: JSON.stringify("/static/cesium")
        }),
      );
    }
    return conf;
  }
});

But the following code does not work.

// pages/index.js
// does not work

import React from "react";
import Head from 'next/head';
import dynamic from 'next/dynamic';

function newScript(src) {
  return new Promise(function(resolve, reject){
    var script = document.createElement('script');
    script.src = src;
    script.addEventListener('load', function () {
      resolve();
    });
    script.addEventListener('error', function (e) {
      reject(e);
    });
    document.body.appendChild(script);
  })
};

const Resium = dynamic(() => import('resium'), {
  ssr: false,
  render: (props, mod) => {
    console.log(mod); // {} is displayed
    return (
      <mod.Viewer full />
    );
  }
});

class Home extends React.Component {
  
  state = { resium: false };

  componentDidMount() {
    // Cesium must be loaded before loading Resium
    newScript("/static/cesium/Cesium.js").then(() => {
      this.setState({ resium: true });
    }).catch(err => console.error(err))
  }

  render() {
    return (
      <div>
        <Head>
          <link rel="stylesheet" href="/static/cesium/Widgets/widgets.css" />
        </Head>
        {this.state.resium && (
          <Resium />
        )}
      </div>
    );
  };
};

export default Home;

from resium.

SHoar commented on June 4, 2024

Next.js is used for server side rendering (SSR) - wouldn't you be doubling the amount of work that Cesium needs to do?

from resium.

darcismoreno commented on June 4, 2024

Hi guys! Going through the same process... @rot1024 @TobiasSchaeuble did you guys find a workaround to this?

from resium.

nrgapple commented on June 4, 2024

Hmm is there any other solution for nextjs + resium currently?

from resium.

nrgapple commented on June 4, 2024

I wasn't trivially able to use the webpack configuration to pull in the assets, so I just added them directly to the page that actually needs my component. There is probably a better solution there, but it hasn't been worth my time to find.

Do you have an example of how to import directly?

from resium.

Jeetpal1 commented on June 4, 2024

Hey guys,
I am confused about deploying the Nextjs + Resium app on Vercel.
There seems to be an issue when deployed.
Basically, I followed this guide (https://resium.reearth.io/installation#2-nextjs ), also I changed "postinstall": "symlink-dir node_modules/cesium/Build/Cesium public/cesium" to "postinstall": "cp -r node_modules/cesium/Build/Cesium public/cesium", which bypasses the issue (#529 ). Following error occurs after vercel deploy command successfully being completed and I go to the generated url.
For example:

from resium.

use resium with next.js about resium HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent