webpack-cli | 前端工作流基础架构 | Application Framework library

I am new to node/npm, react and react-native so very new to react-native-web as well. It's been 3 days for me to integrate react-native-web in a Hello World App generated using npx react-native init as per the doc. I tried using both templates: with and without typescript, but no success so far. The farthest I got is to run the app code written in index.web.js but if I add any component from ./src/components/ then I get errors, mostly of webpack.

I created a test repo for easy regeneration of error, So Steps to reproduce are as below:

1. Download this repo in your system.
2. npm install
3. npm run web

Now you'll see the error in the terminal.

Versions:

• metro-react-native-babel-preset: 0.66.0
• node: 16.3.0
• npm: 7.8.0
• OS: Windows 10 - 64 bit

I followed official documentation but with webpack@^4 and referred this article and somehow managed to reach the below situation:

• Webpage is getting rendered if my whole code is inside index.web.js.
• But when I import App inside this then I get compilation failed due to loader error.

Working index.web.js:

I already know that this problem has been asked many times. I looked over all the questions, but it doesn't work. I converted typescript to javascript, everything is going very well until I get to implement css. After importing my css, I get this error.

I want to install Tailwind in Laravel 8. I've followed the documentation and typed the following (showed no error).

I am using webpack-cli 4.7.0. I have a library that I would like to compile for two different environments, one for web and one for node. According to this documentation this is easily achieved my exporting two separate, valid webpack configurations from webpack.config.js.

So I have created two valid webpack configs, one for server and one for client. Webpack outputs two separate files as specified, but insists on using "self" instead of "this" even though I have output.globalObject: "this" specified in the configuration. If I am understanding the official documentation, such should not be the case.

webpack.config.js

I have a class View that I am importing and then extending it with galleryView .. Then I import the final galleryView into controller.js.. Somewhere along this path I am doing something wrong as I get this error..

Uncaught TypeError: Super expression must either be null or a function

But I can't figure out what I am doing wrong.. is it babel or webpack or my code?

Here's my webpack config file for development..

I have gone through all the SO questions regarding this issue and so far I haven't been able to fix this problem.

I am following a Pluralsight course on React and the example application is built manually from scratch; that means that each dependency is added manually without the use of any CLI. Since the course is somewhat old I had to spend quite some time upgrading most of babel's packages until I got to this problem when running webpack.

This is the list of dependencies on the package.json

I made a React Component Library, and it works great with Webpack 4. When I upgrade to Webpack 5 it still compiles, but it gives me some of these Warnings:

WARNING in ./src/index.tsx 6:24-35 export 'GridContent' (imported as 'GridContent') was not found in '@dlcm/dlcm-shared-modules' (module has no exports)

and in Browser Console throws this Error:

Uncaught TypeError: Cannot read property 'Component' of undefined

It tries to use React.Component Class to extend my Component, but

I am using .Net Core 3.1 with React, Typescript and webpack for an SPA. I have multiple modules in react which I load on different page/view of Asp.Net core application.

I am facing issue with auto refresh or hot reload. When I change a parameter which I am passing from module to a component hot reload works as expected BUT if I do any change in component then those are not getting reflected in browser.

If I browse https://localhost:5010/webpack-dev-server I can see home.bundle.js there. Also if change value of "msg" param/prop of HomeComponent in HomeModule.tsx, I can see new bundle generated for home.bundle.js with fresh hashcode and change also reflects to browser on https://localhost:5010/home/ BUT If I do change to HomeComponent.tsx ex: if I change "Home component" to "Home component 123" this change not getting reflected neither on https://localhost:5010/home nor the new bundle NOT generating on https://localhost:5010/webpack-dev-server.

Here is my project structure and files including configuration files. Any help will be highly appreciated.

Update: I added HotModuleReplacementPlugin to webpack.dev.config.js and now when I modify something in component HomeComponent.tsx I see a new entry in https://localhost:5010/webpack-dev-server something like "5f80de77a97d48407bd9.hot-update.json". If I open this file it's content is like {"h":"0dce1f9e44bff4d47fb4","c":{}}

Apart from this another issue is when I run application with F5 from Visual Studio it takes couple of seconds to load website until than browser shows "This site can't be reached"

Project stucture

Working on Webpack 5 and Storybook integration in our React apps' repository. Mainly upgrading from Webpack v4 to v5 because its support has been announced here in this blog post officially. Following the suggested full instructions.

With the below mentioned setup I get the following error message on the console: