We Keep Coding

Module parse failed for wasm module generated by rust wasm-pack

I have been following this tutorial: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm in order to build a Rust library and use it in a VueJS project.
When I run $ wasm-pack build --target web everything compiles fine and a pkg directory is created properly.
I then import my rust function into a typescript file like:
import { run } from '../../../../Rust/skunk/pkg/skunk_lib';
My package.json looks like this:
{
"name": "skunk_interactive",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"primeicons": "^5.0.0",
"primevue": "^3.12.6",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.17",
"#vue/cli-plugin-eslint": "~4.5.17",
"#vue/cli-plugin-router": "~4.5.17",
"#vue/cli-plugin-typescript": "~4.5.17",
"#vue/cli-plugin-unit-jest": "~4.5.17",
"#vue/cli-plugin-vuex": "~4.5.17",
"#vue/cli-service": "~4.5.17",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^2.0.0-0",
"#wasm-tool/wasm-pack-plugin": "^1.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
"transform": {
"^.+\\.vue$": "vue-jest"
}
}
}
When I try to run npm run serve I get the following error:
Module parse failed: Unexpected token (237:57)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| case 0:
| if (typeof input === 'undefined') {
> input = new URL('skunk_lib_bg.wasm', import.meta.url);
| }
|
I have had a look at this github issue: https://github.com/rustwasm/wasm_game_of_life/issues/22, where it says that updating your webpack should solve the issue. That post was years ago, and I have the latest version of webpack, and still, this error persists.
I also introduced a webpack.config.js file, though I'm not entirely sure what should go in it.
Any thoughts on what might be going wrong?

I ran into a problem with the '#wasm-tool/wasm-pack-plugin' when using a newer version of Rust to compile the WASM.
I had to add a argument to wasm-pack in the WasmPackPlugin instantiation in webpack.config.js
21 │ plugins: [
22 │ new WasmPackPlugin({
23 │ crateDirectory: __dirname,
24 + │ extraArgs: "--target web"
25 │ }),
26 │ ]

rust side preperation
in cargo.toml file
[dependencies]
wasm-bindgen="0.2.63"
[lib]
# if you want to integrate your rust code with javascript we use cdylib
crate-type=["cdylib"]
inside rust file
use wasm_bindgen::prelude::*;
Inside .rs file you have to decorate any function or type with #[wasm_bindgen]
#[wasm_bindgen]
#[derive(Clone,Copy)]
pub enum Status{
Yes,
No,
}
Javascript preparation:
You have to load the content of pkg into your javascript project. there is a package.json file inside pkg, using its name property we are going to load that module inside our project through the package.json in javascript project.
// package.json of your javascript project
"dependencies": {
// other dependencies
.....
// assuming that "name" property of package.json in "pkg" directory is "skunk_lib"
"skunk_lib": "file:../pkg",
},
run npm install to load the pkg module. skunk_lib should be in the node_modules
Inside your javascript file:
// skunk_lib is one of our dependencies
import {yourRustFunction} from "skunk_lib";

Electron - Typescript - Cannot find module

Trying to build my electron app with typescript generated from the electron-quick-start-typescript project. I have added an additional module called auth.ts which is not recognised when I start the app. I am trying to reference it in renderer.ts with
import { myfunction } from './auth'
However I can see that it is getting converted into js. What could be causing this issue? Why can't my application see my new module?
Additionally here is my package.json file if that helps.
{
"name": "electron-quick-start-typescript",
"version": "1.0.0",
"description": "A minimal Electron application written with Typescript",
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"lint": "eslint -c .eslintrc --ext .ts ./src",
"start": "npm run build && electron ./dist/main.js"
},
"repository": "https://github.com/electron/electron-quick-start-typescript",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo",
"typescript"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"electron": "^16.0.2",
"eslint": "^7.32.0",
"typescript": "^4.5.2"
},
"dependencies": {
"node-fetch": "^2.6.1"
}
}

Found the answer. For anyone else having the same issue this resolved the issue -
Make sure nodeIntegration is enabled in main.js
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, "preload.js"),
},
Index.html
replace:
<script src="./dist/renderer.js"></script>
with:
<script>
require("./dist/renderer.js");
</script>

Webpack breaking changes for builtin modules on Gatsby site

I've tried deploying my Gatsby site to Netlify, but I keep getting these errors for various node modules whenever I try to deploy. I've tried making a webpack.config.js file and including both of the suggested solutions to no avail. I've also tried using alias instead of fallback, adding a browser section to the package.json file which sets the modules to false, and adding a target property in the webpack.config.js file as some other stackoverflow answers have suggested, but I'm still pretty stuck. I don't have any prior experience to webpack and have been doing my best to look for answers. Is there some sort of special configuration for this with Gatsby that I'm missing?
Error message
10:37:20 AM: error Generating JavaScript bundles failed
10:37:20 AM: Can't resolve 'stream' in '/opt/build/repo/node_modules/cipher-base'
10:37:20 AM: If you're trying to use a package make sure that 'stream' is installed. If you're trying to use a local file make sure that the path is correct.
10:37:20 AM: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
10:37:20 AM: This is no longer the case. Verify if you need this module and configure a polyfill for it.
10:37:20 AM: If you want to include a polyfill, you need to:
10:37:20 AM: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
10:37:20 AM: - install 'stream-browserify'
10:37:20 AM: If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
webpack.config.js
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"crypto-browserify": "^3.12.0",
"ethers": "^5.4.5",
"gatsby": "^3.11.1",
"gatsby-plugin-gatsby-cloud": "^2.11.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.11.0",
"gatsby-plugin-manifest": "^3.11.0",
"gatsby-plugin-offline": "^4.11.0",
"gatsby-plugin-react-helmet": "^4.11.0",
"gatsby-plugin-sharp": "^3.11.0",
"gatsby-source-filesystem": "^3.11.0",
"gatsby-transformer-sharp": "^3.11.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"web3": "^1.5.2"
},
"devDependencies": {
"prettier": "2.3.2"
},
"browser": {
"assert": false,
"crypto": false,
"http": false,
"https": false
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

In Gatsby, you can't define the webpack configuration like you did because Gatsby ships its own webpack.config.js as you can read in Gatsby's glossary.
However, Gatsby allows you to add a custom webpack configuration by exposing onCreateWebpackConfig method in your gatsby-node.js file.
So:
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
Should become:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
})
}
As I said, onCreateWebpackConfig is a method exposed only in the gatsby-node.js file so that snippet must be placed there.

How do I connect React component to cucumber.js?

I want to run React in Cucumberjs
I have made a Word class where I connected the App compnent
import { setWorldConstructor } from 'cucumber'
import {render } from '#testing-library/react'
import React from 'react'
import App from '../../App'
class AppWorld {
constructor () {
let {queryByText,queryByLabelText,queryByTestId} = render(<App/>)
this._queryByText = queryByText
this._queryByLabelText = queryByLabelText
this._gueryByTestId = queryByTestId
}
getQueryByText() {
return this._queryByText
}
getQueryByLabelText() {
return this._queryByLableText
}
getQueryByTestId() {
return this._queryByTestId
}
}
setWorldConstructor(AppWorld);
I also made a config file cucumber js
module.exports = {
default: [
'src/features/**/*.feature',
'--require ./features/worlds/AppWorld.js',
'--require ./features/support/index.js',
'--require src/features/**/*.js',
'--require-module #babel/register'
].join(' '),
};
> The package.json is
"name": "todofrontenf",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"bootstrap": "^4.5.0",
"dotenv": "^8.2.0",
"jest-fetch-mock": "^3.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.1",
"use-react-router": "^1.0.7",
"winston": "^3.3.3",
"winston-elasticsearch": "^0.7.12"
},
"scripts": {
"start:devsource": "DOTENV_CONFIG_BACKEND_URL=http://localhost:8080 node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js start",
"start:devbuild": "PORT=9000 node -r dotenv/config server.js dotenv_config_path=.env.dev",
"prestart": "npm build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"cucumber": "./node_modules/.bin/cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register",
"test:build": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.build",
"test:dev": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.dev",
"test:test": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/register": "^7.10.5",
"#reportportal/agent-js-jest": "^5.0.1",
"#testing-library/jest-dom": "^5.11.0",
"#testing-library/react": "^10.4.6",
"cucumber": "^6.0.5",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest-sonar-reporter": "^2.0.0"
}
}
I recive following message when I execute the npm run cucumber
Steins-MacBook-Air:todofrontend steinkorsveien$ npm run cucumber
> todofrontenf#0.1.0 cucumber /Users/steinkorsveien/Development/todo/todofrontend
> cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register
ReferenceError: document is not defined
at render (/Users/steinkorsveien/Development/todo/todofrontend/node_modules/#testing-library/react/dist/pure.js:82:5)
at new AppWorld (/Users/steinkorsveien/Development/todo/todofrontend/src/features/worlds/AppWorld.js:11:60)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todofrontenf#0.1.0 cucumber: `cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todofrontenf#0.1.0 cucumber 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:
How should I configure Cucumberjs to test React?

You need to register JSDOM so that #testing-library/react has a DOM to render the component to.
Firstly
npm install jsdom-global
Then, add this to your cucumber.js file
--require-module jsdom-global/register

Clean package.json before packing

Let's say you have a npm project with the following package.json:
{
"name": "XXX",
"version": "YYY",
"license": "ZZZ",
"scripts": {
"scriptA": "...",
"scriptB": "...",
"preinstall": "...",
"postinstall": "..."
},
"devDependencies": {
"depA": "vA",
"depB": "vB"
},
"dependencies": {
"depC": "vC",
"depD": "vD"
}
}
When packing/publishing your package, you don't need the scripts or devDependencies keys. But more dangerously, the preinstall and postinstall scripts could trigger weird/unwanted actions when people install your package as a dependency.
So how do you clean your package.json, ie remove the keys that you don't need?
I'm currently using npm 3.10. If I use the npm pack command, according to the npm documentation it will simply pack the current package if no arguments are provided (therefore taking the raw package.json from disk) and there is no options I can provide to clean it up.
I can of course write my own scripts that would zip the package and generate my own package.json. Is it the way to go?

I have created clean-package to do this.
The most simple usage is just three steps:
npm install clean-package --save-dev
Hook clean-package into the prepack and postpack scripts
"scripts": {
"prepack": "clean-package",
"postpack": "clean-package restore"
}
Configure clean-package as root property in your package.json
"clean-package": {
"remove": [
"script",
"devDependencies",
"preinstall",
"postinstall",
]
}
There are many more options and extended uses, so there is more information on the repo: https://github.com/roydukkey/clean-package.

Using npm itself, this does not seem possible. As of npm 3.10, npm publish or npm pack will indeed just include a pure copy of your package.json in your tgz.
The solution is therefore to generate its own packaged file to have full control over the included package.json.
Basic example
Note: this is using the shell and synchronous method from npm fs
const fs = require('fs');
const os = require('os');
const shell = require('shelljs');
const targz = require('tar.gz');
// create temp directory
const tempDirectory = fs.mkdtempSync(`${os.tmpdir()}/your-project-tarball-`);
const packageDirectory = `${tempDirectory}/package`;
// create subfolder package
fs.mkdirSync(packageDirectory);
// read existing package.json
const packageJSON = require('./package.json');
// copy all necessary files
// https://docs.npmjs.com/files/package.json#files
shell.cp('-R', packageJSON.files, packageDirectory);
shell.cp('-R', ['README.md', 'CHANGELOG.md', 'LICENSE'], packageDirectory);
// create your own package.json or modify it here
Reflect.deleteProperty(packageJSON, 'scripts');
fs.writeFileSync(`${packageDirectory}/package.json`, JSON.stringify(packageJSON, null, 2));
// create tgz and put it in dist folder
targz().compress(packageDirectory, 'your-package.tgz');
Real life example with Lodash
This is for example what the lodash lib does in version 4.17.2. Their original package.json looks like (cf https://github.com/lodash/lodash/blob/4.17.2/package.json):
{
"name": "lodash",
"version": "4.17.2",
"license": "MIT",
"private": true,
"main": "lodash.js",
"engines": { "node": ">=4.0.0" },
"scripts": {
"build": "npm run build:main && npm run build:fp",
"build:fp": "node lib/fp/build-dist.js",
"build:fp-modules": "node lib/fp/build-modules.js",
"build:main": "node lib/main/build-dist.js",
"build:main-modules": "node lib/main/build-modules.js",
"doc": "node lib/main/build-doc github && npm run test:doc",
"doc:fp": "node lib/fp/build-doc",
"doc:site": "node lib/main/build-doc site",
"doc:sitehtml": "optional-dev-dependency marky-markdown#^9.0.1 && npm run doc:site && node lib/main/build-site",
"pretest": "npm run build",
"style": "npm run style:main && npm run style:fp && npm run style:perf && npm run style:test",
"style:fp": "jscs fp/*.js lib/**/*.js",
"style:main": "jscs lodash.js",
"style:perf": "jscs perf/*.js perf/**/*.js",
"style:test": "jscs test/*.js test/**/*.js",
"test": "npm run test:main && npm run test:fp",
"test:doc": "markdown-doctest doc/*.md",
"test:fp": "node test/test-fp",
"test:main": "node test/test",
"validate": "npm run style && npm run test"
},
"devDependencies": {
"async": "^2.1.2",
"benchmark": "^2.1.2",
"chalk": "^1.1.3",
"cheerio": "^0.22.0",
"codecov.io": "~0.1.6",
"coveralls": "^2.11.15",
"curl-amd": "~0.8.12",
"docdown": "~0.7.1",
"dojo": "^1.11.2",
"ecstatic": "^2.1.0",
"fs-extra": "~1.0.0",
"glob": "^7.1.1",
"istanbul": "0.4.5",
"jquery": "^3.1.1",
"jscs": "^3.0.7",
"lodash": "4.17.1",
"lodash-doc-globals": "^0.1.1",
"markdown-doctest": "^0.9.0",
"optional-dev-dependency": "^2.0.0",
"platform": "^1.3.3",
"qunit-extras": "^3.0.0",
"qunitjs": "^2.0.1",
"request": "^2.78.0",
"requirejs": "^2.3.2",
"sauce-tunnel": "^2.5.0",
"uglify-js": "2.7.4",
"webpack": "^1.13.3"
},
"greenkeeper": {
"ignore": [
"lodash"
]
}
}
But the published package.json looks like (cf https://unpkg.com/lodash#4.17.2/package.json)
{
"name": "lodash",
"version": "4.17.2",
"description": "Lodash modular utilities.",
"keywords": "modules, stdlib, util",
"homepage": "https://lodash.com/",
"repository": "lodash/lodash",
"icon": "https://lodash.com/icon.svg",
"license": "MIT",
"main": "lodash.js",
"author": "John-David Dalton <john.david.dalton#gmail.com> (http://allyoucanleet.com/)",
"contributors": [
"John-David Dalton <john.david.dalton#gmail.com> (http://allyoucanleet.com/)",
"Mathias Bynens <mathias#qiwi.be> (https://mathiasbynens.be/)"
],
"scripts": { "test": "echo \"See https://travis-ci.org/lodash/lodash-cli for testing details.\"" }
}
where you can see the scripts and devDependencies keys for example are not there anymore. This is done using a JavaScript Template package.jst as long as a nodejs script Lodash CLI