Build failed: @chatui/core/dist/index.css ParserError: Syntax Error at line: 1, column 22

[franva]

Version information (版本信息)

• ChatUI or ChatUI Pro? ChatUI
• ChatUI Version: 1.0.0
• React Version: 17.0.2
• OS Version: Ubuntu 20.04
• Browser Version:

Describe the bug (描述问题)
Trying to build a reactjs project and it failed with this error:

$ npm run build

> covid-chat@0.1.0 build /media/winstonfan/Workspace/MyDoc/Interviews/DigitalVictoria/code/frontend/covid-chat
> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@chatui/core/dist/index.css
ParserError: Syntax Error at line: 1, column 22


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! covid-chat@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the covid-chat@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/winstonfan/.npm/_logs/2021-06-29T13_57_45_400Z-debug.log

Steps To Reproduce (重现步骤)

1. create a reactjs project with create-react-app
2. add @ChatUi
3. npm run build

Link to minimal reproduction (最小化重现链接)

Here is the content of 2021-06-29T13_57_45_400Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/winstonfan/.nvm/versions/node/v14.16.0/bin/node',
1 verbose cli   '/home/winstonfan/.nvm/versions/node/v14.16.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.11
3 info using node@v14.16.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle covid-chat@0.1.0~prebuild: covid-chat@0.1.0
6 info lifecycle covid-chat@0.1.0~build: covid-chat@0.1.0
7 verbose lifecycle covid-chat@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle covid-chat@0.1.0~build: PATH: /home/winstonfan/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/media/winstonfan/Workspace/MyDoc/code/frontend/covid-chat/node_modules/.bin:/home/winstonfan/.deta/bin:/home/winstonfan/.nvm/versions/node/v14.16.0/bin:/home/winstonfan/anaconda3/bin:/home/winstonfan/anaconda3/condabin:/home/winstonfan/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/local/cuda-11.1/bin
9 verbose lifecycle covid-chat@0.1.0~build: CWD: /media/winstonfan/Workspace/MyDoc/code/frontend/covid-chat
10 silly lifecycle covid-chat@0.1.0~build: Args: [ '-c', 'react-scripts build' ]
11 silly lifecycle covid-chat@0.1.0~build: Returned: code: 1  signal: null
12 info lifecycle covid-chat@0.1.0~build: Failed to exec build script
13 verbose stack Error: covid-chat@0.1.0 build: `react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/winstonfan/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/home/winstonfan/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid covid-chat@0.1.0
15 verbose cwd /media/winstonfan/Workspace/MyDoc/code/frontend/covid-chat
16 verbose Linux 5.8.0-59-generic
17 verbose argv "/home/winstonfan/.nvm/versions/node/v14.16.0/bin/node" "/home/winstonfan/.nvm/versions/node/v14.16.0/bin/npm" "run" "build"
18 verbose node v14.16.0
19 verbose npm  v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error covid-chat@0.1.0 build: `react-scripts build`
22 error Exit status 1
23 error Failed at the covid-chat@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Expected behavior (期望的结果是什么)
Generated a built project

[franva]

One more thing:

I found that once I pasted the css(./node_modules/@chatui/core/dist/index.css) into css validator and there are many errors.

I guess this is the cause.

Before waiting for you guys to fix it, a workaround could be downgrade to an older version.

Could someone suggest a working version?

Thanks

[akai]

see #40 (comment)

[franva]

hi @akai thanks for your reply.

What is the solution section in the package.json?
I searched and found it's just for yarn.
Do I have to use yarn to solve this issue?

[franva]

thanks @akai I am able to fix it by:

1. delete the node_module folder
2. npm i --save-dev postcss-custom-properties
3. npm i

:)

[Marc-Morcos]

I had to run the command in step 2, then delete both node module and package lock, then npm install

[franva]

I had to run the command in step 2, then delete both node module and package lock, then npm install

Glad it helped 😊

Do you use yarn or npm?

I thought that package-lock.json is only for yarn.

[Marc-Morcos]

I had to run the command in step 2, then delete both node module and package lock, then npm install

Glad it helped 😊

Do you use yarn or npm?

I thought that package-lock.json is only for yarn.

I used npm. As far as I understand (I am new to react), package-lock.json specifies the specific versions and dependancies that are installed when you run "npm ci" (clean install), whereas "npm install" sometimes installs minor updates if available (by reading packages.json), overwriting package-lock.json in the process

[franva]

I had to run the command in step 2, then delete both node module and package lock, then npm install

Glad it helped blush
Do you use yarn or npm?
I thought that package-lock.json is only for yarn.

I used npm. As far as I understand (I am new to react), package-lock.json specifies the specific versions and dependancies that are installed when you run "npm ci" (clean install), whereas "npm install" sometimes installs minor updates if available (by reading packages.json), overwriting package-lock.json in the process

Good to know that :)
Cheers