Code Monkey home page Code Monkey logo

Comments (8)

jcklpe avatar jcklpe commented on August 24, 2024

Okay so I think I mostly figured stuff out but I'm getting an error on build and I'm not sure what it means.

[Full project source code repo can be found here]

Does seem to be swup related as the only thing currently declared in app.js is swup:

terminal response to build command

└─➤ npm run build

> [email protected] build /mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro
> webpack --mode development

Hash: f513f06c843fd9df9fd6
Version: webpack 4.19.0
Time: 3308ms
Built at: 2018-09-18 01:31:24
                          Asset      Size  Chunks             Chunk Names
./assets/css/build/main.min.css  94.3 KiB    main  [emitted]  main
   ./assets/js/build/app.min.js  8.18 KiB    main  [emitted]  main
Entrypoint main = ./assets/css/build/main.min.css ./assets/js/build/app.min.js
[./assets/css/src/app.scss] 39 bytes {main} [built]
[./assets/js/src/app.js] 3.45 KiB {main} [built] [failed] [1 error]
[0] multi ./assets/js/src/app.js ./assets/css/src/app.scss 40 bytes {main} [built]
    + 1 hidden module

ERROR in ./assets/js/src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/scope/index.js:867:13)
    at BlockScoping.updateScopeInfo (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
    at BlockScoping.run (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
    at newFn (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/context.js:146:19)
    at Function.traverse.node (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/index.js:94:17)
    at traverse (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/traverse/lib/index.js:76:12)
    at transformFile (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/core/lib/transformation/index.js:88:29)
    at runSync (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/core/lib/transformation/index.js:45:3)
    at runAsync (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/@babel/core/lib/transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ multi ./assets/js/src/app.js ./assets/css/src/app.scss main[0]
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!assets/css/src/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./assets/css/src/app.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/src/app.scss 98.4 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/david/.npm/_logs/2018-09-18T07_31_25_406Z-debug.log

And then I get a type error flag for TS in app.js itself that reads as follows:

"Cannot find a declaration file for module 'swup'"

NPM error debug log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro/node_modules/.bin:/home/david/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Program Files (x86)/Common Files/Intel/Shared Libraries/redist/intel64/compiler:/mnt/c/Python37/Scripts:/mnt/c/Python37:/mnt/c/ProgramData/Boxstarter:/mnt/c/Windows/System32:/mnt/c/Windows:/mnt/c/Windows/System32/wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0:/mnt/c/Windows/System32/OpenSSH:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/Program Files/Microsoft VS Code/bin:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files/Git LFS:/mnt/c/Program Files/nodejs:/mnt/c/Program Files (x86)/Yarn/bin:/mnt/c/Program Files/TortoiseGit/bin:/mnt/c/Users/David/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/David/AppData/Local/Pandoc:/mnt/c/Users/David/AppData/Roaming/npm:/mnt/c/Users/David/AppData/Local/hyper/app-2.0.0/resources/bin:/mnt/c/Users/David/AppData/Local/GitHubDesktop/bin:/snap/bin
9 verbose lifecycle [email protected]~build: CWD: /mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro
10 silly lifecycle [email protected]~build: Args: [ '-c', 'webpack --mode development' ]
11 silly lifecycle [email protected]~build: Returned: code: 2  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `webpack --mode development`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd /mnt/c/Users/David/Work/Code/JackalopePortfolio/Pro/apps/wordpress/htdocs/wp-content/themes/JackalopePro
16 verbose Linux 4.4.0-17134-Microsoft
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
18 verbose node v8.11.3
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build: `webpack --mode development`
22 error Exit status 2
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

package.json

{
  "name": "jackalopepro",
  "version": "1.0.0",
  "description": "professional theme for portfolio",
  "scripts": {
    "build": "webpack --mode development",
    "dist": "webpack --mode production",
    "watch": "webpack --watch --mode development"
  },
  "author": "Aslan French",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "swup": "^1.1.1",
    "uglifyjs-webpack-plugin": "^2.0.0",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {}
}

webpack.config.js

const path = require('path');

// include the js minification plugin
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// include the css extraction and minification plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
entry: ['./assets/js/src/app.js', './assets/css/src/app.scss'],
output: {
    filename: './assets/js/build/app.min.js',
    path: path.resolve(__dirname)
},
module: {
    rules: [
    // perform js babelization on all .js files
         {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ['babel-preset-env']
                }
            }
        },
        //Compile SCSS to css
        {
            test: /\.(sass|scss)$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }
    ]
    },

    plugins: [
        // extract css into dedicated file
        new MiniCssExtractPlugin({
        filename: './assets/css/build/main.min.css'
        })
    ],


    optimization: {
        minimizer: [
            // enable the js minification plugin
            new UglifyJSPlugin({
                cache: true,
                parallel: true
            }),
            // enable the css minification plugin
            new OptimizeCSSAssetsPlugin({}),
        ]
    }
};

from swup.

gmrchk avatar gmrchk commented on August 24, 2024

Hi @jcklpe,

You should be able to try swup without webpack, if you include the swup with the script tag. That should get you going for a start.

The issue you are having with webpack is most likely not swup related (probably babel-loader, maybe this will help?), so I can't really help you with that.

Also, version of swup on npm is already transpiled, so if that's the only thing you are trying to compile, running webpack without any config file on your entry point (app.js) should work just fine.

I would suggest to go slower, forget about all the plugins for minification of css, etc. and try to get going with your scripts for now. It can get overwhelming really quick with tools like webpack. The less you put into your setup now, the less likely you will encounter some error you won't understand. Or if you're starting with JS all together, maybe leave out any setup at all and see where it gets you.

As there is no swup issue here, I will go ahead and close this for now.

Cheers!

from swup.

jcklpe avatar jcklpe commented on August 24, 2024

@gmrchk Hmmm, I'm not sure, as when I don't have swup included I don't have any issues running my npm build, and as far as I can tell the primary issue is that swup is throwing that type error. Here's a picture:

image

I'll try integrating it just as a script though.

from swup.

gmrchk avatar gmrchk commented on August 24, 2024

That's a TypeScript error. I'm not sure that it's related to the previous error, but it could definitely prevent build.

As far as I know, TypeScript only lets you compile the code with valid variable types (or maybe can be switched to only show warning on compile). Anyway, as there is no definition file for swup (the file where all the types of variables are defined) for TS, it cannot check what types are expected. I'm pretty sure you can create the definition file on your own somehow, but I would have to look into that.

from swup.

jcklpe avatar jcklpe commented on August 24, 2024

@gmrchk I checked that link and I'm pretty sure that was indeed the problem! Thank you!

I'm not sure why it's asking for typings for swup though as it's a JS project right? And I've got it saved in a JS file. But maybe that's because of the babel issue. I'll let you know after this thing is done installing the proper modules.

Thank you for the response :)

from swup.

jcklpe avatar jcklpe commented on August 24, 2024

Yes! It does indeed work now. Thank you so much for the help! I feel like I have so much catching up to do and webpack is something I've been putting off learning for awhile. But I think now that I've gotten over some of these first install hiccups (which mostly seem to stem from Webpack 4 being so new) I'm going to be good to go!

from swup.

gmrchk avatar gmrchk commented on August 24, 2024

TypeScript is an extension of JavaScript that lets you use types as in languages like Java. Pretty neat, for some bigger applications especially, but you have probably just included it somewhere in your setup by accident.

As I said, it's nice to learn new things, but I would rather focus on taking it slower and understanding the setup, than including all the latest fancy tools.

Glad you figured it out.

from swup.

jcklpe avatar jcklpe commented on August 24, 2024

Hi @gmrchk Yes, I know what TS is, I've started taking a class on that too recently. So I understand that it's a type error because the type isn't declared and the normal thing to do in a TS file would be to import @types/"name of module here".

But what I don't get is why it's throwing a TS type error in a JS file?

I think what might be happening is that it's getting pulled through a TS environment when I try bundling everything together with babel, which is I think what you were trying to get at earlier. I don't understand why that isn't working, but I can successfully load my scripts by just pulling from the node_modules dist folder. I'd like to learn or figure out a more permanent solution for why pulling in these JS files isn't working etc, but for now this will work. I get zero type errors now in my console when loading. I haven't actually gotten the swup stuff to target or animate etc but I think I just need to spend some more time looking at the documentation and update my markup to reflect the correct targeting syntax etc.

Thank you again for your help.

from swup.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.