Ive only been learning Javascript/Typescript since the start of the year as I decided to create a group of microservices that are all linked together. I have my own API created in nestJS and found that whenever I wanted to call the API from each microservice i was repeating the same code over and over again so I moved it all into its own separate package which I can use.
Every other project I have which uses my npm package does not cause any errors and works fine however these projects are done using babel. I decided to implement my new package into my react frontend project but whenever I import the package and try to use it I get an error
SyntaxError: D:\Projects\Node\Lab Maker\redditbot-frontend\node_modules\labmaker-api-wrapper\lib\utils\BaseAPI.js: Missing class properties transform.
I managed to fix this issue by installing the babel class transform package but then was presented with another error.
Failed to compile.
./node_modules/labmaker-api-wrapper/lib/utils/BaseAPI.js 13:9
Module parse failed: Unexpected token (13:9)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class API {
> APIBase;
| APIUrl = 'http://localhost:3000';
|
I'm not sure what is wrong with my package or what causes this error but if anyone is able to take a look at the source code for my npm module and explain how I would fix this issue that would be helpful. https://github.com/LabMaker/API-Wrapper
this is the npm package https://www.npmjs.com/package/labmaker-api-wrapper
Related
I am trying build frontend app using npm run build using jenkins.But getting below error. Could you let me know, how to fix below error?
Creating an optimized production build...
Failed to compile.
./node_modules/xlsx/jszip.js 7855:112
Module parse failed: Unexpected token (7855:112)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| * not null.
| */
> function gen_bitlen(s, desc) /* deflate_state *s;*/ /* tree_desc *desc; /* the tree descriptor */*/{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
I am using nodejs version v16.18.1 and npm version 8.19.2..
I am using Angular 11 same as you, I think some upgrade packages when installed fail.
I overwrote the new package-lock.json with the old one and my Angular/react app was built and ran successfully again.
I bumped up the xlsx version from 0.17.5 to the latest one 0.18.5. We use angular 14.1.3. This solved the build issue.
But yet to see if that has any side effects on the excel functionality we use in the platform.
After upgrading xlsx version (as #PratikMehta mentioned), if you're dealing with import problems like this in your React project:
Attempted import error: 'xlsx' does not contain a default export (imported as 'XLSX').
Just change the following line
import XLSX from 'xlsx';
to
import * as XLSX from 'xlsx';
Thanks to:
https://onlyabug.com/issue/xlsx-is-not-exported-from-xlsx-2632
I have a simple setup with Strapi as a backend and React as a frontend. My goal is to get the result from the api I have in my backend using any tool out there. I first tried with Axios but seems to have an issue doing GET call because the 'Content-Lenght' wasn't generated automatically and I couldn't set it manually somehow.
I decided to use something else and one that I found that seems popular is node-fetch.
However, I can't even begin to use it. I install it locally to my project using:
npm i node-fetch --save
Then in my .js file:
import fetch from 'node-fetch';
const App = () => {
const result = fetch('https://api.github.com/');
}
export default App;
Then I try compiling or running the project and I get the following error message:
.\node_modules\node-fetch\src\index.js
Cannot find module: 'node:http'. Make sure this package is installed.
If I check the actual file in the node-fetch module. It is easy to see that the said module is imported there. However, I am unsure what this format for importing is even about with the 'node:xxxx'. I supose this is some kind of way to import basic node module but then, why would they be missing from my installation.
I tried it on me personal dev PC first and it failed. I then went ahead and troubleshooted for hours as to what it could be. I ended cleaning my entire project node_modules, rebuilding, uninstalling node.js and everything module installed globally. Reinstalling through nvm instead. Still didn't work.
I also tried installing "npm i http --save", which did nothing.
and today, I just tried this on a fresh project on my work computer and I have the exact same thing.
what could it be? Is this just a node-fetch issue in general?
("node-fetch": "^3.2.3")
The package node-fetch is a fetch implementation for Node.js not for the browser. In React you should be able to use fetch without installing and importing any package because fetch is part of the browser API and is present on the window object (window.fetch).
For browsers that don't support fetch you need a polyfill, check Can I Use for browser support and use whatwg-fetch as a polyfill.
See this for a polyfill solution for CRA:
https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md
See this for examples on how to use fetch in React:
https://reactjs.org/docs/faq-ajax.html
I've been doing a lot of React projects which use the same components. I came to know about npm link recently, and I thought I could use it for code sharing locally.
So, I isolated some React components (calling 'A') in a directory and made a link by 'npm link' command and also 'npm link {package name}' in my projects to use it. I wrote some dependencies which 'A' depends on like styled-components and React in peerDependencies.
Basically, what I thought was the packages which 'A' depends on
doesn't need to be installed in 'A', but installed in main project which actually uses the source code, so I put them in peerDependencies. However, when I build the main project with webpack, it gives errors like
Module not found: Error: Can't resolve 'react/jsx-runtime'
Module not found: Error: Can't resolve 'react
Module not found: Error: Can't resolve 'styled-components'
I installed those modules in 'A' to figure it out, and it built successfully, but also invoked another error something like another copy of react, so I got lost after that.
I want to know what I am doing wrong and how to fix this. A little bit of hint would be much appreciated.
I'm working on an open source electron project which I am building using webpack. One requirement for my project is to use the nodegit library which has to be built as a native module.
I've followed what appears to be conventional advice when working with native modules and electron. That is, I run electron-rebuild, have configured the source package to use and finally have configured node-loader to catch the import of any .node files.
Unfortunately, when I go to include the module, I end up with this error:
ERROR in ./node_modules/nodegit/dist/nodegit.js
Module not found: Error: Can't resolve '../build/Debug/nodegit.node' in
'C:\Users\atrauzzi\Development\atrauzzi\gerty\node_modules\nodegit\dist'
# ./node_modules/nodegit/dist/nodegit.js 18:11-49
# ./src/Layer/Domain/Thunktor/Git/CloneGitRepository.ts
# ./src/Layer/Gerty/Component/Repository/AddGitHubRepository.tsx
# ./src/Layer/Gerty/Component/Repository/AddRepository.tsx
# ./src/Layer/Gerty/Component/Workspace.tsx
# ./src/Layer/Gerty/Component/App.tsx
# ./src/Layer/Gerty/GertyServiceProvider.ts
# ./src/Bundle/GertyElectron.ts
The only thing I can see that's suspicious at this point is that when I rebuild the module to work with electron, I only get a Release directory, when the import seems to be looking for Debug:
This could be a red herring however as nodegit is written to try Debug as a fallback after Release has failed.
The general ask here is "How do I get this native module working in my project?".
I also have a corresponding question over at the repo, although on the off chance that my issue is unrelated to the library itself, or that there are some battle-worn veterans of native modules in electron, I figured SO would be a good place to check as well.
Try configuring your webpack by specifying the native module as an external dependancy rather than load it using the node-loader.
https://webpack.js.org/configuration/externals/
I'm trying to make use of the axios library to call some API endpoints.
My project setup is a Phoenix app (with brunch for asset management) and a React app (all in the web/static/js directory)
Most npm modules are ok, I do:
npm install --save _module-name_
Then I add the module to the brunch-config.js into the npm whitelist array.
Which I've done with axios, so it doesn't complain that it cannot find the library.
However, when I try and use axios e.g axios.post
I get the following error in the JS Console:
Cannot find module "axios/lib/adapters/xhr"
It's like brunch isn't loading in the axios dependencies (even though I can see that file if i navigate to node_modules/axios/lib/adapters
Has anyone had this issue (with any npm module and brunch/phoenix) and if so how do you go about fixing it?
Update
It seems to be a wider spread problem with brunch.
I also cannot use "React-Bootstrap" I get a similar error where it cannot find the sub-dependencies....
I had the same issue and updated brunch to the latest (2.7.5 at the time), which resolved my issue.
See https://github.com/brunch/brunch/issues/1136