I ran npm update on a large codebase recently, and now vite is having some issues compiling my SFC files.
> bedgg-frontend#0.0.0 dev
> vite
vite v2.9.14 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 208ms.
Unexpected token (1:30)
Unexpected token (1:30) (x2)
12:14:28 PM [vite] Internal server error: Unexpected token (1:30)
Plugin: vite:vue
File: /home/ben/projects/bed.gg-frontend/src/views/Profile.vue
1 | <script setup lang="ts">
2 | import SkinViewer from "#/components/Player/SkinViewer.vue";
| ^
3 | import LineChart from "#/components/Charts/LineChart.vue";
4 | import PlayerStats from "#/components/Stats/Cards/PlayerStats.vue";
at instantiate (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:72:32)
at constructor (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:359:12)
at Object.raise (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:3339:19)
at Object.unexpected (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:3377:16)
at Object.getExpression (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:12232:12)
at Object.getExpression (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:11162:18)
at Object.parseExpression (/home/ben/projects/bed.gg-frontend/node_modules/#babel/parser/lib/index.js:16618:17)
at processExp (/home/ben/projects/bed.gg-frontend/node_modules/#vue/compiler-sfc/dist/compiler-sfc.cjs.js:4979:30)
at Array.CompilerDOM.transform.nodeTransforms (/home/ben/projects/bed.gg-frontend/node_modules/#vue/compiler-sfc/dist/compiler-sfc.cjs.js:4949:45)
at traverseNode (/home/ben/projects/bed.gg-frontend/node_modules/#vue/compiler-core/dist/compiler-core.cjs.js:2162:41)
to me this seems like a configuration error or some sort of bug with vite.
When I updated I went from v2.9.6 to v2.9.14.
vite config
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import { join, resolve } from "path";
export default defineConfig({
mode: "development",
server: {
port: 3000,
},
resolve: {
alias: {
"#": join(__dirname, "./src"),
},
},
plugins: [
vue(),
],
define: { "process.env": {} },
css: {
preprocessorOptions: {
scss: { additionalData: `#use "sass:math";#import "#/styles/_variables.scss";` },
},
},
});
tsconfig:
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vuetify", "node"],
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
Any idea why this is happening? I've looked at many Github issues to no avail.
Related
An example of the imports follows:
import { useAppDispatch, useAppSelector } from '~/redux/hooks'
import * as walletActions from '~/redux/wallet/actions'
import { actions, selectState as selectWalletState } from '~/redux/wallet/slice'
import { multichain } from '~/services/multichain'
import { config } from '~/settings/config'
In my tsconfig.json...
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*":["./src/*"]
},
...
This all compiles, and typescript understands my imports; I can click around them in VSCode.
However, when I open the app in Expo, I get the error
Unable to resolve module ~/redux/hooks from ... ~/redux/hooks could not be found within the project or in these directories:
node_modules
Here is my babel.config.js
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
['react-native-reanimated/plugin'],
[
'module:react-native-dotenv',
{
envName: 'APP_ENV',
moduleName: '#env',
path: '.env',
},
],
[
'module-resolver',
{
alias: {
'~/': './src/',
},
},
],
],
}
}
what do I need to prescribe in order to enable pwa?
when i do "Analyze page load", I get information that
pwa is disabled.
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
injectRegister: 'auto',
}),
],
})
Are you running in dev by any chance?
If you want to check it in dev, add the devOptions option to the plugin configuration
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
devOptions: {
enabled: true
}
})
]
})
Typically the configuration I use in my projects is always more or less this:
VitePWA({
includeAssets: ["favicon.ico", "apple-touch-icon.png", "logo.svg"],
manifest: {
name: "Name App",
short_name: "Short Name",
description: "Description",
theme_color: "#ffffff",
icons: [
{
src: "pwa-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "pwa-512x512.png",
sizes: "512x512",
type: "image/png",
},
],
},
})
I am trying to build a component library with svelte. I tried to build it with:
npm build
I got the error message:
Plugin typescript: #rollup/plugin-typescript TS2307: Cannot find module './components/MyComponent.svelte' or its corresponding type declarations.
The components I want to export are in the index.tsx:
export { default as MyComponent } from "./components/MyComponent.svelte";
My tsconfig:
{
"extends": "#tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
"compilerOptions": {
"target": "es2016",
"module": "esnext",
"outDir": "dist",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"importsNotUsedAsValues": "remove"
}
My rollup.config.js:
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import autoPreprocess from 'svelte-preprocess';
import typescript from '#rollup/plugin-typescript';
import nodeResolve from '#rollup/plugin-node-resolve';
const pkg = require('./package.json');
export default {
input: 'src/index.tsx',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: false,
},
{
file: pkg.module,
format: 'esm',
sourcemap: false,
},
],
plugins: [
json({ compact: true }),
svelte({
preprocess: autoPreprocess(),
}),
resolve(),
nodeResolve(),
typescript({ sourceMap: true, rootDir: './src' }),
peerDepsExternal(),
postcss({
extensions: ['.css'],
}),
],
};
Does anyone already had such a problem? Thanks in advance!
You may have to add a type declaration like this:
import type { SvelteComponentTyped } from 'svelte';
declare module '*.svelte' {
export default SvelteComponentTyped;
}
The svelte package also provides something like this via svelte/types/runtime/ambient.d.ts, though it may not be visible to tsc depending on configuration.
Maybe you could also include this file somehow via the tsconfig.json.
I am suffered by IE compatibility. (my vue version is 3.1.0, nuxt is 2.3.4)
It keeps error with Object.assign. Here is the list what I have tried.
babel-preset-vue-app(https://www.npmjs.com/package/babel-preset-vue-app). Heard that it does not support vue2.X. I followed the description on this post. It gets an error while building source.
Adding babel-polyfill in nuxt.config.js. It does not error, but still I got Object.assign error on the page.
Install babel/plugin-transform-object-assign. It also does not make any error in build process, but got Object assign thing in the page.
Is there any option I can try to feet IE11 compatibility?
Here is my current .babelrc and nuxt.config.js.
.babelrc
{
"presets": [
[
"env",
{
"modules": false
}
],
[ "vue-app",
{
"useBuiltIns": true,
"targets": {
"ie": 9,
"uglify": true
}
}
]
],
"plugins": [
"#babel/plugin-transform-object-assign",
"transform-vue-jsx",
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"~sbdc": "./src/sbdc"
}
}
]
]
}
build option in nuxt.config.js
build: {
babel: {
presets: [
['vue-app', {
useBuiltIns: true,
targets: { ie: 9, uglify: true }
}
]
]
},
optimization: {
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](babel-polyfill|moment|lodash|axios|get-size|jquery|js-cookie|jwt-decode|numeral|vuetify)[\\/]/,
name: 'utilityVendor'
}
}
}
},
output: {
publicPath: serviceConfig.pwa_publicPath || false
},
extractCSS: true,
plugins: [
new webpack.ProvidePlugin( {
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
} )
]
}
Thanks for sharing you solutions!
======= Edited in 0114 =============
Etra information #1.
When I look at the error on ie11 browser, it automatically transform code like below
return {layout:"popup",data:[{resultBody:Object.assign(Object.create(null), ... sorry, sensitive data
while the original code is...
asyncData: async function ({req}) {
return {
resultBody: req.body,
};
},
req.body is supported by body-parser.
After hours of struggling, I solved this with not good way(In my thought).
I just add object-assign polyfill js to nuxt.js
module.exports = {
...
head: {
script: [ { src: '/js/object-assign.js' } ]
},
...
};
But I still want to know the proper way to apply babel-polyfill into nuxt project.
when I'm using ...mapState in vue.js, I ran into an error when bundling files with webpack. The error is
Module build failed: SyntaxError: Unexpected token.
I've tried kinds of babel plugins such as stage-0 and transform-object-rest-spread.
Howerver, none seems to be ok for me. Would you please so kind tell me how to solve it?
the source code is
<script type="text/babel">
import { mapState } from 'vuex';
let [a, b, ...other] = [1,2,3,5,7,9]; // this line is ok
console.log(a);
console.log(b);
console.log(other);
export default{
computed:{
localComputed(){
return 10;
},
...mapState({ //this line caused the error
count: state => state.count
})
},
methods: {
increment() {
this.$store.commit('increment');
},
decrement() {
this.$store.commit('decrement');
}
}
}
</script>
and this is the webpack config fragment
{
test: /\.(js|es|es6|jsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['react'],
['es2015', {modules: false, loose: true}],
['stage-2']
],
plugins: [
['transform-runtime'],
// https://github.com/JeffreyWay/laravel-mix/issues/76
['transform-object-rest-spread'],
['transform-es2015-destructuring']
],
comments: false,
cacheDirectory: true
}
},
{
loader: 'eslint-loader',
options: {
configFile: eslintConfigPath
}
}
],
exclude: excludeReg
}
I had a similar problem a while ago. As far as I can see, your issue is that your babel-loader does not currently work on .vue files (which is correct as such).
The vue-loader, which handles .vue files, uses babel internally as well, but it won't use webpack's babel-loader config. The easiest way to provide a config for babel in the vue-loader is (unfortunately) creating a separate .babelrc file with your babel config in the root folder of your project:
.babelrc
{
presets: [
["react"],
["es2015", { "modules": false, "loose": true}],
["stage-2"]
],
plugins: [
["transform-runtime"],
["transform-object-rest-spread"],
["transform-es2015-destructuring"]
]
}
Note that .babelrc requires valid JSON.