refresh - SyntaxError: Cannot use import statement outside a module

[airxiaotian]

Describe the bug React, next.js, refreshing the page, it occurred. but if entering the page from another page, it doesn't occur

To Reproduce Steps to reproduce the behavior:

1. Refresh the page containing the component

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome

---

[bumbeishvili]

@airxiaotian require won't work, the import will

Can you provide more information about the environment where you plan to use this org chart? Is it node.js?

[airxiaotian]

React, next.js, refreshing the page, it occurred. but if entering the page from another page, it doesn't occur

[airxiaotian]

Is it node.js?

yes, node js , by using npm i d3-org-chart

[bumbeishvili]

This is react.js integration sample - https://stackblitz.com/edit/d3-org-chart-react-integration-hooks

I can't reproduce it, can you fork and link the reproduced example?

[airxiaotian]

https://github.com/airxiaotian/d3-org-bug-reproduce

everything working right if entering /d3 from home page. but if refresh the /d3 page or type localhost:3000/d3 to the browser, the error occured

[ouin81]

hi, i reproduced this problem.

environment: MacOS Big Sur 11.5.2

➜   node -v
v14.17.4
➜   yarn -v
1.22.11

create a next-app https://nextjs.org/

$ yarn create next-app


yarn create v1.22.11
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-next-app
✔ What is your project named? … d3-org-sample
Creating a new Next.js app in path/to/d3-org-sample.

Using yarn.

add d3-org-chart

cd d3-org-sample 
yarn add d3-org-chart
yarn add v1.22.11
[1/4] 🔍  Resolving packages...
.....

add only one line of code into ./pages/index.js

import { OrgChart } from 'd3-org-chart';

start up server, then access http://localhost:3000, the problem reproduced.

yarn dev
yarn run v1.22.11
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
warn  - ./node_modules/d3-flextree/src/flextree.js
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)
info  - ready on http://localhost:3000
event - build page: /next/dist/pages/_error
wait  - compiling...
warn  - ./node_modules/d3-flextree/src/flextree.js
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)
info  - ready on http://localhost:3000
error - path/to/d3-org-sample/node_modules/d3-org-chart/src/d3-org-chart.js:1
import { selection, select } from "d3-selection";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.d3-org-chart (path/to/d3-org-sample/.next/server/pages/index.js:86:18)
    at __webpack_require__ (path/to/d3-org-sample/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/index.js:11:70) {
  page: '/'
}

[bumbeishvili]

Ok, that error seems in line with the following issues

#77 #78

At this point, I am not sure yet how can I fix it, will think about it once I will find time from my busy schedule

[ouin81]

@bumbeishvili ~~hi, the version 2.1.0 is working.~~

[bumbeishvili]

Are you sure? Because nothing changed between 2.1.0 and latest 2.3.4, which would cause one to work and second not

[ouin81]

sorry, i confirmed again. it was a mistake. https://github.com/bumbeishvili/org-chart/issues/83#issuecomment-912430890

[airxiaotian]

can I know your node version? my node version is 14.17.4

[torchsmith]

This directly relates to this issue: https://github.com/asyncapi/asyncapi-react/issues/177#issuecomment-729823940

Seems to be an issue with server side rendering with NextJS.

I was able to solve the issue by importing the OrgChart class like so:

let OrgChart; import('d3-org-chart').then((mod) => OrgChart = mod.OrgChart);

Opposed to the suggested react implementation:

import { OrgChart } from 'd3-org-chart';

[torchsmith]

I also switched useLayoutEffect for juts useEffect (since SSR won't be able to use the useLayoutEffect hook effectively)

[bumbeishvili]

Good to know, thanks

[bumbeishvili]

This issue should be fixed now since #77 is fixed, closing for now. Let me know if issue reappears

[lfpacheco92]

I'm facing the same issue on NextJs.

However the error stack is as fallows:

import { selection, select } from "d3-selection";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.d3-org-chart (/home/lucas/Dev/userh/bootstrap-frontend/.next/server/pages/management/organization.js:435:18)
    at __webpack_require__ (/home/lucas/Dev/userh/bootstrap-frontend/.next/server/webpack-runtime.js:33:43

[Lfaufau]

I'm facing the same issue on NextJs.

Manually setting "type": "module", in d3-org-chart package.json fixed the issue

[sdoxsee]

I'm facing the same issue on NextJs.

Manually setting "type": "module", in d3-org-chart package.json fixed the issue

Oddly, to me at least, this works. How do the upvoters implement this for deployment. Surely you don't run a script to add "type": "module" to the package.json of d3-org-chart.

@bumbeishvili can this not be added in general to the package.json as a PR?

{
  "name": "d3-org-chart",
  "version": "2.7.0",
  "module": "module",
  "type": "module", <-- added manually after npm install
  "description": "Highly customizable org chart, created with d3",
  ...
}

[Standin-Alone]

any updates?