I completed a Phaser game tutorial that ran fine when linking to the Phaser.js library on the Web using:
<script src="//cdn.jsdelivr.net/npm/phaser#3.50.1/dist/phaser.js"></script>
But now when I try to use Phaser locally with npm, and Parcel to run the game I get the compile error:
#parcel/transformer-js: This experimental syntax requires enabling the parser plugin: 'classProperties'
Which is caused by this type of code:
export default class Game extends Phaser.Scene
{
/** #type {Phaser.Physics.Arcade.Sprite} */
player;
I can't find anything on Google, except someone said to add the plugin to my package.json file, so now I have:
"dependencies":
{
"#babel/plugin-proposal-class-properties": "^7.13.0",
"parcel": "^2.0.0-nightly.548",
"phaser": "^3.53.1"
}
What else can I do to try fix this please?
You need to add a .babelrc file in the root of your project containing the following code:
{
"plugins":
[
"#babel/plugin-proposal-class-properties"
]
}
Source: https://robkendal.co.uk/blog/2019-05-13-configure-parcel-js-and-babel-to-use-javascript-proposal-class-properties
Related
I am building a snowpack app right now, and I would like to import socket.io client in the frontend (For intellisense and offline dev testing). However, socket.io only exports the backend materials when using import ... from 'socket.io'.
Normally, I use
import { io } from 'socket.io/client-dist/socket.io.js';
Which gets all the correct files and exports, however, when building with snowpack I get this error:
Package exports for 'C:\dev\JS\Node+Browser\foo\node_modules\socket.io' do not define a './client-dist/socket.io.js' subpath
Which fails the build, stopping everything.
Right now, my snowpack.config is really bare bones:
module.exports = {
buildOptions: {
out: 'dist/client'
},
mount: {
"src/client": "/"
}
}
All of the rest of my modules run fine, because they are all imported with only import ... from 'module-name. I understand what the error is saying, but I cant find anything online or thing of anything to solve it. Does anyone know how to fix this?
NOTE: This is a "hacky" fix that I think is messy and can not be used for larger projects.
I patched this by editing the package.json of the socket.io package (In node_modules) to use a temporary export alias that was exactly the same as the real directory path:
node_modules/socket.io/package.json
"exports": {
".": [
{
"require": "./dist/index.js",
"import": "./wrapper.mjs"
},
"./src/index.js"
],
"./client-dist/socket.io": "./client-dist/socket.io.js",
"path-to-other-modules": "same-path"
},
I'm trying to share my code from my front (hyperapp) to my admin (hyperapp to) to make "preview" button.
The setup of these projects was made by an other dev, so i had to learn hyperapp workflow on the job, i'm not expert.
From what i know he was inspired by Facebook React conf.
All my usefull code is in src/ folder, and there is many dependencies so i have to export all (api, constants, utils, etc..).
Here is my bit configuration (that work, it export code correctly):
"bit": {
"env": {
"compiler": "bit.envs/compilers/react#1.0.2"
},
"packageManager": "yarn",
"packageManagerArgs": [
"--production",
"--no-optional"
],
"packageManagerProcessOptions": {
"shell": true
},
"resolveModules": {
"modulesDirectories": [
"src"
]
},
"dist": {
"entry": "src",
"target": "dist"
}
}
So, the code is "correctly" exported to bit.dev, but, when i import it from my admin with
"#bit/adrienbelair.betterise-web.modules": "^0.3.0",
i get the following error after running yarn:
yarn install
ls: Command failed.
Exit code: 1
Command: node .bit.postinstall.js
...
Error: ENOTDIR: not a directory, mkdir 'node_modules/utils/HOA'
Yes, if i look into node_module, utils is a file, and not a directory
All these are auto-generated, i dont understand what am i doing wrong?
Second thing, probably from this above error, when i try to import a component (even if there is an error, vendor are downloaded and at their place), i get:
import { Advice } from '#bit/adrienbelair.betterise-web.modules/dist/modules';
./node_modules/#bit/adrienbelair.betterise-web.api/controlleur.js
Module not found: Can't resolve 'api' in '/Users/prinzivalle/Web/betterise/admin-front/node_modules/#bit/adrienbelair.betterise-web.api'
From this line (if i look into node_module, where the error is thrown):
import { User, Cardline } from 'api';
I know, its a very specific case, mine, but i dont find any forum or explicit tutorial. Only some little component export with not a lot of dependencies.
I made my code with a little knowledge of Hyperapp/React and without thinking about sharing it one day..
Thank for reading.
Trying to bundle the following file with Webpack fails with
ERROR in ./~/pg/lib/native/index.js Module not found: Error: Cannot
resolve module 'pg-native' in
.../node_modules/pg/lib/native
# ./~/pg/lib/native/index.js 9:13-33
I tried several ignore statements in the .babelrc but didnt get it running...
The test-file i want to bundle: handler.js
const Client = require('pg').Client;
console.log("done");
webpack.config.js
module.exports = {
entry: './handler.js',
target: 'node',
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: __dirname,
exclude: /node_modules/,
}]
}
};
.babelrc
{
"plugins": ["transform-runtime"],
"presets": ["es2015", "stage-1"]
}
package.json
"dependencies": {
"postgraphql": "^2.4.0",
"babel-runtime": "6.11.6"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-0": "^6.5.0",
"babel-polyfill": "6.13.0",
"serverless-webpack": "^1.0.0-rc.3",
"webpack": "^1.13.1"
}
Somewhat related github-issues:
https://github.com/brianc/node-postgres/issues/1187
https://github.com/serverless/serverless-runtime-babel/issues/8
This is indeed an old thread, but one that helped me nonetheless.
The solution provided by Steve Schafer 1 is good, but not the simplest.
Instead, the one provided by Marco Lüthy 2 in the linked issue is probably the easiest to set up because it is pure configuration, without even the need for a dummy file to be created.
It consists of modifying your Webpack config plugins array as follows:
const webpack = require('webpack');
const webpackConfig = {
...
resolve: { ... },
plugins: [
new webpack.IgnorePlugin(/^pg-native$/)
// Or, for WebPack 4+:
new webpack.IgnorePlugin({ resourceRegExp: /^pg-native$/ })
],
output: { ... },
...
}
Updated to include a change suggested in the comments.
This is an old thread but the problem still exists, so for anyone experiencing it, there is a workaround. The problem is an interaction between the way that node-postgres is written and how babel rewrites the code, which forces pg-native to be loaded even when you don't explicitly import/require it.
The simplest workaround is to add a couple of aliases to your webpack.config.js to cause it to link in a dummy do-nothing file instead:
{
...
resolve: {
alias: {
...
'pg-native': path-to-dummy-js-file,
'dns': path-to-dummy-js-file
}
}
...
}
where the dummy file contains a single line:
export default null
See https://github.com/brianc/node-postgres/issues/838 for further discussion and alternative workarounds.
I know that this is an old topic but I'm compelled to share how I solved it. It was maddening to deal with.
So, here is the readers digest version as based on the recollection from the last brain cell that I have.
Error:
Webpack Compilation Error ./node_modules/pg/lib/native/client.js Module not found: Error: Can't resolve 'pg-native'
The error above was thrown when attempting to run a Cypress test that required the npm package 'pg'.
Attempting to install the pg-native package was not successful and resulted in another error; namely ->
Call to 'pg_config --libdir' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
I found that executing pg_config --libdir in the VSCode cmd prompt resulted in that command failing.
However, I knew that it should work since running that command from the system command prompt resulted in this -> C:/PROGRA~1/POSTGR~1/9.3/lib
That is the path that contains a required dll.
So, instead of running npm install from the VSCode command prompt, I ran it from the command prompt as launched from windows.
The result...success!!! pg-native was installed successfully.
After, the Cypress test was able to run as well.
Errors in now way helped me to arrive at this solution. It was more just checking that things were installed that were required, etc.
You may have pg-native globally installed locally. Hence the packet manager does not include the pg-native in the lock file. That was a issue i experienced where it did run fine locally but every time i build in the cloud webpack complained about pg-native missing. I solved it by removing the lockfile in the files pushed to the cloud (In this case seed.run).
I want to add Bootstrap CSS to my own sub-elements by using SASS inheritance:
nav > a {
#extend: .nav-item;
#extend: .nav-link;
}
I use Node with webpack for bundling. And I've installed the bootstrap-sass but I can't seem to get the #import 'bootstrap' to work. All I get is File to import not found or unreadable: bootstrap. The sass part of the webpack code is:
module: {
loaders: [
....,
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass'),
}],
I guess this must be something trivial that I've missed. It's not entirely surprising that SASS doesn't have access to the library but I haven't found any good hints on how to provide the library directly to SASS.
I literally have no what you have done so far for setup and other things. In simple english, if you are using SASS files downloaded from bootstrap's official website, you can use their mixins, variables and extend code in your own code file. Though it needs proper project setup for files and import them in a proper way.
In the shared code, your syntax for #extend appears to be wrong. I have shown a dummy code snippet for demo purpose.
// code already written inside Bootstrap source file.
.nav-item {
background:red;
}
.nav-link {
color: #fff;
}
// your code
.nav > a {
#extend .nav-item;
#extend .nav-link;
}
You can use http://www.sassmeister.com/website for trial and error.
This is what it looks like, when compiled.
I am having an issue with brunch#1.7.6 not compiling bower_component css files. Similar to Separating app and vendor css in Brunch. Only the css/app.css is getting generated for me. :/
{
stylesheets: {
joinTo: {
'css/app.css': /^app/,
'css/vendor.css': /^bower_components/
}
}
Please let me know if I am doing something wrong. All seemed fine when I was using brunch#1.6.7. Did the config change with the introduction to bower being built in?
With regards to x-editable, I ran into the failure to include the bower_components css, but found that I simply had to add the specifics in the overrides section of bower.json (since it has multiple library options the main is not included in the .bower.json).
I used the following overrides successfully:
"overrides": {
"x-editable": {
"main": [
"dist/bootstrap3-editable/js/bootstrap-editable.js",
"dist/bootstrap3-editable/css/bootstrap-editable.css"
]
}
}