I am trying to deploy my Vue app to Vercel but encounter an error when I do. I do not think that the error is caused by Vercel per se, but something in the prod build causes a problem and I can't find what or why.
App is SSR enabled on Vite JS (Vue 3), using this boilerplate: https://github.com/frandiox/vitesse-ssr-template
After build and deployment, opening the / URL shows this error:
ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
at Store.install (/var/task/node_modules/vuex/dist/vuex.cjs.js:911:50)
at Object.use (/var/task/node_modules/#vue/runtime-core/dist/runtime-core.cjs.prod.js:3031:28)
at /var/task/api/renderer/main.js:2694:7
at /var/task/api/renderer/main.js:2098:44
at module.exports (/var/task/api/index.js:16:28)
at Server.<anonymous> (/var/task/___vc_helpers.js:813:19)
at Server.emit (events.js:376:20)
at parserOnIncoming (_http_server.js:896:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
Also, putting this in my main.ts file (trying to avoid problem), doesn't change anything:
app.config.devtools = false;
app.config.debug = false;
app.config.silent = true;
Content of my package.json that is used in the serverless deploy, in cas it's useful:
{
"private": true,
"dependencies": {
"node-fetch": "*",
"#vueuse/core": "^4.9.1",
"#vueuse/head": "^0.5.1",
"nprogress": "^0.2.0",
"vue": "^3.0.11",
"#vue/server-renderer": "^3.0.11",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.6",
"axios": "^0.21.1",
"#headlessui/vue": "^1.2.0",
"vuex": "^4.0.1"
}
}
Any idea of what I should look for?
Found it, seems like Vuex sets DevTools to true by default, just had to ste it to false:
const store = createStore({
devtools: false,
})
Related
EDIT: Instead of using Expo Fonts, I tried importing them from Google Fonts into the <Head/> under _document.js like so:
<Head>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght#400;500;700&family=Poppins:wght#300;400;500;600;700&display=swap" rel="stylesheet" />
</Head>
And it works wonderfully!
Original Question:
I have tried following Expo and my current next.config.js looks like this:
const { withExpo } = require("#expo/next-adapter");
const withFonts = require("next-fonts");
/** #type {import('next').NextConfig} */
const nextConfig = withExpo(
{
reactStrictMode: true,
swcMinify: true,
transpilePackages: [
"react-native",
"expo",
"expo-linear-gradient",
"expo-font",
"react-native-svg",
"lucide-react-native",
"prop-types",
// Add more React Native / Expo packages here...
],
experimental: {
forceSwcTransforms: true,
},
},
withFonts({
projectRoot: __dirname,
})
);
module.exports = nextConfig;
However, I keep getting the following error in the debug window:
./public/fonts/SpaceMono-Regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Current dependencies:
"dependencies": {
"expo": "^47.0.0",
"expo-font": "~11.0.1",
"expo-linear-gradient": "~12.0.1",
"lucide-react-native": "^0.115.0",
"next": "~13.1.1",
"next-fonts": "^1.5.1",
"prop-types": "^15.8.1",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-svg": "13.4.0",
"react-native-web": "~0.18.7"
},
I am enjoying using Next.js so far and this was my first bump on the road.
Thank you!
I've already searched and found some answers I could not replicate. The obvious answer would be my project do not know how to load .ttf and it should be fixed with Next-fonts. But I do not know how to set it up properly and tried various combinations from Stack and Expo with a few success, but the instant I changed font to e.g. Poppins or DM Sans, then the error instantly returned, even through the space-mono font worked a few times. I have no idea why it suddenly worked and suddenly didn't.
I installed a new package "vue-full-loading" to my project. It gives me an error if I reference the package
import loading from "vue-full-loading";
and build using vite. Any idea on what this error means ? Thank you!
Unexpected token.
if (isReadonly(target)) {
process.env.NODE_ENV !== 'production' && warn("Set operation on key \"".concat(key, "\"
failed: target is readonly."));
^
return;
}
Below are the dependencies I have.
"dependencies": {
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"bootstrap-vue": "^2.22.0",
"pinia": "2.0.23",
"vue": "3.2.41",
"vue-router": "4.1.5",
"vue-full-loading": "^1.2.1"
},
"devDependencies": {
"#vitejs/plugin-vue": "3.1.2",
"vite": "3.1.8"
}
vue-full-loader was last updated 5 years ago according to npm - it's highly unlikely it would be compatible with the latest version of Vue, which is what you're running. The package will likely have to be updated to use with Vue 3. If you have the option you may want to try it with an earlier version of Vue, but I would recommend looking for an alternative.
Here is a similar package that has been updated in the last month or so:
https://www.npmjs.com/package/vue-loading-overlay
Stack:
Vue 3 (Options API)
Vite
TailwindCSS
Context:
I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire app reloads on every save regardless of what changes, including adding a single whitespace which is removed via auto-format.
New Warning:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
This warning seemingly came out of nowhere and I can't find any information about it online besides a reference to it in the newest Volar relase notes. I've tried downgrading to an older version and then disabling it entirely. This didn't work.
Config
// vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
Note that I use npm run serve which would normally be npm run dev. I swapped them because of muscle memory. This shouldn't be an issue but it's noteworthy.
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.11.0",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}
After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.
you can try Temporarily disable Volar plugin, it won't show waining tip
I also encountered this problem, and then I disabled the volar plug-in so that there is no longer this warning message, but I do not know z there is no harm
Add the following entry to your project's jsconfig.json and you're good to go:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
I think it's better than disabling Volar, especially if it's useful for you, because that's not a bug, but a new feature. Check out the changelog for more info:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md
I'm getting this Postcss warning:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)
But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.
I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.
This is my package.json
{
"name": "vip-english-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#dzangolab/vue-accordion": "^1.2.0",
"#nuxtjs/axios": "^5.13.6",
"express": "^4.17.1",
"googleapis": "^91.0.0",
"vue-carousel": "^0.18.0",
"vue-check-view": "^0.3.0",
"vue-gapi": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^1.3.0",
"core-js": "^3.19.1",
"nuxt": "^2.15.8",
"nuxt-windicss": "^2.0.12"
}
}
Do anyone have any idea?
Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.
I'm using the following dependencies
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
In nuxt.config.js, under the build options, add the following as shown below. That worked for me.
build: {
postcss: null,
}
Hope it helps
PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).
just add to nuxt.config.js
build: {
postcss: null,
loaders: {
vue: {
prettify: false
}
}
}
I'm using nuxt 2.15.8 & having the same issue.
The following command & config will supress the warning.
npm i -D #nuxt/postcss8 #nuxtjs/style-resources
In nuxt.config.js, edit/add:
buildModules: [
'#nuxtjs/style-resources',
'#nuxt/postcss8',
],
build: {
postcss: {
plugins: {
},
preset: {
}
}
}
In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)
build: {
postcss: {
preset: {
autoprefixer: {
overrideBrowserslist: ['last 3 versions', '> 1%']
}
}
}
}
After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.
Editing the .browserlistrc file did not help.
For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else
recently i decided to migrate from webpack 3 to webpack 4. It almost works well until i started to run tests. If my application really works well, in fact, no tests are detected by Karma.
I use webpack throught a wrapper (symfony encore) which works well. I upgraded all packages to latest version, but it doesn't worked. I added a test file that doesn't rely on Vue, and then this test is detected and run.
So i can say that Karma try to load the VueJS spec files, but when the test try to import the SingleFileComponent (Movie.component.vue per exemple) then it stops without any warning. So maybe the problem is related to the preprocessor that might not work.
here is the karma config and the webpack encore config:
const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfig = require('./karma.webpack.config.babel');
const webpack = require('webpack');
// Configure specific plugin
for (const plugin of webpackConfig.plugins) {
// Set writeToFileEmit option of the ManifestPlugin to false
if ((plugin instanceof ManifestPlugin) && plugin.opts) {
plugin.opts.writeToFileEmit = false
}
}
// Remove entry property (handled by Karma)
delete webpackConfig.entry;
// Karma options
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: [
'./assets/js/vuejs/tests/DebugKarma.spec.js',
'./assets/js/vuejs/tests/Movie.spec.js'
],
preprocessors: {
'./assets/js/vuejs/tests/DebugKarma.spec.js': ['webpack'],
'./assets/js/vuejs/tests/Movie.spec.js': ['webpack']
},
browsers: ['Chrome'],
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only',
noInfo: true,
},
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-spec-reporter'),
require('karma-junit-reporter'),
require('karma-jasmine-html-reporter'),
],
chromeLauncher: {
exitOnResourceError: false
},
reporters: ['kjhtml', 'spec', 'junit'],
junitReporter: {
outputDir: './var/report', // results will be saved as $outputDir/$browserName.xml
outputFile: 'karma.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
suite: '', // suite will become the package name attribute in xml testsuite element
useBrowserName: false, // add browser name to report and classes names
nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
properties: {}, // key value pair of properties to add to the <properties> section of the report
xmlVersion: 1 // use '1' if reporting to be per SonarQube 6.2 XML format
},
autoWatch: true,
});
}
const Encore = require('#symfony/webpack-encore')
Encore
.configureRuntimeEnvironment('dev-server')
// the project directory where compiled assets will be stored
.setOutputPath('./var/tests/karma/')
.setPublicPath('/')
.cleanupOutputBeforeBuild()
.disableSingleRuntimeChunk()
.addEntry()
.enableSassLoader(function(sassOptions) {}, {
resolveUrlLoader: false,
})
.enableVueLoader()
let config = Encore.getWebpackConfig();
module.exports = config
and here is a part of my package.json
"dependencies": {
"#api-platform/admin": "^0.6.2",
"#rebolon/json-reviver": "0.0.7",
"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link": "^1.2.9",
"apollo-link-error": "^1.1.8",
"apollo-link-http": "^1.5.12",
"axios": "^0.18.0",
"devextreme": "^18.2.6",
"devextreme-vue": "^18.2.6",
"graphql": "^14.1.1",
"graphql-tag": "^2.10.1",
"offline-plugin": "^5.0.6",
"prop-types": "^15.7.2",
"quasar-extras": "^1.0.3",
"quasar-framework": "^0.15.15",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"rxjs": "^6.4.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue": "^2.6.8",
"vue-apollo": "^3.0.0-beta.28",
"vue-router": "^3.0.2",
"vuelidate": "^0.7.4"
},
"devDependencies": {
"#angular/cli": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/preset-react": "^7.0.0",
"#symfony/webpack-encore": "^0.24.0",
"bootstrap": "^4.3.1",
"create-react-app": "^1.5.2",
"jasmine": "^3.3.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-junit-reporter": "^1.2.0",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"rxjs-tslint": "^0.1.7",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^5.3.3",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.8"
},
"browserslist": "> 1%"
And finally the karma output wher we can only see DebugKarma result, but not the Movie result:
npm run test-karma
> sf-flex-encore-vuejs#0.0.1 test-karma php-sf-flex-webpack-encore-vuejs
> karma start karma.conf.js --single-run
(node:20628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i ｢wdm｣: wait until bundle finished: noop
i ｢wdm｣: wait until bundle finished: noop
DONE Compiled successfully in 1235ms 10:10:06
i ｢wdm｣:
i ｢wdm｣: Compiled successfully.
08 03 2019 10:10:06.850:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
08 03 2019 10:10:06.853:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
08 03 2019 10:10:06.872:INFO [launcher]: Starting browser Chrome
08 03 2019 10:10:08.582:INFO [Chrome 72.0.3626 ]: Connected on socket hy9Imp7g7Qgdq0WuAAAA with id 25037598
Chrome 72.0.3626 INFO: 'This log message must be displayed in devTools of Karma browser'
Chrome 72.0.3626 INFO LOG: 'This log message must be displayed in devTools of Karma browser'
Debug Karma conf
√ config is ok
TOTAL: 1 SUCCESS
Chrome 72.0.3626 : Executed 1 of 1 SUCCESS (0.007 secs / 0.001 secs)
TOTAL: 1 SUCCESS
You can get the whole project here: https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs/tree/feature/move-on-webpack4
Any clue is welcome, i really don't know how to fix this (neither how to debug it).
Thanks