React app build error
kidunot89 opened this issue · 0 comments
kidunot89 commented
Describe the bug
I've run into issues using the package with any app that doesn't compile scss in the node_modules directory.
ERROR in ./node_modules/wp-graphql-composer/dist/utils/loading.module.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @keyframes icon_rotate {
| 0% { transform: rotate(0deg); }
| 100% { transform: rotate(359deg); }
ERROR in ./node_modules/wp-graphql-composer/dist/utils/icon.module.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| /* fallback */
> @font-face {
| font-family: 'Material Icons';
| font-style: normal;
ERROR in ./node_modules/wp-graphql-composer/dist/archives/archive.scss 4:0
Module parse failed: Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
|
| /* Small */
> @media (min-width: 576px) {
|
| }
ERROR in ./node_modules/wp-graphql-composer/dist/post-type/attachment.module.scss 4:0
Module parse failed: Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
|
| /* Small */
> @media (min-width: 576px) {
|
| }
ERROR in ./node_modules/wp-graphql-composer/dist/post-type/post.global.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .alignleft,
| .alignright {
| max-width: 636px !important; /* Let's work to make this !important unnecessary */
ERROR in ./node_modules/wp-graphql-composer/dist/post-type/post-comments.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .area {
| .title {}
| .list {}
ERROR in ./node_modules/wp-graphql-composer/dist/post-type/comment.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .comment {
| .body {
| .content {
ERROR in ./node_modules/wp-graphql-composer/dist/menu/menu-item.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .description {
| font-size: 80%;
| }
ERROR in ./node_modules/wp-graphql-composer/dist/menu/sub-menu.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .dropdown { // Sub Menu toggle button
| flex-basis: auto;
| flex-grow: 1;
ERROR in ./node_modules/wp-graphql-composer/dist/utils/error.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .error {
| position: relative;
| width: 100%;
ERROR in ./node_modules/wp-graphql-composer/dist/post-type/edit-comment.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .form {
|
| }
ERROR in ./node_modules/wp-graphql-composer/dist/main/main.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .main {
| max-width: 100vw;
| margin: 0 auto;
ERROR in ./node_modules/wp-graphql-composer/dist/post-type/post.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .page,
| .post {
| .entry-footer {
ERROR in ./node_modules/wp-graphql-composer/dist/user/login.scss 2:16
Module parse failed: Unexpected token (2:16)
You may need an appropriate loader to handle this file type.
| /* Extra Small */
> form.login-form {
| max-width: 400px;
| display: flex;
ERROR in ./node_modules/wp-graphql-composer/dist/menu/menu.module.scss 4:0
Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type.
| * Menu Component Styling
| */
> .menu {
| position: relative;
| margin: 0 auto;
ERROR in ./node_modules/wp-graphql-composer/dist/user/user-controls.scss 4:0
Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type.
| * USER CONTROLS
| */
> .user-controls {
|
| }
ERROR in ./node_modules/wp-graphql-composer/dist/header/header.scss 4:1
Module parse failed: Unexpected token (4:1)
You may need an appropriate loader to handle this file type.
| * HEADER COMPONENT
| */
> .app-header {
| width: 100%;
| display: flex;
This is likely an issue with the webpack build config. I doesn't seem to compile the scss code with build script. While this is probably fixable with the CRA options, I think its best if I eject and remove react-scripts all together and do the build configuration with manually with webpack or rollup