How to configure webpack in a new project to use react-widgets
gracicot opened this issue · 1 comments
gracicot commented
Hi, I am reading the documentations, and somehow I cannot go past the getting started section.
I have this webpack module configuration:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { esModule: false },
},
{ loader: 'css-loader', options: { modules: { localIdentName: '[path][name]-[chunkhash]--[local]'}}},
],
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { esModule: false },
},
{ loader: 'css-loader', options: { modules: { localIdentName: '[path][name]-[chunkhash]--[local]'}}},
{ loader: 'sass-loader' },
],
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
type: 'asset/resource',
generator: {
filename: '[name]-[contenthash][ext]'
},
exclude: [
/assets\/fonts/,
/assets\/images/,
],
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
type: 'asset/resource',
generator: {
filename: '[name]-[contenthash][ext]'
},
exclude: [
/assets\/fonts/,
/assets\/images/,
],
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
type: 'asset/resource',
generator: {
filename: '[name]-[contenthash][ext]'
},
include: /assets\/fonts/,
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
type: 'asset/resource',
generator: {
filename: '[name]-[contenthash][ext]'
},
include: /assets\/fonts/,
},
{
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: {
removeViewBox: false,
},
},
},
},
{ loader: 'file-loader', options: { name: 'images/icons/[name]-[contenthash].[ext]' } }
],
include: /assets\/images\/icons/,
},
{
test: /\.(wav|mp3)$/,
use: [
{ loader: 'file-loader', options: { name: 'sounds/[name]-[contenthash].[ext]' } }
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{ loader: 'file-loader', options: { name: 'images/[name]-[contenthash].[ext]' } },
],
},
{
test: /\.svg$/,
use: [
{ loader: 'file-loader', options: { name: 'images/[name]-[contenthash].[ext]' } },
],
exclude: /assets\/images\/icons/,
},
],
},
Now I'm redoing the whole setup to upgrade to webpack 5 and I tried to follow the instructions in the getting started section. In the documentation, it is written as follow:
Import or link to the stylesheet.
How do I "link" the stylesheet? Is @import '~react-widgets/lib/scss/react-widgets'; in my scss enough?
Then it says:
import "react-widgets/scss/styles.scss";
Although when I add this line in my index.js this I get error:
ERROR in ./src/index.js 14:0-40
Module not found: Error: Can't resolve 'react-widgets/scss/styles.scss' in '/Users/myself/Workspace/git/myproject/web/src'
resolve 'react-widgets/scss/styles.scss' in '/Users/myself/Workspace/git/myproject/web/src'
Parsed request is a module
using description file: /Users/myself/Workspace/git/myproject/web/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/myself/Workspace/git/myproject/web/src/node_modules doesn't exist or is not a directory
looking for modules in /Users/myself/Workspace/git/myproject/web/node_modules
existing directory /Users/myself/Workspace/git/myproject/web/node_modules/react-widgets
using description file: /Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/package.json (relative path: .)
using description file: /Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/package.json (relative path: ./scss/styles.scss)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/scss/styles.scss doesn't exist
*
Field 'browser' doesn't contain a valid alias configuration
/Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/scss/styles.scss* doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/scss/styles.scss.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/scss/styles.scss.jsx doesn't exist
as directory
/Users/myself/Workspace/git/myproject/web/node_modules/react-widgets/scss/styles.scss doesn't exist
/Users/myself/Workspace/git/myproject/node_modules doesn't exist or is not a directory
/Users/myself/Workspace/git/software/node_modules doesn't exist or is not a directory
/Users/myself/Workspace/git/node_modules doesn't exist or is not a directory
/Users/myself/Workspace/node_modules doesn't exist or is not a directory
/Users/myself/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/myself/Workspace/git/myproject/web/src
/Users/myself/Workspace/git/myproject/web/src/react-widgets doesn't exist
webpack 5.64.4 compiled with 1 error in 729 ms
When I follow the instructions from this comment, I get this error instead:
ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../fonts/rw-widgets.eot?v=4.1.0' in '/Users/myself/Workspace/git/myproject/web/src'
at finishWithoutResolve (/Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
at /Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/Resolver.js:362:15
at /Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/Users/myself/Workspace/git/myproject/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/Users/myself/Workspace/git/myproject/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
at /Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/Users/myself/Workspace/git/myproject/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/myself/Workspace/git/myproject/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at processResult (/Users/myself/Workspace/git/myproject/web/node_modules/webpack/lib/NormalModule.js:751:19)
at /Users/myself/Workspace/git/myproject/web/node_modules/webpack/lib/NormalModule.js:853:5
at /Users/myself/Workspace/git/myproject/web/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/myself/Workspace/git/myproject/web/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/myself/Workspace/git/myproject/web/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/myself/Workspace/git/myproject/web/node_modules/css-loader/dist/index.js:155:5)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
@ ./src/index.js 13:0-20
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.64.4 compiled with 2 errors in 2089 ms
How can I import the CSS in my project? What are the steps to do, what's the required configuration?
Update: I also tried from a new project:
$ create-react-app myapp
Then added this to my index.js like the getting started says:
import "react-widgets/styles.css";
Then, got this error:
Failed to compile.
./src/index.js
Module not found: Can't resolve 'react-widgets/styles.css' in '/Users/myself/Workspace/myapp/src'
jquense commented
Sorry i don't provide support for bundlers, this is not a react-widgets specific problem.