glook / webpack-typescript-react Goto Github PK

C:\projects\webpack5-react-typescript>yarn start
yarn run v1.22.15
$ cross-env WEBPACK_IS_DEV_SERVER=true NODE_ENV=development webpack serve --config webpack.config.babel.js
[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
at WebpackCLI.makeCommand (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:108:21)
at ServeCommand.apply (C:\projects\webpack5-react-typescript\node_modules@webpack-cli\serve\lib\index.js:41:19)
at loadCommandByName (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:626:35)
at Command. (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:1091:23)
at Command.listener [as _actionHandler] (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:922:31)
at Command._parseCommand (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:1503:14)
at Command.parse (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:1292:10)
at Command.parseAsync (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\node_modules\commander\index.js:1318:10)
at WebpackCLI.run (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\webpack-cli.js:1123:28)
at runCLI (C:\projects\webpack5-react-typescript\node_modules\webpack-cli\lib\bootstrap.js:11:19)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Checkout repo, run npm i
Error below:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"~5.24.2" from the root project
npm ERR!   peer webpack@">=4.43.0 <6.0.0" from @pmmmwh/[email protected]
npm ERR!   node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!     dev @pmmmwh/react-refresh-webpack-plugin@"~0.4.2" from the root project
npm ERR!   1 more (webpack-dev-server)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.20.2" from [email protected]
npm ERR! node_modules/webpack-plugin-serve
npm ERR!   peerOptional webpack-plugin-serve@"0.x || 1.x" from @pmmmwh/[email protected]
npm ERR!   node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!     dev @pmmmwh/react-refresh-webpack-plugin@"~0.4.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Possibly due to npm 7 (running 7.5.4 here ) shellscape/webpack-plugin-serve#195

EDIT: Running this passes install.

npm i --legacy-peer-deps

with nested route react-router-dom v6 have a problem in webpack

I've got a react component I'd like to build to and serve from another folder other than src, let´s say the following is my project folder structure:

.
├── ...
├── docs             # Serve files on /docs folder instead of /src
│   └── build        # Build the contents of /src to /docs/build
│      ├── index.js              
│   ├── api.tsx             
│   ├── index.tsx   
│   ├── index.html
├── webpack
├── src              # Project files
└── ...

What I'm trying to achieve is to have webpack build the contents of /src (which is a React Component) to /docs/build and then serve the /docs folder instead of /src. Within the /docs folder, index.html loads index.js from /docs/build folder...

Does anyone have any directions on how to achieve such a config? I'd like to keep the default settings as is, but create an alternate webpack config and a package.json script such as "build-serve-docs" as a separated command.

Thanks in advance.

Hi!

Nice work, I tried it out and it gives me an error when running npm run start with the latest node and npm version (15.5.0) after looking at the error message (node:50249) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without 'new' I looked at the webpack-cli repo and found Error when run npm start: Class constructor ServeCommand cannot be invoked without 'new': which have reported the error.

In short, the order needs to be: Syntax - webpack [command] [options] and the latest webpack needs to be 4.3.1.

Added a pull-request for the issue, tested and working #6

Cheers!

Hello the project is currently not working:
Installation and build script are working as expected but

• start script throws an error:
  
  It seems related to the web server

I am getting InvalidCharacterError when trying to import a png

import PngLogo from '@images/logo.png'``

I added the delaration declare module '*.png' on @types but still not working

能麻烦出一版配置antd并进行按需引入的版本嘛，我在原来的基础上尝试了一番，但是没有成功

Прежде всего, это отличный шаблон, и спасибо за проделанную работу. Извините за мое невежество, но мне просто интересно, как мы импортируем изображения, кроме файла .svg? Я имею в виду, как мы импортируем их (например, .jpeg.jpg.png и т.д.), есть ли у вас какие-нибудь советы для меня? Спасибо.

Hello, I am getting the following error when I try to add a css file to the vanilla project:

ERROR in ../src/styles/styles.css (../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[2]!../node_modules/css-loader/dist/cjs.js!../src/styles/styles.css) Module build failed (from ../node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: error processing CSS .../src/styles/styles.css:1:1: Unknown word at Input.error (.../sample-project/node_modules/resolve-url-loader/node_modules/postcss/lib/input.es6:108:16) at encodeError (.../sample-project/node_modules/resolve-url-loader/index.js:287:12) at onFailure (.../sample-project/node_modules/resolve-url-loader/index.js:228:14) @ ../src/styles/styles.css 8:20-236 61:4-82:5 64:18-234 @ ../src/index.tsx 8:0-28

How can integrate Progressive web apps by this app?
is there any guide working with manifest json and base configuration?

I will fix it ASAP.

Node: v12.18.4
run: yarn install

[webpack-cli] TypeError: cli.isValidationError is not a function
    at Command.<anonymous> (C:\Users\User\Downloads\webpack-typescript-react-master\node_modules\@webpack-cli\serve\lib\index.js:96:25)
error Command failed with exit code 2.

My development machine is a mac. When I started it, I found that the js file could not be found, and the js path address was found to be 0.0.0.0. The correct path is 127.0.0.1
export const devServerHost = isWindows() ? '127.0.0.1' : '0.0.0.0';

Toying around with a webpack 5 upgrade and just finished figuring out a small error message I was receiving when doing

yarn start

with this project.

Heres the error:

yarn run v1.22.5
$ webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config webpack.config.babel.js
    at Hash.update (internal/crypto/hash.js:84:11)
    at BulkUpdateDecorator.update (FrontEnd.New\node_modules\webpack\lib\util\createHash.js:51:14)
    at NormalModule.updateHash (FrontEnd.New\node_modules\webpack\lib\NormalModule.js:1129:8)
    at Compilation._createModuleHash (FrontEnd.New\node_modules\webpack\lib\Compilation.js:3092:10)
    at Compilation.createModuleHashes (FrontEnd.New\node_modules\webpack\lib\Compilation.js:3064:10)
    at FrontEnd.New\node_modules\webpack\lib\Compilation.js:2341:11
    at Hook.eval [as callAsync] (eval at create (FrontEnd.New\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (FrontEnd.New\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at FrontEnd.New\node_modules\webpack\lib\Compilation.js:2301:36
    at eval (eval at create (node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)

Traced the issue to react-refresh-webpack-plugin pmmmwh/react-refresh-webpack-plugin#289

To fix simply add the webpack.HotModuleReplacementPlugin to the list of plugins in dev.js as the dev suggests. I assume in a future version this won't be an issue any longer.

/**
 * Created by: Andrey Polyakov ([email protected])
 */
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';

import { HotModuleReplacementPlugin } from 'webpack';

import {devServerConfig} from './config';

export default {
    devtool: 'cheap-module-source-map',
    plugins: [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()],
    devServer: devServerConfig,
};

Cheers

this repo is not working on 20.12.1 node version