devowlio / wp-react-starter Goto Github PK

After running the first two commands npm install -g create-wp-react-app and create-wp-react-app create my-plugin the initialization on the prjects begins but gets stuck at Clone git repository. The loader just hangs there forever and never passes. Any idea on why this is happening. I made sure that my git email was correct and that I have an ssh key setup. Any help would be appreciated, thanks.

npm install -g create-wp-react-app allows you to run create-wp-react-app name to create a new plugin.

Hi,

Since yesterday I am not able to compile correctly.

some tests fails
I am using last version from create-wp-react-app

Thanks !

Use https://github.com/leodido/postcss-clean
npm install --save-dev postcss-clean

postcss.config.js

module.exports = ({ file, options, env }) => ({
    plugins: [
        require('autoprefixer')
    ].concat(env === 'production' || env === 'umd' ? [require('postcss-clean')(options.clean)] : [])
});

webpack.config.js

loader: 'postcss-loader',
options: {
	config: {
		ctx: {
			clean: {}
		}
	}
}

Hi,

i wanted to try wp-react-starter as a new way to speed up my plugin development but unfortunately its incompatible wit php 7.4 and upwards. It seems its only because of the metasyntactical/composer-plugin-license-check locked at version 0.5.0. Thats why i prefer to lock my dependencies only downwards and run my testsuit to ensure upgraded packages dont break anything ;)

As the template is missing an example of a API call with parameters, I may be using it in an incorrect way.

I created an endpoint in php expecting a query parameter. The Typescript declaration is the foillowing:

import {
    RouteLocationInterface,
    RouteHttpVerb,
    RouteResponseInterface,
    RouteRequestInterface,
    RouteParamsInterface
} from "@dbnary-dashboard/utils";

export const sparqlGetLocation: RouteLocationInterface = {
    path: "/sparql",
    method: RouteHttpVerb.GET
};
export type SparqlRequest = RouteRequestInterface;
export type SparqlParams = RouteParamsInterface & { query: string };

And I use it with :

async function doSparqlQuery(event: React.MouseEvent) {
    event.persist();
    const result = await request<SparqlRequest, SparqlParams, SparqlResponse>({
        location: sparqlGetLocation,
        params: { query: "SELECT * FROM { ?s ?p ?o } LIMIT 10" }
    });
    const usedUrl = urlBuilder({ location: sparqlGetLocation });
    alert(`${usedUrl}\n\n${JSON.stringify(result, undefined, 4)}`);
    event.preventDefault();
}

The code does not work as expected as it leads to the queried URL :

http://localhost:8080/wp-json/dbnary-dashboard/v1/sparql?_v=1.0.0&query=SELECT%2520*%2520FROM%2520%257B%2520%253Fs%2520%253Fp%2520%253Fo%2520%257D%2520LIMIT%252010

(see how the query parameter is double encoded (%2520 instead of %20).

I tracked down the problem to packages/utils/lib/factory/ajax/commonUrlBuilder.tsx where the parameters are explicitely encoded at:

    // Find undeclared body params (which are not bind above) and add it to GET query
    for (const checkParam of Object.keys(params)) {
        if (foundParams.indexOf(checkParam) === -1) {
            getParams[checkParam] = encodeURIComponent((params as any)[checkParam]);
        }
    }

And afterward, the call to Url.toString() at return apiUrl.set("query", deepMerge.all([options.restQuery, getParams, query])).toString();will re-encode the parameter (using stringify).

Why are parameters URIencoded explicitely in commonUrlBuilder ?

Am I using the boilerplate code incorrectly there ?

At the moment the npm run generate does not change the Service.class.php API class description. Additionally there should be a header input be available to send the X-WP-Nonce.

Checkout https://esdoc.org/ and if fit the needs replace it with JSDoc.

Hey guys,
Could anybody please provide an example of extending the webpack config? Especially how to add the new plugin.
Thanks.

When using the yarn i18n-frontend script the .pot file is generated very slowly in compare with yarn i18n-backend. The frontend file is generated from the minified files of the TypeScript code .js and .map files - it takes about 5 seconds. The backend i18n code from the .php files is generated in 0.3 seconds. Perhaps there is a better way to parse the source files .tsx (TypeScript) directly instead of dist files.

Hi again.
This errors show in the build action:

Starting type checking service...

✖ Wp-reactjs-starter
Compiled with some errors in 10.23s

[WEBPACK] Build failed after 17.819 seconds
[WEBPACK] Errors building [name].js
ERROR in ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/plugins/wp-reactjs-starter/src/public/ts/store/stores.tsx(29,16):
TS2742: The inferred type of 'context' cannot be named without a reference to '@wp-reactjs-multi-starter/utils/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.
ERROR in ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/plugins/wp-reactjs-starter/src/public/ts/store/stores.tsx(40,23):
TS2742: The inferred type of 'StoreProvider' cannot be named without a reference to '@wp-reactjs-multi-starter/utils/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.
ERROR in ..wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/plugins/wp-reactjs-starter/src/public/ts/utils/index.tsx(21,16):
TS2742: The inferred type of 'localization' cannot be named without a reference to '@wp-reactjs-multi-starter/utils/node_modules/@types/react'. This is likely n
✔ Utils
Compiled successfully in 11.18s

[WEBPACK] Finished building index.js within 11.18 seconds
Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
at process.target.send (internal/child_process.js:679:16)
at callback (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/worker-farm/lib/child/index.js:32:17)
at finishedCallback (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/parallel-webpack/src/webpackWorker.js:141:21)
at finalCallback (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:257:39)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:306:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/HookCodeFactory.js:33:10), :40:1)
at AsyncSeriesHook.lazyCompileHook (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/Hook.js:154:20)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:304:22
at Compiler.emitRecords (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:499:39)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:298:10
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:485:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/HookCodeFactory.js:33:10), :18:1)
at AsyncSeriesHook.lazyCompileHook (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/tapable/lib/Hook.js:154:20)
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/webpack/lib/Compiler.js:482:27
at ../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/neo-async/async.js:2818:7
at done (../wp-react-starter--wp-reactjs-multi-starter-wp-reactjs-starter-1.2.0/node_modules/neo-async/async.js:3522:9)

Hey there! Per your installation instructions, your step for Yarn states:
$ yarn add -g create-wp-react-app

This syntax would be correct for NPM, but one caveat of using yarn is that the syntax to globally download packages is actually:
$ yarn global add create-wp-react-app

Just wanted to let you know that I was unable to install the package globally until using the latter code, thanks!

Hello there,

I face the following error trying to start the boilerplate.

`
yarn docker:start
yarn run v1.22.5
$ yarn docker-compose up --build -d && concurrently --raw "yarn docker-compose logs -f -t --tail=10" "yarn --silent wp-wait && yarn --silent docker:start:dev"
$ PLUGIN_SLUGS=$(yarn --silent workspace:slugs) COMPOSE_PATH_SEPARATOR=: COMPOSE_FILE=./devops/docker-compose/docker-compose.yml:./devops/docker-compose/docker-compose.local.yml:$(COMPOSE_CONTEXT=local yarn --silent workspace:compose-files) COMPOSE_PROJECT_NAME=${npm_package_name} yarn --silent exposedotenv docker-compose up --build -d
my-wp-react-boilerplate_mysql_1 is up-to-date
my-wp-react-boilerplate_dockerhost_1 is up-to-date
my-wp-react-boilerplate_phpmyadmin_1 is up-to-date
my-wp-react-boilerplate_wordpress_1 is up-to-date
Starting my-wp-react-boilerplate_wordpress-cli_1 ... done
$ PLUGIN_SLUGS=$(yarn --silent workspace:slugs) COMPOSE_PATH_SEPARATOR=: COMPOSE_FILE=./devops/docker-compose/docker-compose.yml:./devops/docker-compose/docker-compose.local.yml:$(COMPOSE_CONTEXT=local yarn --silent workspace:compose-files) COMPOSE_PROJECT_NAME=${npm_package_name} yarn --silent exposedotenv docker-compose logs -f -t --tail=10
Attaching to my-wp-react-boilerplate_wordpress-cli_1, my-wp-react-boilerplate_phpmyadmin_1, my-wp-react-boilerplate_wordpress_1, my-wp-react-boilerplate_mysql_1, my-wp-react-boilerplate_dockerhost_1
dockerhost_1 | 2021-03-08T11:37:06.351133837Z Docker Host: 172.20.0.1 (default gateway)
dockerhost_1 | 2021-03-08T11:37:06.351503057Z Forwarding ports: 0:65535
mysql_1 | 2021-03-08T11:37:12.736832699Z 2021-03-08 11:37:12 0 [Note] InnoDB: 10.3.28 started; log sequence number 1625452; transaction id 20
mysql_1 | 2021-03-08T11:37:12.736975586Z 2021-03-08 11:37:12 0 [Note] InnoDB: Loading buffer pool(s) from /var/lib/mysql/ib_buffer_pool
mysql_1 | 2021-03-08T11:37:12.737137890Z 2021-03-08 11:37:12 0 [Note] Plugin 'FEEDBACK' is disabled.
mysql_1 | 2021-03-08T11:37:12.742398914Z 2021-03-08 11:37:12 0 [Note] Server socket created on IP: '::'.
mysql_1 | 2021-03-08T11:37:12.743170186Z 2021-03-08 11:37:12 0 [Warning] 'proxies_priv' entry '@% root@79d808ba5a88' ignored in --skip-name-resolve mode.
mysql_1 | 2021-03-08T11:37:12.743421667Z 2021-03-08 11:37:12 0 [Note] InnoDB: Buffer pool(s) load completed at 210308 11:37:12
mysql_1 | 2021-03-08T11:37:12.744041206Z 2021-03-08 11:37:12 0 [Note] Reading of all Master_info entries succeeded
mysql_1 | 2021-03-08T11:37:12.744055162Z 2021-03-08 11:37:12 0 [Note] Added new Master_info '' to hash table
mysql_1 | 2021-03-08T11:37:12.744058689Z 2021-03-08 11:37:12 0 [Note] mysqld: ready for connections.
mysql_1 | 2021-03-08T11:37:12.744061444Z Version: '10.3.28-MariaDB-1:10.3.28+maria~focal' socket: '/var/run/mysqld/mysqld.sock' port: 3306 mariadb.org binary distribution
phpmyadmin_1 | 2021-03-08T11:37:06.818718154Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.4. Set the 'ServerName' directive globally to suppress this message
phpmyadmin_1 | 2021-03-08T11:37:06.830750265Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.4. Set the 'ServerName' directive globally to suppress this message
phpmyadmin_1 | 2021-03-08T11:37:06.843405815Z [Mon Mar 08 11:37:06.843211 2021] [mpm_prefork:notice] [pid 1] AH00163: Apache/2.4.38 (Debian) PHP/7.4.15 configured -- resuming normal operations
phpmyadmin_1 | 2021-03-08T11:37:06.843431743Z [Mon Mar 08 11:37:06.843257 2021] [core:notice] [pid 1] AH00094: Command line: 'apache2 -D FOREGROUND'
wordpress_1 | 2021-03-08T11:37:27.382903258Z Success: WordPress updated successfully.
wordpress_1 | 2021-03-08T11:37:27.388648347Z Chown www-data...
wordpress_1 | 2021-03-08T11:37:27.390425301Z Chown www-data done!
wordpress_1 | 2021-03-08T11:37:27.426634549Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.5. Set the 'ServerName' directive globally to suppress this message
wordpress_1 | 2021-03-08T11:37:27.437784651Z AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.5. Set the 'ServerName' directive globally to suppress this message
wordpress_1 | 2021-03-08T11:37:27.449839716Z [Mon Mar 08 11:37:27.449711 2021] [mpm_prefork:notice] [pid 746] AH00163: Apache/2.4.38 (Debian) PHP/7.3.17 configured -- resuming normal operations
wordpress_1 | 2021-03-08T11:37:27.449864833Z [Mon Mar 08 11:37:27.449772 2021] [core:notice] [pid 746] AH00094: Command line: 'apache2 -D FOREGROUND'
wordpress_1 | 2021-03-08T11:37:28.313204814Z 127.0.0.1 - - [08/Mar/2021:11:37:28 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
wordpress_1 | 2021-03-08T11:38:32.945742966Z 127.0.0.1 - - [08/Mar/2021:11:38:32 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
wordpress_1 | 2021-03-08T11:40:05.100071447Z 127.0.0.1 - - [08/Mar/2021:11:40:05 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
my-wp-react-boilerplate_wordpress-cli_1 exited with code 0
wordpress_1 | 2021-03-08T11:40:26.481860944Z 127.0.0.1 - - [08/Mar/2021:11:40:26 +0000] "GET /wp-json/my-reactive-plugin/v1/plugin HTTP/1.1" 200 741 "-" "curl/7.64.0"
$ /opt/apps/wordpress/my-wp-react-boilerplate/node_modules/.bin/parallel-webpack --no-stats --config common/webpack.multi.ts --watch
$ concurrently --raw "test $IS_DOCKER_START_COMMAND && exit 0 || yarn webpack --watch" "yarn --silent chokidar 'src//*.php' -c 'yarn i18n:generate:backend' --silent"
$ yarn grunt libs:copy && concurrently --raw "test $IS_DOCKER_START_COMMAND && exit 0 || yarn webpack --watch" "yarn --silent chokidar 'src/inc//.php' -i 'src/inc/base/others/cachebuster' -c 'yarn i18n:generate:backend' --silent"
$ grunt --gruntfile scripts/Gruntfile.ts --base . libs:copy
Running "clean:npmLibs" (clean) task

3 paths cleaned.

Running "copy:npmLibs" (copy) task

Running "copy:npmLibsHoist" (copy) task
Copied 9 files

Running "node_modules_cachebuster:publiclib" (node_modules_cachebuster) task
Generating node modules cachebuster file "src/inc/base/others/cachebuster-lib.php"...OK

Done.
result.flat is not a function
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

^CERROR: Aborting.

`

Thanks in advance for your support.

Hello Guys

First of all thanks for a great starter kit.
The issue appears when a custom URL is used in "create-wp-react-app create-workspace" wizard
It can be fixed by changing "siteurl" and "home" option in wp_options table to the custom url entered during workspace creation.

Please add support of PHP 8

Use latest webpack version (v4).

I just installed composer on my Mac, using brew (the composer installation from wp-react-starter failed).

Then launch create-wp-react-app create-workspace

The process goes on for a moment, then I get the following errors:

[...]

lerna ERR! yarn run bootstrap exited 2 in '@dbnary-dashboard/utils'
lerna ERR! yarn run bootstrap stdout:
$ composer install
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run bootstrap stderr:
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Warning: The lock file is not up to date with the latest changes in composer.json. You may be getting outdated dependencies. It is recommended that you run `composer update` or `composer update <package name>`.
Your lock file does not contain a compatible set of packages. Please run composer update.

  Problem 1
    - dealerdirect/phpcodesniffer-composer-installer is locked to version v0.5.0 and an update of this package was not requested.
    - dealerdirect/phpcodesniffer-composer-installer v0.5.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.0.0] but it does not match the constraint.
  Problem 2
    - metasyntactical/composer-plugin-license-check is locked to version v0.5.0 and an update of this package was not requested.
    - metasyntactical/composer-plugin-license-check v0.5.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.0.0] but it does not match the constraint.

You are using Composer 2, which some of your plugins seem to be incompatible with. Make sure you update your plugins or report a plugin-issue to ask them to support Composer 2.
error Command failed with exit code 2.

lerna ERR! yarn run bootstrap exited 2 in '@dbnary-dashboard/utils'
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command failed with exit code 2: yarn bootstrap

Current setup : Mac OS X with :

Checking prerequesits...
├── Yarn v1.22.10
├── Composer version 2.0.6 2020-11-07 11:21:17
├── Docker version 19.03.13, build 4484c46d9d
├── docker-compose version 1.27.4, build 40524192
├── WP-CLI 2.4.0
├── Missing optional Prestissimo (Composer package), install it now: https://packagist.org/packages/hirak/prestissimo

Environment:

• Windows 10
• WSL 2
• Ubuntu

When start debugging with xdebug, I can see the start script install xdebug 3 by default and current default config from the container is not working with version 3. After refering to the official guide, I added the following to the php.ini config file in wordpress container

xdebug.client_port = 9000 //xdebug 3 default port is 9003
xdebug.start_with_request = yes
xdebug.discover_client_host=1
xdebug.mode=debug

Now it works, I was wondering where I can put this in this repo for new users.

With the help of https://github.com/babel/babel-upgrade

Hi i just try to create new plugin in my workspace and was created from template perfectly in plugins directory. But in the terminal show an error and in the wordpress plugin menu not added.

ERROR:

Start initial build process...
yarn run v1.22.4
$ BUILD_PLUGIN=$npm_package_slug yarn --silent parallel-webpack --no-stats --config ../../common/webpack.multi.ts && yarn grunt cachebuster:public && yarn grunt build
You are currently building a plugin, please consider to put your webpack:done actions after the yarn build command for performance reasons!
⨯ Unable to compile TypeScript:
../../common/webpack.factory.ts:339:9 - error TS2322: Type '(WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin)[]' is not assignable to type 'Plugin[]'.
Type 'WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin' is not assignable to type 'Plugin'.
Type 'WebpackBar' is not assignable to type 'Plugin'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").Compiler' is not assignable to type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler'.
The types of 'hooks.shouldEmit.call' are incompatible between these types.
Type '(arg1?: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any' is not assignable to type '(arg1?: import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any'.
Types of parameters 'arg1' and 'arg1' are incompatible.
Type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation' is not assignable to type 'import("/Users/amirhoseinfallahi/Documents/___FCODE/____Projects/WPPlugins/faracode/node_modules/@types/webpack/index").compilation.Compilation'.

339 plugins: [
~~~~~~~

../../node_modules/@types/webpack/index.d.ts:131:9
131 plugins?: Plugin[];
~~~~~~~
The expected type comes from property 'plugins' which is declared here on type 'Configuration'

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command failed with exit code 1: yarn build

Hey guys, how I can use e.g. png image inside an scss file of a plugin? How should I store the image inside the plugin folder and what path to use to get it?

Thanks!

When using PHP namespaces it is the right way to backslash global scope defined functions. Example: \add_action().

After create-wp-react-app create my-plugin it gets stuck at:

× Install package dependencies with composer
→ - Installation request for symfony/config v3.4.20 -> satisfiable by symfony/config[v3.4.20].

Any ideas?

Fixed: make sure Composer points to php 7 and not 5

Ich have a clean setup. With one plugin the setup works. I added a second plugin, and the build process seems broken for all plugins:

php --version
PHP 7.4.16

node --version
v15.12.0

yarn --version
1.22.10

composer -V
2.0.11 2021-02-24 14:57:23

yarn build

yarn run v1.22.10 $ BUILD_PLUGIN=$npm_package_slug yarn --silent parallel-webpack --no-stats --config ../../common/webpack.multi.ts && yarn grunt cachebuster:public && yarn grunt build You are currently building a plugin, please consider to put your webpack:done actions after the yarn build` command for performance reasons!
⨯ Unable to compile TypeScript:
../../common/webpack.factory.ts:339:9 - error TS2322: Type '(WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin)[]' is not assignable to type 'Plugin[]'.
Type 'WebpackBar | MiniCssExtractPlugin | ForkTsCheckerWebpackPlugin | DefinePlugin' is not assignable to type 'Plugin'.
Type 'WebpackBar' is not assignable to type 'Plugin'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").Compiler' is not assignable to type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").Compiler'.
The types of 'hooks.shouldEmit.call' are incompatible between these types.
Type '(arg1?: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any' is not assignable to type '(arg1?: import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation, arg2?: any, arg3?: any, ...args: any[]) => any'.
Types of parameters 'arg1' and 'arg1' are incompatible.
Property 'addChunkInGroup' is missing in type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/mini-css-extract-plugin/node_modules/@types/webpack/index").compilation.Compilation' but required in type 'import("/Users/cnichte/Documents/develop-wordpress-plugins/node_modules/@types/webpack/index").compilation.Compilation'.

339 plugins: [
~~~~~~~

../../node_modules/@types/webpack/index.d.ts:1254:13
1254 addChunkInGroup(groupOptions: GroupOptions): ChunkGroup;
~~~~~~~~~~~~~~~
'addChunkInGroup' is declared here.
../../node_modules/@types/webpack/index.d.ts:132:9
132 plugins?: Plugin[];
~~~~~~~
The expected type comes from property 'plugins' which is declared here on type 'Configuration'`

First of all, thank you for all your hard work putting this project together. It is a wonderful collection of tools and technologies.

I am experienced with React, but new to WordPress, and there are some features I expected to find in this starter that are either absent or that I have not been able to find (perhaps due to my inexperience with WordPress).

• Custom API endpoints -- The starter project demonstrates how to call and consume the response from the /plugin endpoint of the WordPress REST API, but there is no example (that I can see) of creating or consuming a custom endpoint.
  EDIT: I was wrong. The inc/rest/Service.class.php file does create a REST endpoint at /plugin (under the REST SERVICE_NAMESPACE). I was confused because WordPress exposes a built-in REST service at /plugin. Perhaps wp-reactjs-starter should use a different name for its example endpoint.
• Data storage -- The starter project contains an in-memory Todo list. It would have been better (in my opinion) to have the Todo data persisted in a WordPress table and/or MariaDB.
• Shortcode -- Being new to WordPress, it would have been very helpful to me if the starter project demonstrated shortcode creation so the Widget could be inserted in the main content of a page.
• Cannot use Widget -- In the Appearance/Widgets admin page, I can see the "React Demo Widget" listed, but I cannot seem to add it to a page. It seems that the only side-bar is the "Footer" and even when I add the widget to that sidebar, nothing shows up on the page. It is highly likely that I am just misunderstanding something about WordPress or your project, but I'm surprised that in the initial state of the project, I cannot seem to find any way to use the React Demo Widget. Shouldn't it be present on the "Hello World" post? If it is there or can be added, please let me know how.
  EDIT: I just realized that the widget would have shown up except for a bug -- "ReferenceError: jQuery is not defined". I'll post that as a separate issue.

Thank you so much again for your great project. I would very much appreciate if you could clear up my confusion on a few of the issues above. Thanks!

The updateDbCheck is currently called in the init hook of WordPress. It should be in the plugins_loaded hook.

Hello! You may find this research result highly beneficial.
https://github.com/szepeviktor/small-project/blob/master/MAIN-FILE-PARTS.md
Basically it aims to leave legacy technologies behind and find out what goes where.

Hi,

how would you add static assets to your React frontend?

This is what I've tried:

add file-loader to webpack config:

{
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }

then in my react code do

import HatImage from '../../assets/hat_random.png'
...

   <img src={`/wp-content/plugins/wsb-players/public/dist/${HatImage}`}  />

The above works, but I don't like hardcoding the path to the image. Especially, as it does not work well with npm run dev / npm run build. Do you have a better approach for loading images?

Allow via npm version to modify the index.php as well.

Step for reproduce for plugin development

1. Run yarn build
2. Go to build/PLUGIN_NAME/vendor/WORKSPACE_NAME/utils

You see that this folder is empty - and the production plugin version doesn't work...