Since most blocks (and the theme as a whole) share a lot of tailwind classes, I would like all css to end up in one css file in the build folder.

Our src folder currently has the flowing structure:

src/
├─ blocks/
│  ├─ [block name]/
│  │  ├─ edit.js
│  │  ├─ index.js
├─ css/
│  ├─ style.css
│  ├─ edit.css

edit.js and index.js imports edit.css and style.css respectively.
I would like for the generated css to be in two css files like this as well, but when I run wp-scripts build I end up with several css files in each blocks folder.

I think this might be an issue that I can solve by changing the webpack config (I’m using the default right now), but I don’t have enough experience with webpack to know what to change. So any help is appreciated!

when I use OMGF, my Google Fonts are loaded locally as requested, which is great.

But then I have the entry webpack:// with several subfolders in the console.

Is anything actually loaded externally here? Or where does this webpack entry come from? How does it behave here with the DSGVO?

This info would be important to me before I buy the PRO version!

Greetings Sascha

react-image-gallery

for creating image gallery, but I am getting

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Upon looking online I found that I need to declare react and react-dom as externals and tried writing webpack.config.js

const webpack = require("webpack");
const path = require("path");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "build"),
		filename: "drstk.build.js",
		libraryTarget: "window",
	},
	externals: {
		react: "React",
		"react-dom": "ReactDOM",
	},
};

for react and scss files it is showing I need to utilize appropriate loaders. I dont know what to do here and am struck with it, I dont want to change the build style of wp-script

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
module.exports = {
  ...defaultConfig,
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ],
      }
    ]
  }
};

Running npm run build throws a bunch of errors in console:

ERROR in ./src/editor.css (./src/editor.css.webpack!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./src/editor.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /assets/new-blocks/src/editor.css Unknown word

  1 | 
> 2 |       import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js";
 @ ./src/editor.css
 @ ./src/my-term-selector.js 24:0-22
 @ ./src/index.js 8:0-48 19:18-32

ERROR in ./src/editor.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

…`

It appears to be related to the order of the loader uses, but I am using the correct order I believe! Unless the later versions of @wordpress/scripts has changed the format of the default webpack.config.js file and it no longer can be overridden locally as in the documentation…

I have currently tested with v19.2.3 as well as v17.1.0 of the @wordpress/scripts package with similar errors (but at different locations). V20.0.0 has other issues which probably warrant a separate topic!

Please help as I haven’t been able to get around this error so far!

Thanks!

And this is how my package.json file looks like:

{
 "name": "base-theme",
 "version": "1.0.0",
 "description": "Main File for WP theme",
 "repository": {},
 "license": "UNLICENSED",
 "dependencies": {
   "uuid": "^8.3.0"
 },
 "devDependencies": {
    "@types/react": "^16.9.47",
    "@wordpress/scripts": "^18.0.0",
    "autoprefixer": "^9.7.3",
    "browser-sync": "^2.27.5",
    "browser-sync-webpack-plugin": "^2.3.0",
    "copy-webpack-plugin": "^6.0.3",
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "livereload": "^0.9.3",
    "node-sass": "^6.0.1",
    "postcss": "^8.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.6.0",
    "prettier": "^1.13.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.2",
    "typescript": "^2.8.0",
    "webpack": "^5.0.0"
  },
  "stylelint": {
    "extends": "stylelint-config-recommended"
  },
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build src/index.js src/index-admin.js"
  }
}

so the error is throwed when i’m running “npm run build”

And I have tried to google around allot, and have tried to add an output folder also. But nothing helps.

Uncaught TypeError: Cannot read property 'youtube' of undefined

Uncaught TypeError: Cannot read property 'vimeo' of undefined

I’ve checked my console and it seems that window.llvConfig is not on the page. I am not using any caching plugins outside of the WPEngine baked in caching. I am doing some optimization of assets manually by using CSS preload and async on most scripts on the site, but when I remove that functionality, the error is still present.

The error occurs somewhere between v2.8.7 and v2.10.0. What’s even weirder is that I cannot test any releases between those versions. In wp-cli I try to update the plugin and use specific versions and it can’t find any release in between those versions. I don’t have a ton of time to diagnose this issue and have reverted the plugin to v2.8.7 and froze the version by manually changing to v9999 (shudder, I know.)

Maybe somewhere in your webpack revamp, the window.llvConfig object got misplaced. I am running WP v5.4.2 in a multisite environment on WPEngine running PHP 7.3.

We tried to use your plugin but faced an issue.
One of your webpack chunks uses lodash node_modules library.
( "static/js/1.5e388f05.chunk.js": "/static/js/1.5e388f05.chunk.js", )
which overrides the global window._ variable with lodash analog, which causes multiple issues with the native WordPress scripts like media-views.js which uses underscore.js functionality. As our editor loads that scripts asynchronously, then that script may be loaded later (after font-awesome plugin scripts) and that causes a javascript fatal error.

The plugin shouldn’t override any global WordPress library like jQuery, underscore, backbone and etc.