We Keep Coding

Storybook Canvas: 'ReferenceError: react is not defined'

Newbie to Storybook here.
I'm trying to integrate Storybook into my Gatsby front end. However, when trying to preview the test components in Storybook Canvas I get the following error:
react is not defined
ReferenceError: react is not defined
at react-dom/client (http://localhost:6006/main.iframe.bundle.js:1970:18)
at webpack_require (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
at webpack_require.t (http://localhost:6006/runtime~main.iframe.bundle.js:106:38)
I'm able to see the component preview in Storybook Docs but not in Storybook Canvas.
Link to repository:
https://github.com/akarpov91/gatsby-tutorial

Try adding the following snippet in your main.js:
module.exports = {
// ...
babel: async (options) => ({
...options,
presets: [
...options.presets,
[
'#babel/preset-react', {
runtime: 'automatic',
},
'preset-react-jsx-transform'
],
],
}),
};
Apparently, #storybook/react adds #babel/preset-react without runtime: 'automatic' property

I have had the same problem, try copying this into your .storybook/main.js config. Hope this works for you too.
module.exports = {
// You will want to change this to wherever your Stories will live
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)"],
addons: ["#storybook/addon-links", "#storybook/addon-essentials"],
framework: "#storybook/react",
core: {
builder: "webpack5",
},
webpackFinal: async config => {
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// Use installed babel-loader which is v8.0-beta (which is meant to work with #babel/core#7)
config.module.rules[0].use[0].loader = require.resolve("babel-loader")
// Use #babel/preset-react for JSX and env (instead of staged presets)
config.module.rules[0].use[0].options.presets = [
require.resolve("#babel/preset-react"),
require.resolve("#babel/preset-env"),
]
config.module.rules[0].use[0].options.plugins = [
// Use #babel/plugin-proposal-class-properties for class arrow functions
require.resolve("#babel/plugin-proposal-class-properties"),
// Use babel-plugin-remove-graphql-queries to remove graphql queries from components when rendering in Storybook
// While still rendering content from useStaticQuery in development mode
[
require.resolve("babel-plugin-remove-graphql-queries"),
{
stage: config.mode === `development` ? "develop-html" : "build-html",
staticQueryDir: "page-data/sq/d",
},
],
]
return config
},
}

Vite manifest not found after changing outDir in vite.config.js

When I changed outDir: "public" to laravel 9.41, throwing an error.
Vite manifest not found at:
E:\oblia\obilia_site\public\build/manifest.json
Why is Vite looking for manifest in the build directory when I changed it to public? The app is running fine when I am running npm run dev, but when is stop dev and ran npm run build, I get this error. I want all my assets to be in public, not in public/build.
vite.config.js
import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import laravel from "laravel-vite-plugin";
export default defineConfig({
base: "/",
build: {
outDir: "public",
emptyOutDir: false,
},
plugins: [
laravel({
input: [
"resources/css/bootstrap.min.css",
"resources/css/font-awesome.min.css",
"resources/css/feather.css",
"resources/css/owl.carousel.min.css",
"resources/css/magnific-popup.min.css",
"resources/css/lc_lightbox.css",
"resources/css/bootstrap-select.min.css",
"resources/css/dataTables.bootstrap5.min.css",
"resources/css/select.bootstrap5.min.css",
"resources/css/dropzone.css",
"resources/css/scrollbar.css",
"resources/css/datepicker.css",
"resources/css/flaticon.css",
"resources/css/notiflix.min.css",
"resources/css/style.scss",
"resources/css/override.scss",
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
"resources/js/jquery-3.6.0.min.js",
"resources/js/popper.min.js",
"resources/js/bootstrap.min.js",
"resources/js/magnific-popup.min.js",
"resources/js/waypoints.min.js",
"resources/js/counterup.min.js",
"resources/js/waypoints-sticky.min.js",
"resources/js/isotope.pkgd.min.js",
"resources/js/imagesloaded.pkgd.min.js",
"resources/js/owl.carousel.min.js",
"resources/js/theia-sticky-sidebar.js",
"resources/js/lc_lightbox.lite.js",
"resources/js/bootstrap-select.min.js",
"resources/js/dropzone.js",
"resources/js/jquery.scrollbar.js",
"resources/js/bootstrap-datepicker.js",
"resources/js/jquery.dataTables.min.js",
"resources/js/dataTables.bootstrap5.min.js",
"resources/js/anm.js",
"resources/js/notiflix.min.js",
"resources/js/bootstrap-slider.min.js",
"resources/js/chart.js",
"resources/js/custom.js",
"resources/js/app.js",
"resources/js/init.js",
],
refresh: true,
}),
viteStaticCopy({
targets: [
{ src: "resources/images", dest: "" },
{ src: "resources/fonts", dest: "" },
{ src: "resources/files", dest: "" },
],
}),
],
});
I am not used to Vite.

You need to configure the outDir at the Laravel side of things as well.
After digging through the source code I found Illuminate/Foundation/Vite::useBuildDirectory https://github.com/laravel/framework/blob/6939c04d81abdbed300aba08208fcf88b37e3889/src/Illuminate/Foundation/Vite.php#L192
This is likely what you missed in configuring the new build directory.
The manifest is expected to be found at public_path($buildDirectory.'/'.$this->manifestFilename); with $buildDirectory having a default of build, and $this->manifestFilename a default of manifest.json. so thats how your E:\oblia\obilia_site\public\build/manifest.json came to be, with E:\oblia\obilia_site\public being your (default) public path.
If you configure the $buildDirectory as "." everything should work out.
You can find an example of how these things can be done in the Laravel documentation under advanced customization in Vite.
The following code should do the trick instead of the #vite directive inside of your main template
{{ Vite::useBuildDirectory('.') }}

Webpack 4 + Angular 10 custom webpack: search and replace loader not working

So I'm trying to use a custom webpack config in my Angular 10.x app where I want to remove 'data-test' attributes from my templates during compilation, so the production code does not contain any e2e selector references. For this, I'm using the custom webpack builder (https://www.npmjs.com/package/#angular-builders/custom-webpack) with a custom webpack config. I'm loading the config in the angular.json like this:
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.ts",
"mergeStrategies": {
"externals": "append"
}
},
And the webpack config looks like this:
import { CustomWebpackBrowserSchema, TargetOptions } from '#angular-builders/custom-webpack';
import { EnvironmentType, getEnumValues } from '#enum-package/core/enumeration';
import * as webpack from 'webpack';
export default (config: webpack.Configuration, options: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => {
const env: EnvironmentType =
<EnvironmentType>(
getEnumValues(EnvironmentType).find(environmentType =>
targetOptions.configuration?.toLowerCase().includes(environmentType.toLowerCase()),
)
) ?? EnvironmentType.DEVELOPMENT;
if (config.module?.rules) {
// Remove E2E testing attributes from production code
if (env === EnvironmentType.PRODUCTION) {
const testSelectorRegex = new RegExp(/data-test="(.*)"|#HostBinding\('attr.data-test'\)(.*);/g);
config.module.rules.push({
test: /\.(js|ts|html)$/,
enforce: 'pre',
loader: 'string-replace-loader',
options: {
search: testSelectorRegex.source,
replace: match => {
console.log(`Replace E2E selector '${match}'.`);
return ' ';
},
flags: 'g',
},
});
}
}
return config;
};
The search-replace-loader package (https://www.npmjs.com/package/string-replace-loader) is what takes care of replacing the actual attributes from the templates. While running the ng build command, I can actually see that the replace itself works, since the Replace E2E selector '${match}'. is actually running and I can see the tags that I want to remove being logged during compilation.
For some reason when running the app from the dist folder after compilation, the tags are still in place when I inspect the DOM in my browser.
Am I missing something? Is there a build step before or after running this webpack loader that does not use the replaced source code? Does this have anything to do with the Ivy build engine that we're using?

Bazel Typescript - Cannot find ts_library Referenced by module_name

I have two Bazel BUILD files:
server/BUILD
enums/BUILD
My goal is to import a ts_library from enums into server as a dependency for the server ts_library. Therefore, I used the approach described here: https://dev.to/lewish/building-a-typescript-monorepo-with-bazel-4o7n (via module_name and deps)
Enums BUILD file:
package(default_visibility = ["//visibility:public"])
load("#io_bazel_rules_docker//nodejs:image.bzl", "nodejs_image")
load("#npm_bazel_typescript//:index.bzl", "ts_library")
ts_library(
name = "enums",
srcs = glob(["src/index.ts"]),
module_name = "#lbm/enums",
)
Server BUILD file:
load("#io_bazel_rules_docker//nodejs:image.bzl", "nodejs_image")
load("#npm_bazel_typescript//:index.bzl", "ts_library")
ts_library(
name = "lib",
srcs = glob(
include = [ "**/*.ts" ],
exclude = [ "src/index.ts" ],
),
deps = ["//enums:enums"]
)
ts_library(
name = "main",
srcs = [ "src/index.ts" ],
deps = ["//enums:enums", ":lib"],
)
filegroup(
name = "libfiles",
srcs = ["lib"],
output_group = "es5_sources",
)
filegroup(
name = "mainfile",
srcs = ["main"],
output_group = "es5_sources",
)
nodejs_image(
name = "server",
data = [
":libfiles",
":mainfile",
],
entry_point = ":mainfile",
)
But when running
bazel run //server:server
Although I've set module_name = "#lbm/enums" and added //enums to the deps, I get this error:
INFO: Analyzed target //server:server (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
ERROR: /minimal-bazel-monorepo/server/BUILD:13:1: Compiling TypeScript (devmode) //server:main failed (Exit 1)
server/src/index.ts:2:27 - error TS2307: Cannot find module '#lbm/enums'.
2 import { Constants } from '#lbm/enums';
~~~~~~~~~~~~
Target //server:server failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 0.207s, Critical Path: 0.09s
INFO: 0 processes.
You can try it yourself: https://github.com/flolude/minimal-bazel-monorepo
Edit #1
After updating the import statement from import { Constants } from '#lbm/enums'; to import { Constants } from '#lbm/enums/src';, as stated by Ray, I get this error:
Error: Cannot find module '#lbm/enums/src/index'. Please verify that the package.json has a valid "main" entry

Since BUILD file is located in /enums dir and not in /enums/src, the correct TS import would look like this:
import { Constants } from '#lbm/enums/src';
Or maybe consider moving this BUILD file to /enums/src dir, then TS imports can be left as of now.
I noticed from the example that you use yarn workspaces. Unfortunately, they are not supported right now by rules_nodejs, so prob better to have one package.json in the root.

Creating svg sprites using grunt module

I'm new to grunt and node js. I'm facing issues in creating svg sprites using grunt-svg-sprite module. I have used grunt-svg-sprite module to create svg sprite image. I have installed the grunt-svg-sprite module using the following command.
npm install grunt-svg-sprite --save-dev
I enabled the plugin in my grunt.js file using the line below.
grunt.loadNpmTasks('grunt-svg-sprite');
And my plugin configuration is as follows
svg_sprite : {
basic : {
// Target basics
expand : true,
cwd : 'images/svg-logo/',
src : 'images/svg-logo/*.svg',
dest : 'out/',
// Target options
options : {
mode : {
css : { // Activate the «css» mode
render : {
css : true // Activate CSS output (with default options)
}
}
}
}
}
},
My folder structure is given below
Project_folder
├───css
├───Images
│ └───svg-logo
├───GruntFile.js
├───html
├───node_modules
├───include
├───package.json
When i run the following command, i get the success message, but there is no folder has created.

Everything is ok here. src should be specify only the file there.
Try with this one.
svg_sprite : {
basic : {
expand : true,
cwd : 'images/svg-logo',
src : ['**/*.svg'],
dest : 'out',
options : {
mode : {
css : {
render : {
css : true
},
},
},
},
},
},