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',
},
],
},
})
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo
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.
Here is my repo with live demo https://github.com/alechance/nuxt-lodash. I'm using Nuxt with Vuetify + lodash-es, when running npm run dev and reload my page I got a SyntaxError: Unexpected token export with export default isArray;
Imported files of lodash-es library are not transpiled by babel. To fix that, Nuxt.js provides option to manually specify files that should be transpiled via transpile option.
Add following code to build section of nuxt.config.js:
build: {
transpile: [
'lodash-es'
],
// Other build options
}
I installed vue-chartjs and also added chart.js both using NPM
When I run npm start my server is started but in broswer console i get an error
TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Doughnut.extend is not a function
I'm not sure what this mean. I reinstalled all packages also installed this packages separete using npm install vue-chartjs
Can you show your code of your component? Webpack 3 ?
With vue-chartjs version 3 you have to create your components this way:
import {Doughnut} from 'vue-chartjs
export default {
extends: Doughnut,
mounted () {
this.renderChart(data, options)
}
}