Closed ChromoX closed 8 years ago
That error generally means that babel is not getting to load the main.js file. (Line 1 of that main.js is just an import statement).
Take a look at this line:
{
test: /\.js$/,
exclude: /node_modules|main.js|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
include: /node_modules\/vue-strap\/src/,
loader: 'babel'
},
Just make sure you are including and excluding stuff correctly for babel loader.
Thanks for the response amanpatel. I've tried a much simpler version, without any luck. I decided to use your exact line instead of mine. I ended up with the following error:
Error: Cannot find module "url"
Try again by replacing the .js loader link in your webpack config file to:
{test: /\.js$/, exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//, include: /node_modules\/vue-strap\/src/, loader: 'babel'},
Not sure if it will fix it, but atleast you might get further.
amanpatel: Taking the main.js out removes the error:
Error: Cannot find module "url"
But the error from the first comment in this thread comes back.
Module parse failed: /Users/Jeffrey/Sites/AHUD/node_modules/vue-strap/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
Try remove include
option like this:
{
test: /\.js$/,
exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel'
},
So this is driving me insane! You can replicate this problem by executing these commands:
git clone https://github.com/vuejs/vue-loader-example.git
npm install
npm install vue-strap
Then add the following to the loaders section in webpack.config.js:
{
test: /\.js$/,
exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel'
},
Then finally adding the following to src/components/counter.vue:
import { accordion } from 'vue-strap'
@yuche I'm crazy about the problem too. my loader
{
test: /\.js$/,
include: [
path.resolve(nodeRoot, 'vue-strap/src')
],
loader: 'babel'
}
my login.vue
import { alert } from 'vue-strap'
export default {
data() {
return {
rememberMe: false
}
},
ready(){
console.log(alert);
},
// ...
}
and the alert is undefined
Ok, I tried to recreate this on my environment, and was able to figure out a partial solution. Again the main reason you are seeing the syntax error on main.js is that the babel loader is not being able to apply ES2015 transforms to main.js (which is why it croaks at the import statement).
I was able to partially solve this by using the following webpackconfig file:
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
include: /node_modules\/vue-strap/,
loader: 'babel',
query: {
presets: [ 'es2015','stage-0']
}
},
{
// edit this for additional asset file types
test: /\.(png|jpg|gif)$/,
loader: 'file?name=[name].[ext]?[hash]'
}
]
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
} else {
module.exports.devtool = '#source-map'
}
The big change here is the include statement (and removal of exclude).
I don't use the hot-loader in my day to day development, so please regard this solution as 'experimental' (the entire webpack hot reload is experimental stage anyway).
Closing this issue for now.
@amanpatel I've tried your solution, webpack can build normally, but the alert import by import { alert } from 'vue-strap'
is still undefined.
@amanpatel @yuche I'm using the temporary import method import alert from 'vue-strap/src/Alert.vue'
now.
Using this: import {alert} from 'vue-strap';
worked for me. Are you using the entire webpack.config.js as I posted?
Here's my counter.vue (from @ChromoX vue-loader-example script).
<template>
<div>
<h1>I am a Counter Component. Edit me in dev mode.</h1>
<p>Current count: {{count}}</p>
<alert type="success" >
<strong>Well Done!</strong>
You successfully read this important alert message.
</alert>
</div>
</template>
<script>
import {alert} from 'vue-strap';
export default {
components: {
alert: alert
},
data () {
return { count: 0 }
},
ready () {
this.handle = setInterval(() => {
this.count++
}, 1000)
},
destroyed () {
clearInterval(this.handle)
}
}
</script>
The following error occurs when trying to import a module from vue-strap.
webpack.config.js
Package.json
I've tried all the tricks from other threads talking about this.