Can't run webpack (babel error)

  • Hello community!


    I'm new to PageKit and wanted to setup everything i need on my PC (Windows 10). So my plan was following the doc's for creating a new theme, based on this page: https://pagekit.com/docs/tutorials/theme


    A few words before i describe my problem:

    - Instead of UiKit and Less i want to use Bootstrap and Sass (because i'm more familiar with them).

    - Bootstrap is included and my sass will be compiled.

    - I'm not familiar with webpack, vue and babel. Yes, i've heard of it. But no, i never configurated them by myself.

    - I have a clue of what npm does, but i'm not 100% sure how to use it correctly.


    What i want to do:

    I want to add a tab in the backoffice for a widget to set several settings.


    What i already did:

    So i added the webpack.config.js with the following code:

    Notice: I've renamed loaders to rules because everytime i run the webpack-command, i've got an error message of a "wrong api schema". Also i've renamed vue to vue-loader, because i got this error:

    Code
    1. ERROR in ./app/components/node-theme.vue
    2. Module build failed (from D:/Programme/ScotchBox/public/kai/node_modules/vue/dist/vue.runtime.common.js):
    3. TypeError: this._init is not a function
    4. at Object.Vue (D:\Programme\ScotchBox\public\kai\node_modules\vue\dist\vue.runtime.common.js:4727:8)


    So, whats the current problem?

    The current problem occurs if i run webpack in my theme-folder:


    For more information, i have added my package.json:


    Notice: I'm not really familiar with the package.json, so i'm not sure if i need all these dependencies?


    and my node-theme.vue:


    So my question is: What i'm doing wrong? Why is the babel-loader used? Didn't i understand how webpack works? Shouldn't be the vue-loader called?

    I hope somebody can help me with my ignorance. ?(

  • Hi RaTToX and welcome the Pagekit


    You need install webpack@1.12.9 and webpack-cli


    sudo npm install webpack@1.12.9 -g && sudo npm install webpack-cli -g 

    Hello guys, My name is Yunus. I'm back-end developer. İf you have a problem. You could tell me but my speaking too bad. So I not understand you. I'm sorry about this. I using google translate but even so it isn't enough. So that you should be patience. Thank you

  • Haa :D I couldnt see :D

    Hello guys, My name is Yunus. I'm back-end developer. İf you have a problem. You could tell me but my speaking too bad. So I not understand you. I'm sorry about this. I using google translate but even so it isn't enough. So that you should be patience. Thank you

  • First of all: Thank both of you for your fast response! ^^:thumbup:


    My progress wasn't that much and before i tangle up with the amounts of trial and errors, i just set up a new, clean version of pagekit. Installed, configurated, hooray it works again ^^


    first for all you need npm and then run npm install in your project directory, webpack as webpack-cli should be installed via npm as well as npm globally.

    Ok, i run npm install, everything looks fine except this part:


    I checked the packages i already installed globally:

    Code
    1. npm -v: 6.4.1
    2. node -v: v8.11.4
    3. webpack -v: 4.17.2
    4. webpack-cli -v: 3.1.0

    And for information purpose: npm list -g --depth=0 shows:


    Only not forget that vue.js can't be in version 2.x actually as pagekit need serious upgrades on most modules.

    Here comes the next question for a better understanding:

    Globally i've installed vue@2.5.17. But in the projects package.json, vue isn't listed:

    Code
    1. ...
    2. "merge-stream": "^0.1.7",
    3. "vue-hot-reload-api": "^1.2.0",
    4. "vue-html-loader": "^1.0.0",
    5. "vue-loader": "^8.2.0",
    6. "vue-style-loader": "^1.0.0",
    7. "webpack": "^1.12.9"

    What i understand is, that i need to downgrade my current globally version of vue.js, is this correct? Or can i just add a specific version of vue in the package.json (Shouldn't vue be listed too?) Does the same apply to my webpack version? :

    You need install webpack@1.12.9 and webpack-cli


    sudo npm install webpack@1.12.9 -g && sudo npm install webpack-cli -g 


    Would it be better to install the packages globally or locally?:/


    I hope for your feedback :)

  • I was goofing around with the theme-one today, I would like to modify the theme, I had the same problem with Webpack CLI.

    I use Laragon for my localhost, It has enough tools to run Pagekit, one of them is the Terminal.

    I couldn't run Webpack and finally I got here and saw this post.


    with following command I solved my problem

    npm install webpack@1.12.9 -g && npm install webpack-cli -g


    Thanks to yns.wtf and Fosphatic Duke

    You should run this command too,

    Cheers,

  • Well you don't need any extra packages to run pagekit localy! Pagekit comes with an build in webserver and you can run it easy from cli when you have php package on your mac or windows system. Under windows you need only set the envirenment path variable showing to the php package.

  • Read the last sentence please, once again, especially the not to forget part.

    Only not forget that vue.js can't be in version 2.x actually as pagekit need serious upgrades on most modules.

    Ok, i think that means it has to be under version 2.x, so the latest version is vue@1.0.28-csp?

    I've installed this version globally, but npm list -g --depth=0 will give me the follwing output:

    webpack@1.12.9 is installed, but the error message says that a higher version of webpack is needed for the current webpack-cli. ?(


    Using npm install in the project directory will start bower install && webpack && gulp. webpack again will give me the follwing error:


    Solution for webpack!

    To get rid of these error messages, i've tried the things that CopyJosh wrote: https://github.com/pagekit/pag…05#issuecomment-240128474

    Yeah, no more error messages by running webpack! <3


    After that i got errors with gulp because of using v4 instead of v3.9.1. That was because of running npm audit, which tells me # Run npm install --save-dev gulp@4.0.0 to resolve 5 vulnerabilities:

    Code
    1. npm WARN vue-loader@8.7.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
    2. npm WARN pagekit@ No repository field.
    3. npm WARN pagekit@ No license field.
    4. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
    5. npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    6. audited 4055 packages in 9.878s
    7. found 15 vulnerabilities (2 low, 8 moderate, 5 high)
    8. run `npm audit fix` to fix them, or `npm audit` for details

    Since these are just warnings instead of errors, i'll now try to build a theme. ^^

    Thank you guys! If some kind of problem with webpack appears, i'll write again :)

  • Glad to see that it worked somehow, but weird i never had to do such stepsl, only always to install the older versions of some packages like vue and webpack. Running on several machines with windows 10 Webpack-cli version: 2.1.4 and webpack version: 1.15.0. This way i never had an issue to "compile" a theme or extension package till now. In general you clone the package with git or git-desktop to your local drive then just go with powershell to that directory and run run npm install, this grabs all the packages you need, when you are done you run just only webpack and you good to go. Copy somehwere the files and directories without .gitignore and node_modules then zip it and thats it.