Develop Reference

Nextjs compiling error- Module not found: Can't resolve 'module'

I'm working on a nextjs project with wagmi hooks. Nextjs threw Can't resolve 'module' error (see error message below). Note this is after I surpressed the initial 'cannot resolve fs module' and 'child_process module' error by adding fallback statement in my next.config.js file.
I'm using wagmi hooks to read and send transactions to deployed smart contracts. I wonder if this threw the chain of the error messages. Any help would be appreciated. Thank you!
Error message:
./node_modules/eslint-config-next/index.js:42:0 Module not found: Can't resolve 'module'
Reference code in /eslint-config-next/index.js:42:0
const mod = require('module')
const resolveFilename = mod._resolveFilename
mod._resolveFilename = function (request, parent, isMain, options) {
const hookResolved = hookPropertyMap.get(request)
if (hookResolved) {
request = hookResolved
}
return resolveFilename.call(mod, request, parent, isMain, options)
}
My next.config.js:
const nextConfig = {
reactStrictMode: true,
/**below is added to suppress initial fs module not found and child_process module not found error*/
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback.fs = false;
config.resolve.fallback.tls = false;
config.resolve.fallback.net = false;
config.resolve.fallback.child_process = false;
}
return config;
},
future: {
webpack5: true,
},
fallback: {
fs: false,
tls: false,
net: false,
child_process: false,
},
};
module.exports = nextConfig;
My package.json:
{
"name": "slot_next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#next/font": "13.1.2",
"#nodelib/fs.scandir": "^2.1.5",
"#rainbow-me/rainbowkit": "^0.8.1",
"eslint": "8.31.0",
"eslint-config-next": "13.1.2",
"ethers": "^5.7.2",
"next": "13.1.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"wagmi": "^0.9.6"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
I also trie to run npm cache clear --force and npm install but it didn't help

Laravel 9.1 / Vite - "TypeError: laravel is not a function" When Running "NPM Run Dev"

I am attempting to build a web app using Laravel 9.1 which comes with Vite, personally I've never used Vite before so I'm not too sure about this error.
I seem to be receiving the error
TypeError: laravel is not a function
whenever I run npm run dev. I get the same error when running build.
Below I will post my package.json & my vite.config.js files.
Package.json
{
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#vitejs/plugin-vue": "^2.3.3",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.1",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.2.4"
},
"dependencies": {
"got": "^11.8.3",
"vue": "^3.2.36",
"vue-loader": "^17.0.1"
}
}
vite.config.js
import laravel from 'laravel-vite-plugin'
import vue from '#vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'#': '/resources/js',
},
},
});
I'm not sure how to fix this error, or proceed with this error occurring when attempting to run dev.
Thanks in Advance for any help :)
I have tried reinstalling the node modules, updating Node to v19 and even fully restarted the project install.

Try removing
"type" : "module"
From your package.json, it worked for me but i am still investigating the reason behind

vite failed to load config from vite.config.js,

I created a new vue app by doing these (according to vue docs)
npm init vue#latest
npm install
Then I try to run npm run dev.Then this happened.
My environments are these
OS => Ubuntu
Node version => 18.7.0
npm version => 8.15.0
My package.json
{
"name": "vue-project",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.0.1",
"vite": "^3.0.4"
}
}
My vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
I have been searching for a while now but no avail.Thanks in advance.

Finally I found the solution.
The problem was because of the package.json file conflict.
Vite is using the wrong package.json file located in the Project's parent directory instead of project's own package.json file.Like this -
~/package.json ( wrong file )
~/Projects/VueProject/package.json ( correct file )
So delete the wrong file and the problem will be fixed.
Thanks to this github issue answer package.json:1:0: error: Unexpected end of file

how add coffeescript in svelte on Rails 7?

I have a Rails 7 app with esbuild :
esbuild.config.js :
#!/usr/bin/env node
const watch = process.argv.includes("--watch");
const esbuild = require('esbuild')
const coffeeScriptPlugin = require('esbuild-coffeescript');
const esbuildSvelte = require('esbuild-svelte');
const sveltePreprocess = require('svelte-preprocess');
esbuild
.build({
entryPoints: ["app/javascript/all.js"],
bundle: true,
outfile: "app/assets/builds/all.js",
// outdir: "app/assets/builds/",
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess({coffeescript: { bare: true }}),
}),
// coffeeScriptPlugin({bare: true}), I TRIED THIS TOO...
],
logLevel: "debug",
watch: watch
})
.catch(() => process.exit(1));
my.svelte :
<script lang="coffee">
test = ->
console.log 'test coffee'
test()
</script>
got an error :
$ yarn build --watch yarn run v1.22.19 $ node ./esbuild.config.js
--watch ✘ [ERROR] [plugin esbuild-svelte] Unexpected token
app/javascript/all.js:3:3:
3 │ 1:
╵ ^
2: <script lang="coffee">
3: test = ->
^
4: console.log 'test coffee'
5: test()
The plugin "esbuild-svelte" was triggered by this import
app/javascript/svelte_src.js:6:32:
6 │ import DemoSvelteComponent from './svelte/DemoSvelteComponent.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error [watch] build finished, watching for changes... error Command
failed with exit code 1. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command.
$ node -v
v18.4.0
package.json :
{
"name": "app",
"private": "true",
"dependencies": {
"#hotwired/stimulus": "^3.0.1",
"#hotwired/turbo-rails": "^7.1.3",
"esbuild": "^0.14.43",
"esbuild-coffeescript": "^2.1.0",
"esbuild-svelte": "^0.7.1",
"sass": "^1.52.3",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
},
"scripts": {
"build": "node ./esbuild.config.js"
}
}
How add coffeescript in svelte with Rails ?

This setup works with node v18.4.0 v16.15.1 v14.19.3. It turned out pretty much identical to what you have, except I don't know what's in your all.js file.
// package.json
{
"name": "app",
"private": "true",
"dependencies": {
"#hotwired/stimulus": "^3.0.1",
"#hotwired/turbo-rails": "^7.1.3",
"esbuild": "^0.14.43",
"esbuild-coffeescript": "^2.0.0",
"esbuild-svelte": "^0.7.1",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
},
"scripts": {
"build": "node ./esbuild.config.js"
}
}
// esbuild.config.js
const watch = process.argv.includes("--watch");
const esbuild = require("esbuild");
const esbuildSvelte = require("esbuild-svelte");
const sveltePreprocess = require("svelte-preprocess");
esbuild
.build({
entryPoints: ["app/javascript/all.js"],
outdir: "app/assets/builds/",
bundle: true,
sourcemap: true,
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess(),
}),
],
logLevel: "debug",
watch: watch,
})
.catch(() => process.exit(1));
// app/javascript/all.js
import App from "./my.svelte";
new App({ target: document.body });
<!-- app/javascript/my.svelte -->
<script lang="coffee">
test = ->
console.log 'test coffee'
test()
</script>
Compiles:
$ yarn build --watch
yarn run v1.22.19
$ node ./esbuild.config.js --watch
[watch] build finished, watching for changes...
[watch] build started (change: "app/javascript/my.svelte")
[watch] build finished
and shows up in the browser console:
test coffee my.svelte:1
This is a smaller working example, maybe it'll help eliminate the source of the error. It compiles my.svelte file directly and prints out the source.
// package.json
{
"dependencies": {
"esbuild": "^0.14.43",
"esbuild-coffeescript": "^2.1.0",
"esbuild-svelte": "^0.7.1",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
}
}
// esbuild.config.js
require("esbuild").build({
entryPoints: ["app/javascript/my.svelte"],
plugins: [require("esbuild-svelte")({ preprocess: require("svelte-preprocess")() })],
}).catch(() => process.exit(1));
$ node --version
v18.4.0
$ node ./esbuild.config.js
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
function instance($$self) {
var test;
test = function() {
return console.log("test coffee");
};
test();
return [];
}
class My extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, null, safe_not_equal, {});
}
}
export default My;

I don't find the problem, I make new app and copy files, I don't see when exactly that works, but that works ... ^^
May be a bad invisible character was in file?
So It's works fine with include esbuild-coffeescript ...
That stay a mystery for my use case (I try checkout from git and bug don't come back.... realy strange)

I've met the same problem in my rails app and my solution was using another build script
old:
"build-es": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
new:
"build": "node ./esbuild.config.js",

How do I run babel-plugin-tester with jest?

It should be very simple this one, but I can't run it. I have installed the plugin according the their docs and written a simple example also according to their docs:
test.js:
import pluginTester from 'babel-plugin-tester'
pluginTester({
plugin: identifierReversePlugin,
snapshot: true,
tests: [
{code: '"hello";', snapshot: false},
{
code: 'var hello = "hi";',
output: 'var olleh = "hi";',
},
`
function sayHi(person) {
return 'Hello ' + person + '!'
}
console.log(sayHi('Jenny'))
`,
],
})
// normally you would import this from your plugin module
function identifierReversePlugin() {
return {
name: 'identifier reverse',
visitor: {
Identifier(idPath) {
idPath.node.name = idPath.node.name.split('').reverse().join('')
},
},
}
}
I have installed jest according to jest docs:
npm install jest --save-dev
My package.json file:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"babel-jest": "^26.0.1",
"babel-plugin-tester": "^9.2.0",
"jest": "^26.0.1"
}
}
I also have babel config as:
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
I try to run npx jest test.js but it just spits out
No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
I can run jest on a simple example without babel-plugin-tester, so everything seems to work, but I probably don't understand how it is intended to be used with jest. I feel so stupid.

This is stupid! I had to rename my testfile to fit *.test.js. Why don't jest trust me that the file I intend to run indeed contains tests?! This is obviously a stupid implementation of jest!!
Hours of wasted time.. thanks to stupid jest