refresh - SyntaxError: Cannot use import statement outside a module #83

airxiaotian · 2021-09-02T08:49:21Z

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:

Refresh the page containing the component

Screenshots

Desktop (please complete the following information):

OS: MacOS
Browser chrome

bumbeishvili · 2021-09-02T08:57:19Z

@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 · 2021-09-02T09:00:19Z

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

airxiaotian · 2021-09-02T09:01:39Z

Is it node.js?

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

bumbeishvili · 2021-09-02T09:03:05Z

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 · 2021-09-02T09:30:56Z

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 · 2021-09-03T07:27:28Z

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 "create-next-app@11.1.2" 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 · 2021-09-03T07:48:32Z

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 · 2021-09-03T10:21:23Z

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

bumbeishvili · 2021-09-03T10:26:24Z

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 · 2021-09-03T10:34:48Z

sorry, i confirmed again.
it was a mistake. #83 (comment)

airxiaotian · 2021-09-06T07:02:55Z

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

torchsmith · 2021-11-08T19:05:16Z

This directly relates to this issue:
asyncapi/asyncapi-react#177 (comment)

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 · 2021-11-08T19:06:02Z

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

bumbeishvili · 2021-11-08T19:34:03Z

Good to know, thanks

bumbeishvili · 2021-11-13T08:43:48Z

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

lfpacheco92 · 2021-11-22T13:37:18Z

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 · 2022-01-19T13:30:23Z

I'm facing the same issue on NextJs.

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

sdoxsee · 2023-06-30T02:14:02Z

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 · 2023-07-10T12:09:06Z

any updates?

bumbeishvili added the Possible Bug label Sep 2, 2021

bumbeishvili added the can't reproduce label Sep 2, 2021

bumbeishvili closed this as completed Nov 15, 2021

bumbeishvili reopened this Nov 22, 2021

bumbeishvili closed this as completed Dec 27, 2022

peter-mouland mentioned this issue Sep 27, 2023

add type module to fix module errors #312

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refresh - SyntaxError: Cannot use import statement outside a module #83

refresh - SyntaxError: Cannot use import statement outside a module #83

airxiaotian commented Sep 2, 2021 •

edited

Loading

bumbeishvili commented Sep 2, 2021

airxiaotian commented Sep 2, 2021

airxiaotian commented Sep 2, 2021 •

edited

Loading

bumbeishvili commented Sep 2, 2021

airxiaotian commented Sep 2, 2021

ouin81 commented Sep 3, 2021 •

edited

Loading

bumbeishvili commented Sep 3, 2021 •

edited

Loading

ouin81 commented Sep 3, 2021 •

edited

Loading

bumbeishvili commented Sep 3, 2021

ouin81 commented Sep 3, 2021

airxiaotian commented Sep 6, 2021

torchsmith commented Nov 8, 2021

torchsmith commented Nov 8, 2021

bumbeishvili commented Nov 8, 2021

bumbeishvili commented Nov 13, 2021

lfpacheco92 commented Nov 22, 2021

Lfaufau commented Jan 19, 2022

sdoxsee commented Jun 30, 2023

Standin-Alone commented Jul 10, 2023

refresh - SyntaxError: Cannot use import statement outside a module #83

refresh - SyntaxError: Cannot use import statement outside a module #83

Comments

airxiaotian commented Sep 2, 2021 • edited Loading

bumbeishvili commented Sep 2, 2021

airxiaotian commented Sep 2, 2021

airxiaotian commented Sep 2, 2021 • edited Loading

bumbeishvili commented Sep 2, 2021

airxiaotian commented Sep 2, 2021

ouin81 commented Sep 3, 2021 • edited Loading

bumbeishvili commented Sep 3, 2021 • edited Loading

ouin81 commented Sep 3, 2021 • edited Loading

bumbeishvili commented Sep 3, 2021

ouin81 commented Sep 3, 2021

airxiaotian commented Sep 6, 2021

torchsmith commented Nov 8, 2021

torchsmith commented Nov 8, 2021

bumbeishvili commented Nov 8, 2021

bumbeishvili commented Nov 13, 2021

lfpacheco92 commented Nov 22, 2021

Lfaufau commented Jan 19, 2022

sdoxsee commented Jun 30, 2023

Standin-Alone commented Jul 10, 2023

airxiaotian commented Sep 2, 2021 •

edited

Loading

airxiaotian commented Sep 2, 2021 •

edited

Loading

ouin81 commented Sep 3, 2021 •

edited

Loading

bumbeishvili commented Sep 3, 2021 •

edited

Loading

ouin81 commented Sep 3, 2021 •

edited

Loading