sheetjs
/
sheetjs
24
Fork 24
Code Issues 171 Pull Requests 12 Wiki Activity

react ReferenceError: require is not defined #2915

New Issue
Closed
opened 2023-04-11 10:00:17 +00:00 by 995854654 · 8 comments
995854654 commented 2023-04-11 10:00:17 +00:00
Copy Link

I have a problem to import xlsx package.

import React, { useState } from 'react'
import { Upload, Button } from 'antd'
import * as XLSX from 'xlsx';

when I write the third line of code,web exception occurred.

I have a problem to import xlsx package. ``` import React, { useState } from 'react' import { Upload, Button } from 'antd' import * as XLSX from 'xlsx'; ``` when I write the third line of code,web exception occurred.
Snipaste_2023-04-11_17-56-33.png
16 KiB
Snipaste_2023-04-11_17-56-33.png
sheetjs commented 2023-04-11 10:05:31 +00:00
Owner
Copy Link

Your bundler is pulling the CJS version rather than ESM. Update to the latest version (https://docs.sheetjs.com/docs/getting-started/installation/frameworks if you are using a framework). If the error still persists, change the import statement to

import * as XLSX from 'xlsx/xlsx.mjs';
Your bundler is pulling the CJS version rather than ESM. Update to the latest version (https://docs.sheetjs.com/docs/getting-started/installation/frameworks if you are using a framework). If the error still persists, change the import statement to ```js import * as XLSX from 'xlsx/xlsx.mjs'; ```
995854654 commented 2023-04-12 01:27:26 +00:00
Author
Copy Link

I have tried the solution by your provide,but the problem still exists.

I have tried the solution by your provide,but the problem still exists.
package.png
17 KiB
code.png
75 KiB
package.png code.png
sheetjs commented 2023-04-12 01:39:19 +00:00
Owner
Copy Link

How was the project created? (are you using webpack or vite or some other bundler? Any overridden configurations?)

https://docs.sheetjs.com/docs/demos/frontend/react#array-of-objects the examples here were tested on February 28 against create-react-app@5.0.1 and react-scripts@5.0.1.

How was the project created? (are you using webpack or vite or some other bundler? Any overridden configurations?) https://docs.sheetjs.com/docs/demos/frontend/react#array-of-objects the examples here were tested on February 28 against `create-react-app@5.0.1` and `react-scripts@5.0.1`.
995854654 commented 2023-04-12 01:59:19 +00:00
Author
Copy Link

The project have a file that name is webpack.config.js,created bycreate-react-app.I don't know the version of create-react-app`,because the project is created by a former employee of the business.

The project have a file that name is webpack.config.js` ,created by `create-react-app`.I don't know the version of `create-react-app`,because the project is created by a former employee of the business.
sheetjs commented 2023-04-12 02:03:50 +00:00
Owner
Copy Link

Look in package.json for the react-scripts dependency. If the version is a relative number (e.g. ^5.0.1 or ~5.0.1), run npm ls and look for the locally installed version of react-scripts (in a Linux or MacOS system, you can run npm ls | grep react-scripts)

Look in `package.json` for the `react-scripts` dependency. If the version is a relative number (e.g. `^5.0.1` or `~5.0.1`), run `npm ls` and look for the locally installed version of `react-scripts` (in a Linux or MacOS system, you can run `npm ls | grep react-scripts`)
995854654 commented 2023-04-12 02:11:27 +00:00
Author
Copy Link
"dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@babel/core": "7.1.6",
    "@svgr/webpack": "2.4.1",
    "antd": "^4.4.1",
    "axios": "^0.18.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.3.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-react-app": "^7.0.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "console-polyfill": "^0.3.0",
    "core-js": "^2.6.11",
    "css-loader": "1.0.0",
    "dayjs": "^1.8.29",
    "docx-preview": "^0.1.13",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "echarts": "^4.2.1",
    "echarts-for-react": "^3.0.2",
    "es5-shim": "^4.5.13",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.6",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "font-awesome": "^4.7.0",
    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "http-proxy-middleware": "^0.20.0",
    "identity-obj-proxy": "3.0.0",
    "immutability-helper": "^3.0.0",
    "jest": "^24.8.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "js-export-excel": "^1.1.2",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "0.4.3",
    "mockjs": "^1.0.1-beta3",
    "module": "^1.2.5",
    "moment": "^2.24.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pdfjs-dist": "^2.4.456",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.3.1",
    "postcss-safe-parser": "4.0.1",
    "react": "^17.0.0",
    "react-app-polyfill": "^0.2.0",
    "react-dev-utils": "^7.0.1",
    "react-dom": "^16.11.0",
    "react-file-viewer": "^1.2.1",
    "react-pdf": "^5.1.0",
    "react-pdf-js": "^5.1.0",
    "react-router-dom": "^5.0.0",
    "require": "^2.4.20",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "ssh2": "^0.8.5",
    "style-loader": "0.23.0",
    "styled-components": "^4.3.1",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.14",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3",
    "worker-loader": "^2.0.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js __jest__/__tests__"
  },

Sorry!!It seems that there is no such configuration.

``` "dependencies": { "@ant-design/icons": "^4.2.1", "@babel/core": "7.1.6", "@svgr/webpack": "2.4.1", "antd": "^4.4.1", "axios": "^0.18.0", "babel-core": "7.0.0-bridge.0", "babel-eslint": "9.0.0", "babel-jest": "23.6.0", "babel-loader": "8.0.4", "babel-plugin-named-asset-import": "^0.3.0", "babel-polyfill": "^6.26.0", "babel-preset-react-app": "^7.0.0", "bfj": "6.1.1", "case-sensitive-paths-webpack-plugin": "2.1.2", "chalk": "2.4.1", "console-polyfill": "^0.3.0", "core-js": "^2.6.11", "css-loader": "1.0.0", "dayjs": "^1.8.29", "docx-preview": "^0.1.13", "dotenv": "6.0.0", "dotenv-expand": "4.2.0", "echarts": "^4.2.1", "echarts-for-react": "^3.0.2", "es5-shim": "^4.5.13", "eslint": "5.6.0", "eslint-config-react-app": "^3.0.6", "eslint-loader": "2.1.1", "eslint-plugin-flowtype": "2.50.1", "eslint-plugin-import": "2.14.0", "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.11.1", "file-loader": "2.0.0", "font-awesome": "^4.7.0", "fork-ts-checker-webpack-plugin-alt": "0.4.14", "fs-extra": "7.0.0", "html-webpack-plugin": "4.0.0-alpha.2", "http-proxy-middleware": "^0.20.0", "identity-obj-proxy": "3.0.0", "immutability-helper": "^3.0.0", "jest": "^24.8.0", "jest-pnp-resolver": "1.0.1", "jest-resolve": "23.6.0", "js-export-excel": "^1.1.2", "lodash": "^4.17.11", "mini-css-extract-plugin": "0.4.3", "mockjs": "^1.0.1-beta3", "module": "^1.2.5", "moment": "^2.24.0", "optimize-css-assets-webpack-plugin": "5.0.1", "pdfjs-dist": "^2.4.456", "pnp-webpack-plugin": "1.1.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-preset-env": "6.3.1", "postcss-safe-parser": "4.0.1", "react": "^17.0.0", "react-app-polyfill": "^0.2.0", "react-dev-utils": "^7.0.1", "react-dom": "^16.11.0", "react-file-viewer": "^1.2.1", "react-pdf": "^5.1.0", "react-pdf-js": "^5.1.0", "react-router-dom": "^5.0.0", "require": "^2.4.20", "resolve": "1.8.1", "sass-loader": "7.1.0", "ssh2": "^0.8.5", "style-loader": "0.23.0", "styled-components": "^4.3.1", "terser-webpack-plugin": "1.1.0", "url-loader": "1.1.1", "webpack": "4.19.1", "webpack-dev-server": "3.1.14", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "3.6.3", "worker-loader": "^2.0.0", "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js __jest__/__tests__" }, ``` Sorry!!It seems that there is no such configuration.
sheetjs commented 2023-04-12 02:46:34 +00:00
Owner
Copy Link

Ok this issue can be reproduced

How to reproduce (click to show)

Those versions are consistent with react-scripts@2.1.3. The issue can be reproduced with:

npx create-react-app --scripts-version=2.1.3 sheetjs-react
cd sheetjs-react
npm i --save https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz

Edit src/App.js:

--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
+import * as XLSX from 'xlsx';
 import './App.css';
 
 class App extends Component {
@@ -9,7 +10,7 @@ class App extends Component {
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <p>
-            Edit <code>src/App.js</code> and save to reload.
+            Edit <code>{XLSX.version}</code> and save to reload.
           </p>
           <a
             className="App-link"

The development mode (npm run start) shows that error in the console.

The way to fix the project is to forcefully use the standalone build:

import * as XLSX from 'xlsx/dist/xlsx.full.min.js';

When you do upgrade the project versions, you can go back to the normal imports.

Ok this issue can be reproduced <details><summary><b>How to reproduce</b> (click to show)</summary> Those versions are consistent with `react-scripts@2.1.3`. The issue can be reproduced with: ```bash npx create-react-app --scripts-version=2.1.3 sheetjs-react cd sheetjs-react npm i --save https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz ``` Edit `src/App.js`: ```diff --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import logo from './logo.svg'; +import * as XLSX from 'xlsx'; import './App.css'; class App extends Component { @@ -9,7 +10,7 @@ class App extends Component { <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> - Edit <code>src/App.js</code> and save to reload. + Edit <code>{XLSX.version}</code> and save to reload. </p> <a className="App-link" ``` The development mode (`npm run start`) shows that error in the console. </details> The way to fix the project is to forcefully use the standalone build: ```js import * as XLSX from 'xlsx/dist/xlsx.full.min.js'; ``` When you do upgrade the project versions, you can go back to the normal imports.
995854654 commented 2023-04-12 02:59:07 +00:00
Author
Copy Link
import * as XLSX from 'xlsx/dist/xlsx.full.min.js';

Thank you so much.The above method is aviable.

``` import * as XLSX from 'xlsx/dist/xlsx.full.min.js'; ``` Thank you so much.The above method is aviable.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
master
sankhavaramsaitulasiram/feat-fix-2752
maybeswapnil/issue2737
gh-pages
scottysseus/2560_2
ivan-trusov/fix-basedate
nandanv2702/issue_1300
protobi/master
ThomasChan/master
grantfayvor/master
tom-groves/bug-1105/rounding-error
mgreter/master
v0.20.2
v0.20.1
v0.20.0
v0.19.3
v0.19.2
v0.19.1
v0.19.0
v0.18.12
v0.18.11
v0.18.10
v0.18.9
v0.18.8
v0.18.7
v0.18.5
v0.18.4
v0.18.3
v0.18.2
v0.18.1
v0.18.0
v0.17.5
v0.17.4
v0.17.3
v0.17.2
v0.17.1
v0.17.0
v0.16.8
v0.16.7
v0.16.6
v0.16.5
v0.16.3
v0.16.2
v0.16.1
v0.16.0
v0.15.6
v0.15.5
v0.15.2
v0.14.0
v0.13.5
v0.13.4
v0.13.3
v0.13.1
v0.13.0
v0.12.13
v0.12.12
v0.12.11
v0.12.10
v0.12.9
v0.12.8
v0.12.7
v0.12.6
v0.12.5
v0.12.4
v0.12.3
v0.12.2
v0.12.1
v0.12.0
v0.11.19
v0.11.18
v0.11.17
v0.11.16
v0.11.15
v0.11.14
v0.11.13
v0.11.12
v0.11.11
v0.11.10
v0.11.9
v0.11.8
v0.11.7
v0.11.6
v0.11.5
v0.11.4
v0.11.3
v0.11.2
v0.11.1
v0.11.0
v0.10.9
v0.10.8
v0.10.7
v0.10.6
v0.10.5
v0.10.4
v0.10.3
v0.10.2
v0.10.1
v0.10.0
v0.9.13
v0.9.12
v0.9.11
v0.9.10
v0.9.9
v0.9.8
v0.9.7
v0.9.6
v0.9.5
v0.9.4
v0.9.3
v0.9.2
v0.9.1
v0.9.0
v0.8.8
v0.8.7
v0.8.6
v0.8.5
v0.8.4
v0.8.3
v0.8.2
v0.8.1
v0.8.0
v0.7.11
v0.7.10
v0.7.9
v0.7.7
v0.7.6-i
v0.7.6-h
v0.7.6-a
v0.7.6
v0.7.5
v0.7.4
v0.7.3
v0.7.2
v0.7.1
v0.5.10
v0.5.9
v0.5.8
v0.5.7
v0.5.0
v0.4.3
Labels
Clear labels   
DBF

   
Dates

   
Defined Names

   
Features

   
Formula

   
HTML

   
Images

   
Infrastructure

   
Integration

   
International

   
ODS

   
Operations

   
Performance

   
PivotTables

   
Pro

   
Protection

   
Read Bug

   
SSF

   
SYLK

   
Style

   
Write Bug

   
good first issue
No Label
DBF
Dates
Defined Names
Features
Formula
HTML
Images
Infrastructure
Integration
International
ODS
Operations
Performance
PivotTables
Pro
Protection
Read Bug
SSF
SYLK
Style
Write Bug
good first issue
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: sheetjs/sheetjs#2915
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?