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
Related
I have a vue project which uses Vite in place of Webpack, and when I try to use import x from './src/assets/my/path/to/image.png' to resolve an image to compile-time URL, I am greeted by the following error message:
✘ [ERROR] No loader is configured for ".png" files: src/assets/my/path/to/image.png
The entire project is pretty close to the scaffold project given by npm init vue#latest (using vue3) so my vite.config.js is pretty basic:
export default defineConfig({
plugins: [vue(), VitePWA({})],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
manifest: true,
polyfillModulePreload: true,
}
});
What am I missing? How can I configure this? I can't find anything in Vite documentation about loaders.
I had a quite similar issue with my project that I couldn't really solve. The issue seemed that only initially loaded png files were added. Because I am new to Vite, my efforts with the vite.config.js were fruitless.
Instead, I found a different solution to import the assets (import img from '/path/to/img.png' ) in respective js files directly instead of vite.config.js. Since I used these assets for replacement images for toggling buttons, it was a quick fix. Maybe it helps you, too.
I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
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',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};
I have started a new vue-cli project with
vue create -n tailwind-demo
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
I have also add the following postcss.config.js:
module.exports = {
plugins: [
require("postcss-preset-env")({ stage: 0 }),
require("tailwindcss")(),
require("autoprefixer")()
]
};
When i run the yarn lint command it got the follow errors
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:3:5:
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:4:5:
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:5:5:
How can i import the plugins or how should i configure the eslint in Vue CLI for the postcss.config.js?
I have tried something like
import tailwindCss from "tailwindcss";
But i got a SyntaxError: Unexpected identifier while building.
It seems to work with the following postcss.config.js
module.exports = {
plugins: {
"postcss-preset-env": {
stage: 0
},
tailwindcss: {}
}
};
I'm integrating jqxWidgets(https://www.jqwidgets.com/vue/) into my nuxtjs app.
Here are the steps I did:
installed jqwidgest npm install --save jqwidgets-scripts
After I imported the jqxGrid on my page import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue"; I received an error for document is not defined.
I created a plugin jqwidgets.js and added the following code:
import Vue from 'vue'
import jqGridWidget from "jqwidgets-scripts";
Vue.use(jqGridWidget)
in nuxtconfig.js I added the following in plugins:
plugins: [{src: "~/plugins/jqwidgets.js", ssr: false}]
and in build I added:
build: {
extend(config, ctx) {
},
transpile: [/^jqwidgets-scripts($|\/)/],
}
I am still getting the document is not defined error in node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js
Does anyone know how to fix this?
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)