How can I import FullPage component properly? #4

yangkean · 2018-02-07T04:12:18Z

Hello, alvarotrigo. I use vue-fullpage.js in my project and follow your Basic usage guide. But I always get errors.

Following is my code:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="./static/fullpage.js/jquery.fullpage.min.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/jquery/jquery.min.js"></script>
    <script src="./static/fullpage.js/jquery.fullpage.min.js"></script>
    <script src="/dist/build.js"></script>
  </body>
</html>

App.vue

<template>
  <full-page :options="options">
      <div class="section">
        section 1
      </div>
      <div class="section">
        section 2
      </div>
    </full-page>
</template>

<script>
import FullPage from 'vue-fullpage.js/src/FullPage';
import fullPageMixin from 'vue-fullpage.js/src/fullPageMixin';

export default {
  name: 'app',

  mixins: [fullPageMixin],

  components: {
    FullPage,
  },

  data() {
    return {
      options: {},
    };
  },
}
</script>

<style scoped>

</style>

then it will cause:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/path/to/node_modules/vue-fullpage.js"

I just don't want to use Vue.component. Can you tell me what I am doing wrong? Thanks a lot.

The text was updated successfully, but these errors were encountered:

alvarotrigo · 2018-02-07T11:15:58Z

I'm not sure how you have your TypeScript definitions configured, but have you tried adding the .vue extension in 'vue-fullpage.js/src/FullPage';?

import FullPage from 'vue-fullpage.js/src/FullPage.vue';
import fullPageMixin from 'vue-fullpage.js/src/fullPageMixin';

Also, have you installed all the node modules required for the build?
Did you do npm install? See this.

alvarotrigo · 2018-02-07T11:19:14Z

You can try to run the demo examples yourself.
Do npm install and then run:

npm run-script demo1

If that's working fine, then try to figure out where's the difference with your implementation.

Kxrr · 2018-02-08T02:12:23Z

laravel-mix/laravel-mix#158 (comment) will solve the issue, but after this, I meet something new...

alvarotrigo · 2018-02-08T10:10:23Z

@Kxrr the file .babelrc is present here on the project.

alvarotrigo · 2018-02-09T17:32:52Z

@yangkean I assume you fixed the issue?

yangkean · 2018-02-10T16:43:58Z

@alvarotrigo , thanks for your reply. I am so sorry that I am too busy finishing a project recently to check my emails. I will try your advice later and you can close this issue first. If there is still something wrong with it, I will open it again and give you feedback. By the way, your lib is really awesome! Thanks again!

alvarotrigo · 2018-02-10T16:44:52Z

I'll wait for you :)

yangkean · 2018-02-16T14:42:35Z

@alvarotrigo , I have figured it out!!!

There are three points breaking my demo.

I must run npm i in vue-fullpage.js package in node_modules. It may be inconvenient if I have to install dependencies of vue-fullpage.js before I use vue-fullpage.js/src/FullPage and vue-fullpage.js/src/fullPageMixin.
I should not use webpack.ProvidePlugin to define jQuery as a global constants when I have include jQuery in <script>.
When I define rules for js files in webpack.config.js, I should exclude node_modules but vue-fullpage.js/src, just like exclude: /node_modules\/(?!vue-fullpage\.js\/src)/. See #2031.

Following are all my files that can work well:

./src/App.vue

<template>
  <full-page :options="options">
    <div class="section">
      section 1
    </div>
    <div class="section">
      section 2
    </div>
    <div class="section">
      section 3
    </div>
  </full-page>
</template>

<script>
import FullPage from 'vue-fullpage.js/src/FullPage';
import fullPageMixin from 'vue-fullpage.js/src/fullPageMixin';

export default {
  name: 'app',

  mixins: [fullPageMixin],

  components: {
    FullPage,
  },

  data() {
    return {
      options: {
        scrollBar: false,
        navigation: true,
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab'],
      },
    };
  },
}
</script>

<style scoped>

</style>

./src/main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

./.babelrc

{
  "presets": [
    ["env", { "modules": false }]
  ]
}

./index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>wechat-ad-restore</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
    <script src="/dist/build.js"></script>
  </body>
</html>

./package.json

{
  "name": "vue-fullpage.js-demo",
  "description": "demo",
  "version": "1.0.0",
  "author": "[Sam Yang] <[samyangcoder@gmail.com]>",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
  },
  "dependencies": {
    "vue": "^2.5.11",
    "vue-fullpage.js": "0.0.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

./webpack.config.js

const path = require('path');

module.exports = {
  entry: [
    './src/main.js',
  ],
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!vue-fullpage\.js\/src)/,
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devtool: '#eval-source-map'
};

alvarotrigo · 2018-02-16T14:44:27Z

Glad you found a solution!
If you believe that something should be changed on the docs or the project let me know!

I'll close the issue by now.

yangkean · 2018-02-16T14:57:59Z

Yep! I think it is more convenient to add node_modules folder to vue-fullpage.js npm package. Thanks a ton! @alvarotrigo

alvarotrigo · 2018-02-16T15:00:46Z

@yangkean why not just telling them to use npm install? All modules are declared in package.json as dev-dependencies.

yangkean · 2018-02-17T11:11:43Z

@alvarotrigo Yes, what you said is right. But before import FullPage and fullPageMixin someone should install vue-fullpage.js first, then cd into vue-fullpage.js folder which is in node_modules folder and then run npm i, instead of importing and using them directly like simple Vue.js components. Just my personal opinion, feel free to consider it. Thanks anyway! :)

alvarotrigo · 2018-02-17T20:19:18Z

@yangkean I'm not sure to follow you.

You first said you had the following error:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/path/to/node_modules/vue-fullpage.js"

But... doing what exactly? Which command?

More than including the node_modules folder (that it seems no other Vue component does), it might be an issue of adding dependencies to the package file instead of devDependencies.

alvarotrigo · 2018-02-17T20:24:55Z

@yangkean I don't think it needs to add babel-preset-es2015as a dependency, you can take a look at other vue components like this one, and it is also placed in the devDependencies folder.

yangkean · 2018-02-18T14:36:28Z

@alvarotrigo Oh, how stupid I am! I know why I have to install devDependencies of vue-fullpage.js. Because of babelrc file in vue-fullpage.js package, I need to install babel-preset-es2015 and babel-plugin-transform-object-rest-spread as devDependencies under my root project folder so that the vue file and js file under vue-fullpage.js/src/ can be transpiled correctly. I don't install them under my root project folder before so the following error happened:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/path/to/node_modules/vue-fullpage.js"

my new package.json (./package.json) file is:

{
  "name": "vue-fullpage.js-demo",
  "description": "demo",
  "version": "1.0.0",
  "author": "[Sam Yang] <[samyangcoder@gmail.com]>",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
  },
  "dependencies": {
    "vue": "^2.5.11",
    "vue-fullpage.js": "0.0.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

It doesn't need to run npm i in vue-fullpage.js package in node_modules in fact. Instead, just install babel-preset-es2015 and babel-plugin-transform-object-rest-spread under root project folder and everything will work well!! So sorry to disturb you much.

DigitalWheelie · 2018-03-07T02:26:07Z

This is similar to a problem I'm having.

I no longer get the es2015 error, but now I'm getting:

./node_modules/vue-fullpage.js/src/fullPageMixin.js
Module parse failed: Unexpected token (19:4)
You may need an appropriate loader to handle this file type.
| methods: {
| // Methods of Full Page
| ...constants.METHODS.reduce((methods, method) => {
| return {
| ...methods,
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 43:0-62
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Any suggestions?

alvarotrigo · 2018-03-07T11:45:08Z

See the webpack configuration used to compile those files for the demos.
Also check the package.json file and see the dev dependencies.

akinhwan · 2018-03-11T20:57:51Z

what I learned from this that helped solve my issues with module build error, was that I had to include the script tag links in the index.html for cdn.cloudfare links to jquery min and jquery.fullpage.js...whew

cloudsoh · 2018-03-25T06:59:14Z

I'm using vue webpack template and I face this error

Module parse failed: Unexpected token (19:4)
You may need an appropriate loader to handle this file type.
|   methods: {
|     // Methods of Full Page
|     ...constants.METHODS.reduce((methods, method) => {
|       return {
|         ...methods,

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 12:0-65
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I see you asked us to look at the webpack configuration and package.json, but I couldn't fix it. Please help me 🙏

yangkean · 2018-03-26T06:05:21Z

@cloudsoh As the error says, you need to install babel-preset-es2015 and babel-plugin-transform-object-rest-spread as devDependencies under your root project folder to support ES6 features. Try my solution.

cloudsoh · 2018-03-26T11:37:50Z

@yangkean Is there anything more to do after install these 2? I couldn't fix it after installing them.
I think the vue-cli has included the ES6 out of the box. I can use ES6 anywhere in my project. However when I include the fullPageMixin the error comes out.

cloudsoh · 2018-04-08T13:29:32Z

@DigitalWheelie have you fixed your problem? 🤣

DigitalWheelie · 2018-04-08T16:45:13Z

Kind of. Instead of trying to use full;page.js w/ Webpack I'm using it "flat." That works for me. I tried yangkean's solution, but still had the problem. My guess is it's something to do w/ the webpack-simple template, but it's just a guess.

eastwook80 · 2018-06-04T08:25:03Z

@DigitalWheelie @cloudsoh
I got same error message, then fix webpack.conf.js in webpack-simple template

original
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},

fixed
test: /.js$/,
use: {
loader: 'babel-loader',
}

remove ---->> exclude: /node_modules/
It's working but I don't know why

Trick93 · 2018-06-23T04:26:49Z

@cloudsoh @DigitalWheelie
I got same error message, I might think that the problem is related to Vue-cli,I try manys ways but it doesn't work,Finally,i fix it by modify webpack.base,conf.js

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/vue-fullpage.js/src/fullPageMixin.js')]
      },

hope it can help you

alvarotrigo · 2018-07-23T16:52:32Z

This should be now fixed on the latest version 0.0.2

alvarotrigo closed this as completed Feb 16, 2018

alvarotrigo mentioned this issue Mar 3, 2018

Failed to Compile Error? #7

Closed

eastwook80 mentioned this issue Jun 4, 2018

Not working on IE 11 or lower #16

Closed

alvarotrigo mentioned this issue Jul 23, 2018

Merging dev branch #34

Merged

alvarotrigo added the Fixed on dev label Jul 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I import FullPage component properly? #4

How can I import FullPage component properly? #4

yangkean commented Feb 7, 2018

alvarotrigo commented Feb 7, 2018

alvarotrigo commented Feb 7, 2018 •

edited

Kxrr commented Feb 8, 2018

alvarotrigo commented Feb 8, 2018

alvarotrigo commented Feb 9, 2018

yangkean commented Feb 10, 2018

alvarotrigo commented Feb 10, 2018

yangkean commented Feb 16, 2018

alvarotrigo commented Feb 16, 2018

yangkean commented Feb 16, 2018

alvarotrigo commented Feb 16, 2018

yangkean commented Feb 17, 2018

alvarotrigo commented Feb 17, 2018

alvarotrigo commented Feb 17, 2018

yangkean commented Feb 18, 2018

DigitalWheelie commented Mar 7, 2018

alvarotrigo commented Mar 7, 2018

akinhwan commented Mar 11, 2018

cloudsoh commented Mar 25, 2018 •

edited

yangkean commented Mar 26, 2018

cloudsoh commented Mar 26, 2018

cloudsoh commented Apr 8, 2018

DigitalWheelie commented Apr 8, 2018

eastwook80 commented Jun 4, 2018 •

edited

Trick93 commented Jun 23, 2018 •

edited

alvarotrigo commented Jul 23, 2018

How can I import FullPage component properly? #4

How can I import FullPage component properly? #4

Comments

yangkean commented Feb 7, 2018

index.html

App.vue

alvarotrigo commented Feb 7, 2018

alvarotrigo commented Feb 7, 2018 • edited

Kxrr commented Feb 8, 2018

alvarotrigo commented Feb 8, 2018

alvarotrigo commented Feb 9, 2018

yangkean commented Feb 10, 2018

alvarotrigo commented Feb 10, 2018

yangkean commented Feb 16, 2018

alvarotrigo commented Feb 16, 2018

yangkean commented Feb 16, 2018

alvarotrigo commented Feb 16, 2018

yangkean commented Feb 17, 2018

alvarotrigo commented Feb 17, 2018

alvarotrigo commented Feb 17, 2018

yangkean commented Feb 18, 2018

DigitalWheelie commented Mar 7, 2018

alvarotrigo commented Mar 7, 2018

akinhwan commented Mar 11, 2018

cloudsoh commented Mar 25, 2018 • edited

yangkean commented Mar 26, 2018

cloudsoh commented Mar 26, 2018

cloudsoh commented Apr 8, 2018

DigitalWheelie commented Apr 8, 2018

eastwook80 commented Jun 4, 2018 • edited

Trick93 commented Jun 23, 2018 • edited

alvarotrigo commented Jul 23, 2018

alvarotrigo commented Feb 7, 2018 •

edited

cloudsoh commented Mar 25, 2018 •

edited

eastwook80 commented Jun 4, 2018 •

edited

Trick93 commented Jun 23, 2018 •

edited