I'm wanted to add font-awesome in my universal NuxtJs app. so i used the vue-awesome package for that.
Now after istalling the package i got this error:
Unexpected identifier
After reading from nuxt repo on github (nuxt repo 1, nuxt repo 2), i realised that the issue comes when rendering it on the server. SSR.
So for dev sake i silenced it with :
in nuxt.config.js
plugins: [{ src: '~plugins/vue-awesome', ssr: false },]
After developing, i had to face it, and i got stuck at this error :
"Unexpected token <"
here is the code :
~/plugins/vue-awesome
import Vue from 'vue';
import Icon from 'vue-awesome/components/Icon.vue';
import './icons.js';
Vue.component('icon', Icon);
~/plugins/icons.js
import 'vue-awesome/icons/sign-in-alt'
import 'vue-awesome/icons/shopping-basket'
...
nuxt.config.js
module.exports = {
build: {
extend(config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
} else {
config.externals = [ nodeExternals({
whitelist: ['vue-awesome']
})]
}
}
},
plugins: ['~plugins/vue-awesome.js']
}
Finanlly fixed it
nuxt.config.js
plugins: [
'~plugins/vue-awesome',
],
build: {
transpile: [/vue-awesome/]
},
Related
With the following webpack.common.js:
const pathtoresolve = require('path');
const paths = require('./paths')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// Where webpack looks to start building the bundle
entry: [ 'whatwg-fetch', paths.src + '/main.js'],
resolve: {
extensions: [ '.js', '.vue' ],
alias: {
'components': pathtoresolve.resolve(__dirname, '../src/components/'),
'images': pathtoresolve.resolve(__dirname, '../src/images/'),
'styles': pathtoresolve.resolve(__dirname, '../src/styles/'),
}
},
// Where webpack outputs the assets and bundles
output: {
path: paths.build,
filename: '[name].bundle.js',
publicPath: '/',
},
// Customize the webpack build process
plugins: [
// Vue plugin for the magic
new VueLoaderPlugin(),
// Removes/cleans build folders and unused assets when rebuilding
new CleanWebpackPlugin(),
// Copies files from target to destination folder
new CopyWebpackPlugin({
patterns: [
{
from: paths.public,
to: 'assets',
globOptions: {
ignore: ['*.DS_Store'],
},
},
],
}),
// Generates an HTML file from a template
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',
favicon: paths.src + '/images/favicon.png',
// TODO This isn't returning HTML. What did it return??
template: '!!vue-loader!' + paths.src + '/App.vue', // template file (explicitly vue)
filename: 'index.html', // output file
}),
],
// Determine how modules within the project are treated
module: {
rules: [
// JavaScript: Use Babel to transpile JavaScript files
{test: /\.vue$/, loader: 'vue-loader' },
{test: /\.js$/, exclude: /node_modules/, use: ['babel-loader']},
// Styles: Inject CSS into the head with source maps
{
test: /\.(scss|css)$/,
use: [
// Note: Only style-loader works for me !!!
// 'vue-style-loader',
'style-loader',
{loader: 'css-loader', options: {sourceMap: true, importLoaders: 1}},
{loader: 'postcss-loader', options: {sourceMap: true}},
{loader: 'sass-loader', options: {sourceMap: true}},
],
},
// Images: Copy image files to build folder
{test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource'},
// Fonts and SVGs: Inline files
{test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline'},
],
},
}
I get the error:
$ yarn run client-build && yarn run serve
$ node client/build/app.js
building for production...
assets by status 751 KiB [cached] 4 assets
Entrypoint main = js/runtime.06de30f0b0451051a1b0.bundle.js styles/main.3b829f3c5154760383f9.css js/main.ec103c819b2711f469d3.bundle.js
ERROR in unable to locate 'D:\IdeaProjects\AIPlatform\oml\api\client\public' glob
ERROR in Error: The loader "D:\IdeaProjects\AIPlatform\oml\api\client\src\App.vue" didn't return html.
My vue template looks like:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
But the vue loader was invoked explicitly, so should be returning HTML from my Vue template.
This is using webpack#^5.8.0, html-webpack-plugin#^5.4.0, vue-loader#^15.9.8, and vue-template-compiler#^2.6.14 . (package.json would have been included, except StackOverflow refuses to allow posts that are too dense with code.)
My goal here is to get a html file out of this vue file using webpack. Any suggestions?
Any suggestions?
I'm creating a project in Rails with vue, for this I'm working with webpack, what happens and my text editor, atom IDE, does not process the .vue files, I've tried the steps that the documentation recommends, but I do not know what I'm doing wrong
I provided loading the vue-loader by npm, but I still can not see the .vue files in my project, then I did it by configuring in the webpack.config.js file, and nothing. Then I leave the links of the things I did that did not work.
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import OptimizeCssAssetsPlugin from '../../../src/';
module.exports = {
entry: './index',
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: { loader: 'style-loader' },
use: {
loader: 'css-loader',
options: { minimize: true }
}
},
vue: {
loaders: {
sass: 'style!css!sass?indentedSyntax',
scss: 'style!css!sass'
}
},
plugins: [
new ExtractTextPlugin('file.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /optimize-me\.css/g
})
};
I hope to be able to work the .vue files
Having trouble using rollup-plugin-postcss with sapper-template:
npx degit sveltejs/sapper-template#rollup my-app
npm install rollup-plugin-postcss --save-dev
install various postcss plugin
create src/css/main.css
add import './css/main.css'; to the top line of src/client.js
*edit rollup.config.js
*add postcss.config.js
*going wrong here? I have tried several variations.
// rollup.config.js
...
import postcss from 'rollup-plugin-postcss'
...
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve(),
commonjs(),
postcss({
// extract: true,
// sourceMap: true,
plugins: [require('autoprefixer')]
}),
...
// postcss.config.js
module.exports = {
plugins: {
...
autoprefixer: {}
}
};
No real error message, once I add postcss to the plugins in the client:{} of rollup.config.js - css breaks on the site.
This is a matter of simply putting the svelte plugin config together properly. I would recommend you use svelte-preprocess and setup your rollup.config.js as follows:
import autoPreprocess from 'svelte-preprocess';
const preprocessOptions = {
postcss: {
plugins: [
require('postcss-import'),
require('postcss-preset-env')({
stage: 0,
browsers: 'last 2 versions',
autoprefixer: { grid: true }
}),
...
]
}
};
...
export default {
client: {
plugins: [
svelte({
preprocess: autoPreprocess(preprocessOptions),
dev,
hydratable: true,
emitCss: true
}),
...
As you see here, you need to set the preprocess option of the svelte plugin.
I crated a new .net core project using the SPA template from https://github.com/MarkPieszak/aspnetcore-Vue-starter#getting-started
with dotnet new vuejs
After restoring packages with npm install I could sucesully open the project and run it from Visual Studio.
I now wanted to use a single file component by adding a file about.vue in /ClientApp/components/about/.
I changed app.ts to use
#Component({
components: {
MenuComponent: require('../navmenu/navmenu.vue.html'),
AboutComponent: require('../about/about.vue')
}
})
When I now run the application I get the error
ERROR in ./ClientApp/components/about/about.vue
Module parse failed: C:\playground\vue-journey\ClientApp\components\about\about.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="about">
| <h1>This is an about page</h1>
# ./~/awesome-typescript-loader/dist/entry.js?silent=true!./ClientApp/components/app/app.ts 30:28-57
# ./ClientApp/components/app/app.vue.html
# ./ClientApp/boot.ts
# multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts
I did not change the webpack.config because to me it looks like it has the required loader.
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
entry: { 'main': './ClientApp/boot.ts' },
module: {
rules: [
{ test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
{ test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new CheckerPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
What do I have to do to compile single file components?
Edit
The file component itself only contains a template and it works in a project I created with vue cli.
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
From the documentation, it appears you're missing the Vue loader plugin.
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [
new VueLoaderPlugin()
]
}
The project was created with a different template then what I thought
I actually used dotnet new vuejs
not dotnet new vue. Stuff like that happens around midnight.
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.