-
Notifications
You must be signed in to change notification settings - Fork 255
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can I import FullPage component properly? #4
Comments
I'm not sure how you have your TypeScript definitions configured, but have you tried adding the 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? |
You can try to run the demo examples yourself. npm run-script demo1 If that's working fine, then try to figure out where's the difference with your implementation. |
laravel-mix/laravel-mix#158 (comment) will solve the issue, but after this, I meet something new... |
@Kxrr the file |
@yangkean I assume you fixed the issue? |
@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! |
I'll wait for you :) |
@alvarotrigo , I have figured it out!!! There are three points breaking my demo.
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'
}; |
Glad you found a solution! I'll close the issue by now. |
Yep! I think it is more convenient to add |
@yangkean why not just telling them to use |
@alvarotrigo Yes, what you said is right. But before import |
@yangkean I'm not sure to follow you. You first said you had the following error:
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 |
@alvarotrigo Oh, how stupid I am! I know why I have to install devDependencies of
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 |
This is similar to a problem I'm having. I no longer get the
Any suggestions? |
See the webpack configuration used to compile those files for the demos. |
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 |
I'm using vue webpack template and I face this error
I see you asked us to look at the webpack configuration and package.json, but I couldn't fix it. Please help me 🙏 |
@cloudsoh As the error says, you need to install |
@yangkean Is there anything more to do after install these 2? I couldn't fix it after installing them. |
@DigitalWheelie have you fixed your problem? 🤣 |
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. |
@DigitalWheelie @cloudsoh original fixed remove ---->> exclude: /node_modules/ |
@cloudsoh @DigitalWheelie
hope it can help you |
This should be now fixed on the latest version 0.0.2 |
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
App.vue
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: