Run https://github.com/akella/webgl-mouseover-effects code locally - javascript

I want to implement image hover effect like on this website https://miew.pt/, and the closest example I got or came across can be found here https://github.com/akella/webgl-mouseover-effects
I have downloaded and extracted the files but when I run/open e.g step3.html, I am getting errors.
I have run yarn add but still getting same error as in point 1.
The error in point 1 & 2 is "Uncaught SyntaxError: Cannot use import statement outside a module"
What's the correct way to set up the code locally(Win 10)?

I just used:
npm install
npm run parcel -- step3.html
and it worked on my setup (Win 10 + NPM 6.14.14 + Node v14.17.5)
Can you try again with this setup ?

Related

Cannot read properties of undefined (reading 'isAbsolute')

I was editing this program yesterday and it worked fine the whole time. The program is created using parcel, today when started up the script and the dev server was broken. This is the error i recived:
*Uncaught TypeError: Cannot read properties of undefined (reading 'isAbsolute')
at parcelRequire.../node_modules/tar/lib/strip-absolute-path.js.path (strip-absolute-path.js:2:9)
at newRequire (main.fb6bbcaf.js:47:24)
at localRequire (main.fb6bbcaf.js:53:14)
at parcelRequire.../node_modules/tar/lib/write-entry.js.minipass (write-entry.js:39:27)
at newRequire (main.fb6bbcaf.js:47:24)
at localRequire (main.fb6bbcaf.js:53:14)
at parcelRequire.../node_modules/tar/lib/pack.js.minipass (pack.js:28:20)
at newRequire (main.fb6bbcaf.js:47:24)
at localRequire (main.fb6bbcaf.js:53:14)
at parcelRequire.../node_modules/tar/lib/create.js../high-level-opt.js (create.js:6:14)*
I cant seem to find anyone else with the same error. This is strip-aboslute-path.js 2:9 where the error happens:
//unix absolute paths are also absolute on win32, so we use this for both
const { isAbsolute, parse } = require('path').win32
I’ve tried:
npm install, npm install tar, npm i -g npm and
changing the names of folders in the Path to the src file that included "å, ä, ö",
Would love get this running again, any suggestions on what to try next?
Solved: This probably happened due to me trying to access a variable named x and vscode auto adding "import {x} from tar" at the top of the js file. When removing the import the program was working again.

NPM failed at es-pack-js postinstall script on geo-viewer example from geo-three.js

I'm trying to run the code for the geoviewer examples on geo-three.js, this one: https://github.com/w3reality/three-geo/tree/master/examples/geo-viewer
When I try to build the app, as the readme.md indicates, I get this error:
If I execute the second command it doesn't work, because of the said previous error. And even if I try to load the index.html in the browser all I get is a blank screen:
What am I missing? Because all the relative paths for the includes are right...

Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after I updated to nextjs#10.4

After I updated to nextjs 10.1.3 I had an error when I launch yarn dev.
error - ./public/static/style.scss
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /path_to/node_modules/mini-css-extract-plugin/dist/loader.js
- /path_to/node_modules/next/dist/compiled/webpack/bundle4.js
- /path_to/node_modules/next/dist/compiled/webpack/webpack.js
- /path_to/node_modules/next/dist/next-server/server/config-utils.js
- /path_to/node_modules/next/dist/next-server/server/config.js
- /path_to/node_modules/next/dist/next-server/server/next-server.js
- /path_to/node_modules/next/dist/server/next.js
- /path_to/node_modules/next/dist/server/lib/start-server.js
- /path_to/node_modules/next/dist/cli/next-dev.js
- /path_to/node_modules/next/dist/bin/next
Could not find files for /[lang] in .next/build-manifest.json
Could not find files for /[lang] in .next/build-manifest.json
event - compiled successfully
I found that similar issue but it did not solve my problem.
I removed packages and lock files, and also tried to install webpack etc reading this.
Which drove me to another error about tap what drove me to this so I remove what I just did, so back to the first error above.
Here is my next.config.js
const withSass = require('#zeit/next-sass');
const withCSS = require("#zeit/next-css");
module.exports = withCSS(withSass({
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config;
}
}));
so I have similar setup as what you have i.e Next.js with Antd and Less. I got this error recently after upgrading to the latest version of nextjs (10.2.0). Fortunately for me, I stumbled on this question and clicked on the Similar issue link you attached and I got the solution from there. I resolved this by installing webpack
npm i webpack#webpack-4 --save-dev
Hopefully this would save someone else's time :). Cheers
In my case the project to be maintained consists of Next.js (9.3.2), Antd, Less, Typescript.
Simply REVERT what you have done to fix this problem first, and then run the command:
yarn upgrade next 10.2.3
yarn add webpack#webpack-4 --dev
Patience is one of the keys I got in this journey.
The scenario of updating next.js version breakdown is here:
static export;
getStaticPaths NEEDS the fetch() method in my case, even someone says it should not be done;
fetch() is browser dependent, which suppose not to be work server-side;
installing yarn add isomorphic-unfetch will not aid anything, thus upgrade next.js version is the only option
next >= 10.0.0 has the handy fix, after several hours researching, next 10.2.3 does the best, no need to change the version of typescript (^3.7.5), etc;
finally when running the command: next build && next export,
the top stack mini-css-extract-plugin/dist/loader.js locates the error Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
run yarn add webpack#webpack-4 --dev;
re-run next build && next export

Jest "No tests found, exiting with code 1" error on Windows 10 in React Redux application

I am attempting to run Jest on my project. I am on a Windows 10. I only have one test in one test file.
In package.json:
"test": "jest"
My directory structure:
src/
app/
routeName/
redux/
action.tests.js
My output:
No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In C:\Users\myUsername\Documents\myApp
47 files checked.
testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches
testPathIgnorePatterns: \\node_modules\\ - 47 matches
testRegex: - 0 matches
Pattern: - 0 matches
npm ERR! Test failed. See above for more details.
According to the documentation here, Jest should look for anything that has test.js in the name.
I have also tried tests.js and that didn't work either.
I created a folder in the root of the project and put a test in there as __tests__/tests.js and that did work, but I do not want it placed there.
I have seen several tickets and questions about questions that are superficially similar, but all of those involve more complex configurations, or bugs that were supposedly patched already. I have no special configurations set. The documentation says this should work. Tutorials I have read for Jest include the exact setup I am currently using.
I am using Babel and Webpack. I installed the jest and babel-jest packages. I also added jest to the ESLint environment.
[edit] updated to properly document my problem, which I answered below. I lost track of my file naming.
I am a bloody idiot and I didn't pay attention to the details.
Jest is looking for test.js specifically. Not testS.js. My files were labeled as tests.js. It worked inside __tests__/ because Jest just looks for anything inside there.
I got it working just fine now, and it shall remain up as a testament to me not looking at the specifics of the regex matches.
I had the same Problem with a React-App. Make sure, that the jest config file has the correct file pattern to find the tests:
// jest.config.js
module.exports = {
testMatch: [
'<rootDir>/src/**/*.test.js',
'<rootDir>/src/**/*.test.jsx',
],
...
}
From my side, I was getting this error because I had placed myself (cd) in the directory where the chromeDriver was installed, so as not to have to add its path to $Path. After I added chromeDriver to $Path, and placed myself in the directory of my project, everything went fine.
No tests found, exiting with code 1
All I had to do was npm install.
Then I hit the Debug link at the top of my test. The test was found and execution stopped at the breakpoint. A simple solution to a very frustrating problem.
You just need to change the name of the file. For example
if you have a customer.js or customer.ts file and you want to test it. Create a new file name is customer.test.js or
customer.test.ts after npm test it will test the file which just for testing .
I had the same problem, I wanted to run my tests inside drone CI pipeline and had the same error what solved my problem was simply adding workspace to my project.
check if it is small case like filename.test.js.
I made a mistake ComponentName.Test.js and got error, fixed it by ComponetName.test.js

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.
You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)
Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.

Categories

Resources