How to I debug systemJS error loading js as "" from - npm

I am getting the following error:
system.src.js:123 Uncaught (in promise) Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8000/dist/jquery.js
Error: XHR error (404 Not Found) loading http://localhost:8000/dist/jquery.js
Error loading http://localhost:8000/dist/jquery.js as "jquery" from http://localhost:8000/jspm_packages/npm/toastr#2.1.2/toastr.js
How do I go about fixing this?
I have done npm install and jspm install.
Thanks!

You need to make sure that jquery is mapped to the correct path in node_modules and also any modules that depend on jquery have the dependency explicitly declared:
map: {
'jquery' : 'path_to_jquery'
},
meta: {
'file_that depends_on_jquery' : {
deps: ['jquery']
}
}

Related

TypeError: Cannot read properties of undefined (reading 'call') on build but not dev

I am running a vite.js app with web3 installed.
When I run the app in dev mode, all works fine but when I run it in production mode (build) it fails with:
"TypeError: Cannot read properties of undefined (reading 'call')".
I can confirm that the error comes from the contract method generated from my ABI:
contract.methods.isOwner(sender).call({from: sender}, function (err, res)
If I comment this line out I wont get the error.
You can reproduce the error by using my test repo:
download my test repo:
https://github.com/nybroe/web3_vite_call_of_undefined/tree/main
follow the readme with repo steps:
setup:
download the repro
navigate to "app"
npm install
dev test (which works)
npm run dev
check the console - no errors
build test (which breaks)
npm run build
npm run preview
check the console - you will see the following errors: "TypeError: Cannot read properties of undefined (reading 'call')"
https://stackoverflow.com/a/69021714
I use the option 2
In your vite.config.js, add web3:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})

metro error 'crypto', package itself specifies a `main` module field that could not be resolved, react-native and open api

running react native with ios simulator.
the backend uses open api, and has a folder in FrontEnd, to enforce schemas. I'm calling a class from this openapi auto generated file Frontend/sdk/api.ts.
in my frontend/service/doSomething.ts,
import { DefaultApi } from '../sdk/api // in frontend, autogenerated by open API
function func1 () {
const api = new DefaultApi() // calls crypto somehow
}
on build, i get this error
BUNDLE ./index.js
error: Error: While trying to resolve module `crypto` from file
`/app/node_modules/request/lib/helpers.js`, the package
`/app/node_modules/crypto/package.json` was successfully found.
However, this package itself specifies a `main` module field that
could not be resolved (`/app/node_modules/crypto/index.js`. Indeed,
none of these files exist:
* /app/node_modules/crypto/index.js(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json)
* /app/node_modules/crypto/index.js/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json)
at DependencyGraph.resolveDependency (/app/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
at Object.resolve (/app/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async addDependency (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 2)
Failed: I've tried following However, this package itself specifies a `main` module field that could not be resolved adding to metro.config.js
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'], //add here
}
but it FAILS with same error.
the request package and crypto has been deprecated.

How to fix 'STACK: ReferenceError: [BABEL]' at running jest tests

at running npm test i get the following error for every existing typescript class.
im using vue, jest
STACK: ReferenceError: [BABEL] ... Unknown option: base.cwd. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`

Unable to resolve module `stream`

This error starting showing up all of a sudden.
Node : v10.16.3
React native : 0.60.5
react-native-cli: 2.0.1
bundling failed: Error: Unable to resolve module stream from /Users/username/React Native/SampleApp/node_modules/browser-stdout/index.js: Module stream does not exist in the Haste module map
It's giving error for this line :
var WritableStream = require('stream').Writable
I tried installing 'stream' via npm
npm install stream
Then other similar errors started showing up.
One option is to use the client package readable-stream. If dependencies are requiring stream, then i would suggest adding the following to your babel config as well.
yarn add readable-stream
yarn add -D babel-plugin-rewrite-require
babel.config.js
module.exports = {
// rest of config
plugins: [
// other plugins
[
'babel-plugin-rewrite-require',
{
aliases: {
stream: 'readable-stream',
},
},
],
],
};
just install stream using npm install stream and run the project again.

vue-service-cli build errors with file not specified

During the build process (using vue-service-cli buid, via vue ui gui), the following error is displayed but I can't find where the declaration is made for src/main.ts. vue: 2.5.21, vue-cli: 3.2.1
ERROR Failed to compile with 1 errors1:58:38 PM
This relative module was not found:
* ./src/main.ts in multi ./src/main.ts
ERROR Build failed with errors.
web.config.js
main.ts is defined in ClientApp
entry: { "main": "./ClientApp/main.ts" },
Is vue (or webpack) hard-wired to have a src dir?
Try clearing the webpack entry points beforehand:
// vue.config.js
module.exports = {
configureWebpack: config => {
config.entry('main')
.clear()
.add('./ClientApp/main.ts')
}
}