search

uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.17k stars 156 forks source link

Error when compiling #171

Closed imCaseSensitive closed 3 years ago

imCaseSensitive commented 3 years ago

I'm developing on React with Typescript and attempting to use react-md-editor in my project. However, when I compile the following errors appear. I noticed another issue here that appears to deal with importing CSS from within node modules. If this is related, please point me in that direction, otherwise any help would be appreciated!

ERROR in ../node_modules/@uiw/react-md-editor/lib/esm/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .w-md-editor {
|   color: #24292e;
|   text-align: left;
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js 12:0-21
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx

ERROR in ../node_modules/@uiw/react-md-editor/lib/esm/components/TextArea/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .w-md-editor-aree {
|   overflow: auto;
|   border-radius: 5px;
 @ ../node_modules/@uiw/react-md-editor/lib/esm/components/TextArea/index.js 4:0-21
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx

ERROR in ../node_modules/@uiw/react-md-editor/lib/esm/components/DragBar/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .w-md-editor-bar {
|   position: absolute;
|   cursor: s-resize;
 @ ../node_modules/@uiw/react-md-editor/lib/esm/components/DragBar/index.js 2:0-21
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx

ERROR in ../node_modules/@uiw/react-md-editor/lib/esm/components/Toolbar/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .w-md-editor-toolbar {
|   border-bottom: 1px solid #dfdfe0;
|   background-color: #fbfbfb;
 @ ../node_modules/@uiw/react-md-editor/lib/esm/components/Toolbar/index.js 6:0-21
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx

ERROR in ../node_modules/@uiw/react-md-editor/lib/esm/components/Toolbar/Child.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .w-md-editor-toolbar-child {
|   position: absolute;
|   border-radius: 3px;
 @ ../node_modules/@uiw/react-md-editor/lib/esm/components/Toolbar/Child.js 3:0-21
 @ ../node_modules/@uiw/react-md-editor/lib/esm/components/Toolbar/index.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx

ERROR in ../node_modules/@uiw/react-markdown-preview/lib/esm/styles/markdown.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .wmde-markdown {
|   font-size: 16px;
|   line-height: 1.5;
 @ ../node_modules/@uiw/react-markdown-preview/lib/esm/index.js 13:0-31
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx

ERROR in ../node_modules/@uiw/react-markdown-preview/lib/esm/styles/markdowncolor.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .wmde-markdown-color .token.tag .attr-value {
|   color: #032f62;
| }
 @ ../node_modules/@uiw/react-markdown-preview/lib/esm/index.js 14:0-36
 @ ../node_modules/@uiw/react-md-editor/lib/esm/Editor.js
 @ ../node_modules/@uiw/react-md-editor/lib/esm/index.js
 @ ./common/components/Markdown.tsx
 @ ./mypage/components/NoticeAccordion.tsx
 @ ./mypage/pages/tops/index.tsx
 @ ./mypage/App.tsx
 @ ./mypage/index.tsx
jaywcjlove commented 3 years ago

@imCaseSensitive Are you using webpack?

https://codesandbox.io/s/markdown-editor-for-react-izdd6 You can download the sample to test it.

imCaseSensitive commented 3 years ago

@jaywcljlove Yes, i'm using webpack.

jaywcjlove commented 3 years ago

You need to configure to load css in node_modules

imCaseSensitive commented 3 years ago

You're right! Thank you!