How do I include jquery in this setpu?

[Sireini]

I want to use jqeury in my app.jsx but how do I include this to use?

[kasperpeulen]

import $ from 'jquery';

npm i -S jquery

[Sireini]

Thank you :) Iam going to try that. Maybe a bit of a stupid question but how can I use less and compile it easily.

[Sireini]

After doing what you advised me I'll get this error: bundle.js:17 Uncaught TypeError: (0 , l.$) is not a function(…)

[gaearon]

@smgjreinieren

After doing what you advised me I'll get this error: bundle.js:17 Uncaught TypeError: (0 , l.$) is not a function(…)

Which version of jQuery did you install? Importing it like this will only work with 2.x and later. If you still have issues can you please provide a project reproducing it?

how can I use less and compile it easily.

Just like you'd normally do: run Less command-line tool, and it will create a CSS file. Import that file like the user guide suggests.

[Sireini]

@gaearon this is what is in my package.json: "jquery": "^3.1.1",

Thereby I allready have an bootstrap setup with gulp file to compile less but I dont know how to combine this with each other..

[gaearon]

Please provide a project reproducing the problem.
It's hard to help otherwise.
Cheers!

[Sireini]

@gaearon Do you have suggestions where I can reproduce it?

[gaearon]

I mean: if you have any issues, please publish your project on GitHub so I can take a look.

[Sireini]

@gaearon what I want to try is to combine these two project setups: https://github.com/smgjreinieren/React-bootstrap

[gaearon]

@smgjreinieren Before I clone the repo, please can you tell what the issue is? Are you still seeing this: #981 (comment)? Or is there another problem?

[Sireini]

@gaearon Nope allready fixed that but I want to use custom bootstrap with this setup. Not related to this issue maybe you could help me out

[viankakrisna]

@smgjreinieren you don't need gulp to use less with create-react-app, you can just create another npm scripts inside package.json

for example, run
npm install --save-dev lessc && npm install --save-dev nodemon

and change your script section in package.json to

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "less": "nodemon -e less --exec \"lessc styles.less styles.min.css\"",
    "eject": "react-scripts eject"
}

run it with npm run less

I'm not really familiar with less command line tooling, I personally use sass ported bootstrap with node-sass because it has built it watch support (I use nodemon in above example, haven't really tested that).

[viankakrisna]

whoops, saw the title. it's already out of topic. It's better to put your question in Stack Overflow

[gaearon]

I want to use custom bootstrap with this setup

You can put any command in scripts in package.json, including a custom script, e.g.

  "compile-bootstrap": "node scripts/compile-bootstrap.js"

Then you can write node scripts/compile-bootstrap.js which spawns necessary Node commands or uses Node API to do any build steps you like, and outputs JS and/or CSS files you could import from your project's source code.

Since the original issue is solved, I'll close this one. Cheers!

[Sireini]

@gaearon How do you mean that? Iam not understand the new line clearly in package.json.. I tried to include the main.css and main.js in my index.html like this: <link rel="stylesheet" href="../../public/web/css/main.css">

but it seems not to find that styling.. What do you mean with write custom script what will it do?

[gaearon]

I tried to include the main.css and main.js in my index.html like this: <link rel="stylesheet" href="../../public/web/css/main.css"

Does the user guide help?

• Adding a stylesheet
• Using the public folder

You can use either way.

[Sireini]

@gaearon That is really usefull thanks,

[faurenlarr]

I am also having an issue with jquery, similar to the one mentioned above. I imported a later than 2.x version and imported with import $ from 'jquery. I am receiving this error: The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery…

[gaearon]

@faurenlarr Could you please provide a project reproducing the problem? It would also be great if you could file a separate issue because it’s hard to keep track of (usually unrelated) problems in old issues. Thanks!