Meteor + Semantic React

LAST EDIT :

never use npm raw command in meteor. always meteor npm. That is the reason why everything broke.

AND do upgrade step by step , version to the nearest version.

I think that's all that causes this headache.

Everything works now.

Thanks !

EDIT :

After trying all the steps ahead ... I remove jquery / less and semantic:ui from meteor

meteor remove semantic:ui
meteor remove jquery less  
meteor npm uninstall semantic-ui semantic-ui-css

added

meteor npm install @craco/craco @semantic-ui-react/craco-less --save-dev
meteor npm install semantic-ui-less --save
meteor npm install --save react react-dom semantic-ui-react

launch meteor

but the react-semantic-ui css files are not there

and :

meteor npm install

returns

npm WARN @craco/[email protected] requires a peer of react-scripts@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @semantic-ui-react/[email protected] requires a peer of react-scripts@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @types/node@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of cosmiconfig@>=7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-scripts@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @types/node@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.

ORIGINAL QUESTION

I tried many things to make it work together but I am always stuck either with the

Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?

(I manually add prenthesis -> fixed, but it should work out of the box...)

then after

   While processing files with less (for target web.browser.legacy):
   client/lib/semantic-ui/definitions/globals/site.import.less:29:
   variable @googleProtocol is undefined
   error: variable @googleProtocol is undefined

Has someone there a "from scratch" method to create a Meteor project with semantic-ui working, please ?

Thanks

Here is all the steps (extended version) I have been through...

meteor create test
cd test
meteor add semantic:ui
meteor remove standard-minifier-css
meteor add less juliancwirko:postcss

added to package.json

{ "devDependencies": { "autoprefixer": "^6.3.1" }, "postcss": { "plugins": { "autoprefixer": {"browsers": ["last 2 versions"]} } } }

then execute

meteor npm install

meteor npm install semantic-ui-react semantic-ui-css

Test the display by adding a buttons in App.jsx

import React from 'react';
import { Hello } from './Hello.jsx';
import { Info } from './Info.jsx';
import {Button} from "semantic-ui-react";

export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>
      <Button primary>Primary</Button>
      <Button secondary>Secondary</Button>
    <Hello/>
    <Info/>
  </div>
);

then executing

meteor

but css not applied ...

Read https://github.com/Semantic-Org/Semantic-UI-Meteor and added

{
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss": "^6.0.22",
    "postcss-load-config": "^1.2.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}

then delete .custom.semantic.json

meteor npm install

set

"basic": true,

in custom.semantic.json

and again

meteor

still no semantic-ui-react in the display

semantic css is not in the browser inspector :/

meteor add less jquery

then again

meteor

HERE IS THE FIRST ERROR :

While processing files with less (for target web.browser):
client/lib/semantic-ui/themes/default/globals/site.variables.import.less:412:19: 
Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?
error: Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?

let's fix it manually... by adding parenthesis...

@mini            : unit( (round(@miniSize * @emSize) / @emSize), rem);
@tiny            : unit( (round(@tinySize * @emSize) / @emSize), rem);
@small           : unit( (round(@smallSize * @emSize) / @emSize), rem);
@medium          : unit( (round(@mediumSize * @emSize) / @emSize), rem);
@large           : unit( (round(@largeSize * @emSize) / @emSize), rem);
@big             : unit( (round(@bigSize * @emSize) / @emSize), rem);
@huge            : unit( (round(@hugeSize * @emSize) / @emSize), rem);
@massive         : unit( (round(@massiveSize * @emSize) / @emSize), rem);

/* em */
@relativeMini    : unit( (round(@miniSize * @emSize) / @emSize), em);
@relativeTiny    : unit( (round(@tinySize * @emSize) / @emSize), em);
@relativeSmall   : unit( (round(@smallSize * @emSize) / @emSize), em);
@relativeMedium  : unit( (round(@mediumSize * @emSize) / @emSize), em);
@relativeLarge   : unit( (round(@largeSize * @emSize) / @emSize), em);
@relativeBig     : unit( (round(@bigSize * @emSize) / @emSize), em);
@relativeHuge    : unit( (round(@hugeSize * @emSize) / @emSize), em);
@relativeMassive : unit( (round(@massiveSize * @emSize) / @emSize), em);

/* rem */
@absoluteMini    : unit( (round(@miniSize * @emSize) / @emSize), rem);
@absoluteTiny    : unit( (round(@tinySize * @emSize) / @emSize), rem);
@absoluteSmall   : unit( (round(@smallSize * @emSize) / @emSize), rem);
@absoluteMedium  : unit( (round(@mediumSize * @emSize) / @emSize), rem);
@absoluteLarge   : unit( (round(@largeSize * @emSize) / @emSize), rem);
@absoluteBig     : unit( (round(@bigSize * @emSize) / @emSize), rem);
@absoluteHuge    : unit( (round(@hugeSize * @emSize) / @emSize), rem);
@absoluteMassive : unit( (round(@massiveSize * @emSize) / @emSize), rem);

next try

meteor

but

client/lib/semantic-ui/definitions/globals/site.import.less:29: variable @googleProtocol is undefined

error: variable @googleProtocol is undefined

lets modify it manually... and retry... but :

client/lib/semantic-ui/definitions/globals/site.import.less:29: variable @googleFontRequest is undefined
error: variable @googleFontRequest is undefined

There must be something to do, I am getting crazy or ?

Thanks !

Solution

I think you have created a bit of a mess for yourself. I was able to create a simple meteor app using semantic-ui-react as follows:

meteor create mySemanticTest
cd mySemanticTest
meteor npm install --save react react-dom semantic-ui-react semantic-ui-css
meteor

Then I edited App.jsx to be:

import React from 'react';

import 'semantic-ui-css/semantic.min.css'
import { Button } from 'semantic-ui-react'

export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>

    <Button>This works</Button>
  </div>
);

And it all worked and looked right: