I'm trying to set up my vue.config.js file and found that issue when I use defineConfig method from #vue/cli-service.
TypeError: defineConfig is not a function
vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
devServer: {
port: 3001,
},
});
defineConfig is undefined.
I was trying to look for it in cli-service folder, but (as suppose) there is no such method.
I'm using vue.js 3, yarn 1.22.17 and my #vue/cli version is 4.5.15.
Is it possible that defineConfig is for #vue/cli version 5..?
defineConfig macro is used by Vite not by Vue CLI, the right syntax for vue cli :
module.exports = {
devServer: {
port: 3001,
},
};
The defineConfig function is available in #vue/cli-service v5 but not v4. I had the same problem and updating to v5 fixed the problem. You can also see it explicitly mentioned in the Vue CLI docs (so it isn't specific to Vite).
Related
I have created an ionic app and added vue-i18n.
npx ionic start myapp tabs --type vue
npm install vue-i18n#next
I did the very first step of the VueI18n setup and added this to "./src/main.ts":
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
locale: 'de',
fallbackLocale: 'en',
messages: {en: {testMessage: 'Test message'}, de: {testMessage: 'Testnachricht'}}
});
When looking at the result after npx ionic serve I get the following warning in the browser console:
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
And I get this info in the browser console:
You are running a development build of vue-i18n.
Make sure to use the production build (*.prod.js) when deploying for production.
When I comment out the snippet added to "./src/main.ts" both the notifications disappear. So they really seem to be caused by vue-i18n.
After asking Google I still don't know what to do about these notifications. What are they telling me? Should I do something about them? What can I do specifically?
These are the files that were automatically created in the root folder of the new project:
./ionic.config.json
./cypress.json
./jest.config.js
./babel.config.js
./.gitignore
./package-lock.json
./package.json
./.eslintrc.js
./tsconfig.json
./capacitor.config.json
./.browserslistrc
Please also tell me where I would need to change something. Also
$ find . -type f ! -name package-lock.json -maxdepth 1 -exec grep -iH webpack {} \;
./tsconfig.json: "webpack-env",
so I will not know what to do if you tell me to "just set up webpack properly".
Now i am using this way to import the i18n, the warning is disapear
import { createI18n } from 'vue-i18n/index'
vue-i18n has instructions for every bundler how to set global feature flags so this warning will go away
https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags
I'm using Vite, and I added this to vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
define: {
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
// ...
});
This is a known bug apparently. They say it will be fixed in the 9.2 version.
See more info in this thread: https://github.com/intlify/vue-i18n-next/issues/391
I got the same warning in my console with the old package. Then I updated the project to "vue-i18n": "^9.2.0-beta.15" and it was fine.
First install vue-18n to latest package (^9.2.0-beta.15):
npm i --save vue-i18n#next
Then:
I created i18n.ts file on same path with main.ts
import { createI18n, LocaleMessages, LocaleMessageValue, VueMessageType } from 'vue-i18n';
/**
* Load locale messages
*
* The loaded `JSON` locale messages is pre-compiled by `#intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/
function loadLocaleMessages(): LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
const messages: LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> = {};
locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i);
if (matched && matched.length > 1) {
const locale = matched[1];
messages[locale] = locales(key).default;
}
});
return messages;
}
const setDateTimeFormats = {
short: {
year: 'numeric',
month: 'short',
day: 'numeric',
},
long: {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
},
};
const dateTimeFormats = {
en: setDateTimeFormats,
es: setDateTimeFormats,
de: setDateTimeFormats,
'en-GB': setDateTimeFormats,
};
export default createI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'tr',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages(),
dateTimeFormats,
});
And my main.ts file:
import i18n from './i18n';
app.use(i18n).use(store).use(router).mount('body');
I'm using Vue-cli, after this solution I resolve the same problem, just try it!
config in vue.config.js:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
**chainWebpack: config => {
config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
}**
})
Solution for Nuxt 3 ("nuxt": "3.0.0-rc.12") with Vite.
Just in case:
(You know that your Nuxt app use Vite, if you see "Vite client warmed up in ...ms" when starting server)
About configuring build tools:
https://v3.nuxtjs.org/migration/bundling/
yourApp/nuxt.config.ts :
export default defineNuxtConfig({
vite: {
define: {
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
}
})
vite.config.ts
alias: {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
npm i vue-i18n
import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs'
This works for me in Vue3.
My #vue/cli 5.0.3 version.
My vue-i18n version is 9.2.2.
I had vue-i18n#9.1.6. This version has a bug. Of course we can update to 9.2.2 (the latest at the moment), but this need Vue 3.2+ to have effectScope. To use Vue 3.2 application need current Typescript version as well. So we stick to 9.1.10 and added some code to vue.config.js
module.exports = {
//...
chainWebpack: (config) =>
config.plugin("feature-flags").tap((args) => {
args[0].__VUE_I18N_FULL_INSTALL__ = JSON.stringify(true);
args[0].__VUE_I18N_LEGACY_API__ = JSON.stringify(false);
return args;
}),
};
These manipulations sorted warning in my case.
Update both vue-i18n and #intlify/vite-plugin-vue-i18n to the next version.
npm i vue-i18n#next
npm i --save-dev #intlify/vite-plugin-vue-i18n#next
I was following a tutorial on a Full-Stack MEVN app with different folders for the client and server, and when it came time to join both, I notice my from-end is trying to make requests to the server it is running on instead of the express server.
This is my vite.config.js file as followed by the tutorial
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
alias: {
'#': path.resolve(__dirname, './src'),
},
plugins: [vue()],
devServer: {
proxy: "http://localhost:5001"
}
})
But when I try to use the GET method (that works fine on its own) I get a 404 error on my DevTools because I guess it is trying to perform tasks on the same server instead of my already developed express server.
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 created an ionic app and added vue-i18n.
npx ionic start myapp tabs --type vue
npm install vue-i18n#next
I did the very first step of the VueI18n setup and added this to "./src/main.ts":
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
locale: 'de',
fallbackLocale: 'en',
messages: {en: {testMessage: 'Test message'}, de: {testMessage: 'Testnachricht'}}
});
When looking at the result after npx ionic serve I get the following warning in the browser console:
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
And I get this info in the browser console:
You are running a development build of vue-i18n.
Make sure to use the production build (*.prod.js) when deploying for production.
When I comment out the snippet added to "./src/main.ts" both the notifications disappear. So they really seem to be caused by vue-i18n.
After asking Google I still don't know what to do about these notifications. What are they telling me? Should I do something about them? What can I do specifically?
These are the files that were automatically created in the root folder of the new project:
./ionic.config.json
./cypress.json
./jest.config.js
./babel.config.js
./.gitignore
./package-lock.json
./package.json
./.eslintrc.js
./tsconfig.json
./capacitor.config.json
./.browserslistrc
Please also tell me where I would need to change something. Also
$ find . -type f ! -name package-lock.json -maxdepth 1 -exec grep -iH webpack {} \;
./tsconfig.json: "webpack-env",
so I will not know what to do if you tell me to "just set up webpack properly".
Now i am using this way to import the i18n, the warning is disapear
import { createI18n } from 'vue-i18n/index'
vue-i18n has instructions for every bundler how to set global feature flags so this warning will go away
https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags
I'm using Vite, and I added this to vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
define: {
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
// ...
});
This is a known bug apparently. They say it will be fixed in the 9.2 version.
See more info in this thread: https://github.com/intlify/vue-i18n-next/issues/391
I got the same warning in my console with the old package. Then I updated the project to "vue-i18n": "^9.2.0-beta.15" and it was fine.
First install vue-18n to latest package (^9.2.0-beta.15):
npm i --save vue-i18n#next
Then:
I created i18n.ts file on same path with main.ts
import { createI18n, LocaleMessages, LocaleMessageValue, VueMessageType } from 'vue-i18n';
/**
* Load locale messages
*
* The loaded `JSON` locale messages is pre-compiled by `#intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/
function loadLocaleMessages(): LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
const messages: LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> = {};
locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i);
if (matched && matched.length > 1) {
const locale = matched[1];
messages[locale] = locales(key).default;
}
});
return messages;
}
const setDateTimeFormats = {
short: {
year: 'numeric',
month: 'short',
day: 'numeric',
},
long: {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
},
};
const dateTimeFormats = {
en: setDateTimeFormats,
es: setDateTimeFormats,
de: setDateTimeFormats,
'en-GB': setDateTimeFormats,
};
export default createI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'tr',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages(),
dateTimeFormats,
});
And my main.ts file:
import i18n from './i18n';
app.use(i18n).use(store).use(router).mount('body');
I'm using Vue-cli, after this solution I resolve the same problem, just try it!
config in vue.config.js:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
**chainWebpack: config => {
config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
}**
})
Solution for Nuxt 3 ("nuxt": "3.0.0-rc.12") with Vite.
Just in case:
(You know that your Nuxt app use Vite, if you see "Vite client warmed up in ...ms" when starting server)
About configuring build tools:
https://v3.nuxtjs.org/migration/bundling/
yourApp/nuxt.config.ts :
export default defineNuxtConfig({
vite: {
define: {
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
}
})
vite.config.ts
alias: {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
npm i vue-i18n
import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs'
This works for me in Vue3.
My #vue/cli 5.0.3 version.
My vue-i18n version is 9.2.2.
I had vue-i18n#9.1.6. This version has a bug. Of course we can update to 9.2.2 (the latest at the moment), but this need Vue 3.2+ to have effectScope. To use Vue 3.2 application need current Typescript version as well. So we stick to 9.1.10 and added some code to vue.config.js
module.exports = {
//...
chainWebpack: (config) =>
config.plugin("feature-flags").tap((args) => {
args[0].__VUE_I18N_FULL_INSTALL__ = JSON.stringify(true);
args[0].__VUE_I18N_LEGACY_API__ = JSON.stringify(false);
return args;
}),
};
These manipulations sorted warning in my case.
Update both vue-i18n and #intlify/vite-plugin-vue-i18n to the next version.
npm i vue-i18n#next
npm i --save-dev #intlify/vite-plugin-vue-i18n#next
I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.
I made a vue.config.js file at the root level project.
I try two things:
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
and:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.
Does anyone know how really activate the source-map with vue-cli 4?
Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
I then modified it to this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})
Which works enough for me to enable VSCode debugging in Chrome/Electron.
*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself.
For example
runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.
* Edit 10/12/2022
I had an older project that this answer didn't solve at all. After a yarn upgrade and #vue/cli upgrading, this configuration began working again!
You are looking for the ProjectOptions chainWebpack property.
chainWebpack?: (config: ChainableWebpackConfig) => void;
Try the following in your vue.config.js file:
/** #type import('#vue/cli-service').ProjectOptions */
module.exports = {
// https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
chainWebpack(config) {
config.devtool('source-map')
},
}