jsmmth / vue-loop

Infinite content loop for Vue
820 stars 37 forks source link

You may need an appropriate loader to handle this file type. #14

Open mrkylemac opened 6 years ago

mrkylemac commented 6 years ago

Hoping for some help if possible! After following readme.md instructions, I'm receiving the following error via terminal:

ERROR in ./node_modules/vue-loop/VueLoop.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

<template>
<div class="loop-container" :class="{'full': full, 'horizontal': horizontal}">
<slot></slot>
 @ ./src/js/components/Parallax.js 15:15-34
 @ ./src/js/components ^\.\/.*$
 @ ./src/js/index.js

Here is my webpack.config:

var webpack = require("webpack");
var path = require("path");

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  entry: {
    "app": "./src/js/index.js",
    "app.min": "./src/js/index.js"
  },

  output: {
    path: __dirname + "/dist/js",
    filename: "[name].js"
  },

  resolve: {
    alias: {
      "assets": path.resolve(__dirname, "assets")
    }
  },

  plugins: [
    // js
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/,
      minimize: true
    }),

    // css
    new ExtractTextPlugin({
      filename: "../css/[name].css"
    }),

    // browserSync
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'grub/',
    }),

  ],

  module: {
    rules: [

      // js
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["babel-preset-env"],
            plugins: ["babel-plugin-transform-class-properties"]
          }
        },
      },

      // scss
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true,
                discardComments: {
                  removeAll: true
                }
              }
            }, {
              loader: "postcss-loader",
              options: {
                plugins: function() {
                  return [
                    require("postcss-import"),
                    require("autoprefixer")
                  ];
                }
              }
            }, {
              loader: "sass-loader"
            }
          ]
        })
      },

      // images
      {
        test: /\.(jpg|jpeg|gif|png|svg)$/,
        use: {
          loader: "url-loader"
        }
      },

      // fonts
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: {
          loader: "url-loader"
        }
      }
    ]
  },
  watch: true
}

and package.json:

  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "basicscroll": "^1.2.0",
    "blazy": "^1.8.2",
    "jquery": "3.2.1",
    "jquery-ui": "^1.12.1",
    "node-sass": "^4.7.2",
    "skrollr": "^0.6.26",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^13.0.0",
    "vue-loop": "^0.2.6"
  }
}

Much appriciated!

gabrielstuff commented 6 years ago

Same here