Uncaught SyntaxError: Unexpected token '<' | after “yarn add xlsx” | React Typescript

2
votes

I'm developing project in React (type script). I wanted to add new feature for export/import excel files and I decided to use xlsx library https://www.npmjs.com/package/xlsx So my issue is that I ran "yarn add xlsx" and my app is giving me error "Uncaught SyntaxError: Unexpected token '<' |". I didn't do any imports just yarn add xlsx and I've got this error. [![enter image description here][1]][1] Compilation is successful no other errors.

What's strange is that I found out when I'll do this hack in my project:

npm install xlsx
yarn install

then everything is working just fine. I tried on different computers yarn add xlsx in the same project and everywhere it was not working... But then I decided to implement some basic functionality using xlsx added by npm locally and deployed my project on linux docker without "npm install xlsx" and it's working there!

Maybe something wrong with the file system or fs library?

EDIT: NEW INFORMATION It turns out that when I will do such scenario

  • yarn install
  • yarn add xlsx

everything works

but if I'll do

  • yarn install
  • yarn add xlsx
  • yarn install

error appears!

So after running yarn install some dependencies are installed and that's why it's failing It's not good because when I'll commit my changes then other developers will install dependencies using "yarn install"

1
reactjstypescriptxlsxyarnpkgreact-scripts

1 Answers

1
votes

I had unexpected token because I used %PUBLIC_PATH% variable in my index.html so I have to define this variable in .env file and of course I have it there

PUBLIC_PATH:/my-app/

But I didn't have this variable in .env.development file and everything was just fine until I updated react-scripts. So in react-scripts 3.2.0 it was by default "/" and after I updated react scripts to 3.4.0 it was failing with unexpected token error. I simply added 

PUBLIC_PATH:/

to my .env.development file and everything works now