Webpack breaking changes for builtin modules on Gatsby site - javascript

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.

Related

Build error when compiling Next.js app using next-pwa

I have been trying to run a local Next.js (v 12.2.2) project but for some reason, the dev script is not working as it should.
All the dependencies have been installed but still, I can't narrow down the reason why the script doesn't work.
The terminal looks like this after running the script
error - Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'reactStrictMode' property is not expected to be
here. Did you mean property 'exclude'?
Here's the next.config.js file
const withPWA = require("next-pwa");
module.exports = withPWA({
reactStrictMode: true,
webpack5: true,
webpack: (config) => {
config.resolve.fallback = { fs: false };
return config;
},
pwa: {
dest: "public",
register: true,
disable: process.env.NODE_ENV === "development",
},
images: {
domains: ["pbs.twimg.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"],
},
// for running with docker
output: "standalone",
});
Here's the package.json file
{
"name": "musixverse-client",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postbuild": "next-sitemap"
},
"dependencies": {
"#headlessui/react": "^1.6.6",
"#heroicons/react": "^1.0.5",
"#walletconnect/web3-provider": "^1.7.8",
"#web3auth/web3auth": "^1.1.1",
"axios": "^0.26.1",
"country-state-city": "^3.0.1",
"magic-sdk": "^8.0.1",
"moralis": "^1.10.0",
"next": "^12.2.2",
"next-pwa": "^5.4.4",
"next-sitemap": "^3.1.16",
"next-themes": "^0.0.15",
"persona": "^4.6.0",
"react": "^17.0.2",
"react-datepicker": "^4.8.0",
"react-dom": "17.0.2",
"react-image-crop": "^8.6.12",
"react-moralis": "^1.4.0",
"react-select": "^5.4.0",
"styled-components": "^5.3.5",
"web3": "^1.7.4"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.6.0",
"eslint-config-next": "12.0.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
}
}
node-version: 16.17.0,
npm-version: 8.19.0
Your usage of the next-pwa plugin is incorrect as of version 5.6.0. A breaking change was introduced that changed the plugin signature (see next-pwa/releases/tag/5.6.0).
Start from version 5.6.0. This plugin function signature has been
changed to follow the recommended pattern from next.js. Mainly
extracting pwa config from mixing into rest of the next.js config.
From version 5.6.0, according to the documentation, your config should look like the following.
// `next-pwa` config should be passed here
const withPWA = require("next-pwa")({
dest: "public",
register: true,
disable: process.env.NODE_ENV === "development",
});
// Use `withPWA` and pass general Next.js config
module.exports = withPWA({
reactStrictMode: true,
webpack5: true,
webpack: (config) => {
config.resolve.fallback = { fs: false };
return config;
},
images: {
domains: ["pbs.twimg.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"]
},
output: "standalone"
});

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";

webpack path-browserify polyfill failing

I'm migrating a mono-repo app from react-scripts v4 to react-scripts v5. The app uses npm workspaces and has a structure as below
AppName
|_ julia_project_files
|_node_modules (one)
|_ react_app
|_node_modules (two)
|_src
|_package.json(two)
|_ config_overides.js
|_package.json (one)
The app leverages multiple node.js libraries which break with webpack 5 (no inbuilt node.js polyfill support) and I had errors similar to this. I leveraged this solution to fix all errors except one
Module not found: Error: You attempted to import /Computer/AppName/node_modules/path-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I don't see where I'm going wrong?
files
config-overrides.js
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
crypto: require.resolve('crypto-browserify'),
path: require.resolve("path-browserify"),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
package.json (one)
{
...some stuff,
"private": true,
"version": "1.0.0",
"main": "index.js",
"workspaces": [
"react-app",
"packages/*"
],
"scripts": {
"start-server": "julia --threads=auto --project=../julia-api -e",
"start-client": "cd react-app && npm run start-web",
"lint-fix-client": "cd react-app && npm run lint-fix",
"prepare": "husky install"
},
"devDependencies": {
"#types/jest": "^26.0.21",
"husky": "^7.0.4"
},
"dependencies": {
"path-browserify": "^1.0.1"
}
}
package.json (two)
{
"dependencies": {
... alot of non-related dependencies
"https-browserify": "^1.0.0",
// "path-browserify": "^1.0.1", I've tried installing it here too
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-scripts": "5.0.0",
"stream-browserify": "^3.0.0",
},
"scripts": {
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 build",
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 start",
"lint": "eslint src",
"lint-fix": "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"
},
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
"last 1 chrome version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:8080",
"devDependencies": {
... many dev dependencies
}
}
I've played around with where I install path-browserify be it package.json(one) or (two) and the error persists.
I found this post to be really helpful: https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error.
I need polyfills for my project, so I tested solutions one and three and both worked. I wasn't able to get the fallback solution to work that I had seen in other posts, but finally found this.
We had two other packages that caused this error (besides path-browserify), and I was able to employ the same steps from solution three in the post above to get them working as well.

Setting up actioncable and sockjs-node globally with ESBuild rails 6

The dev team and I have been in the process of moving our current setup from webpack to esbuild. We have some coffeescript files that rely on actioncable. Actioncable has completely stopped since removing webpacker dependencies/webpack-dev-server. Does anyone know how to get actioncable to run at the window level, so that our coffeescript files can access it? We used sockjs-node for our webpack setup and need to get the same results with esbuild.
package.json
{
"name": "app",
"private": "true",
"dependencies": {
"#rails/actioncable": "^7.0.0"
"#hotwired/turbo-rails": "^7.0.1",
"#popperjs/core": "^2.10.2",
"bootstrap": "^5.1.1",
"esbuild": "^0.13.3",
"esbuild-rails": "^1.0.3",
"sass": "^1.42.1"
},
"scripts": {
"build": "node esbuild.config.js",
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}
esbuild.config.js
const path = require('path')
const rails = require('esbuild-rails')
require("esbuild").build({
entryPoints: ["application.js"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
watch: process.argv.includes("--watch"),
plugins: [rails()],
}).catch(() => process.exit(1))
application.js
import actioncable from "actioncable"

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>

Categories