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'
Hi, I am reading the documentations, and somehow I cannot go past the getting started section.
I have this webpack module configuration:
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:
How do I "link" the stylesheet? Is
@import '~react-widgets/lib/scss/react-widgets';
in my scss enough?Then it says:
Although when I add this line in my
index.js
this I get error:When I follow the instructions from this comment, I get this error instead:
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:
Then added this to my
index.js
like the getting started says:Then, got this error: