I am developing a Web application using React and Laravel. I want both to be in the same project. So in the Laravel application, I installed react using preset (php artisan preset react) following this link, https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/. My set up was working. At some point, I installed the react bootstrap as well running this command.
npm install react-bootstrap --save
Then I used the bootstrap Button component like this in my project.
import React, {Component} from 'react';
import Button from 'react-bootstrap/lib/Button';
class CreateItem extends Component {
render() {
return (
<div>
<h1>Create An Item</h1>
<form>
<Button>Submit</Button>
</form>
</div>
)
}
}
export default CreateItem;
It was still working fine. Then, I used the es6 syntax in my component like this.
class CreateItem extends Component {
addItem = () => {
}
//other code
}
export default CreateItem;
When I run it was throwing error because I used the es6 syntax. So, to solve the errors, I installed the required babel packages running the following command.
npm install --save babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
When I run "npm run watch", it is throwing this error.
ERROR in ./node_modules/react-bootstrap/lib/utils/bootstrapUtils.js
Module not found: Error: Can't resolve '#babel/runtime/core-js/object/entries' in '/Applications/MAMP/htdocs/react_integration/node_modules/react-bootstrap/lib/utils'
# ./node_modules/react-bootstrap/lib/utils/bootstrapUtils.js 13:38-86
# ./node_modules/react-bootstrap/lib/Button.js
# ./resources/assets/js/components/CreateItem.js
# ./resources/assets/js/app.js
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
ERROR in ./node_modules/react-bootstrap/lib/Button.js
Module not found: Error: Can't resolve '#babel/runtime/core-js/object/values' in '/Applications/MAMP/htdocs/react_integration/node_modules/react-bootstrap/lib'
# ./node_modules/react-bootstrap/lib/Button.js 8:37-84
# ./resources/assets/js/components/CreateItem.js
# ./resources/assets/js/app.js
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Basically, it does not like the bootstrap. This line
import Button from 'react-bootstrap/lib/Button';
When I remove it, it does not support the es6 syntax as well. Now, I cannot use both es6 (babel) and the bootstrap in my project. I tried adding the .babelrc file into my project root folder with the following content as well.
{
"presets": [
["es2015", {
"modules": false
}],
"react"
]
}
It is still throwing the same error. So, what went wrong? How can I use React with babel and react-bootstrap inside a Laravel project together? How can I fix this error?
In the browser console, I got this error.
Uncaught Error: Cannot find module "#babel/runtime/core-js/object/values"
at webpackMissingModule (app.js:60211)
at Object.module.exports (app.js:60211)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:59878)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:15646)
at __webpack_require__ (app.js:20)
at Object.defineProperty.value (app.js:15631)
at __webpack_require__ (app.js:20)
at app.js:63
This is a recently introduced bug you are hitting, making the 0.32.2 version of react-bootstrap incompatible with the babel version used:
https://github.com/react-bootstrap/react-bootstrap/issues/3231
We temporarily fixed the react-bootstrap version to 0.32.1 as a workaround.
Related
I am building a very basic React app by including the React library script tags in my html page, and loading my components in script tags. I am not using modules or create-react-app. My components looks like this:
TIPS.JS
class Tips extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
I have installed the babel transpolar:
npm install babel-cli#6 babel-preset-react-app#3
And now I can transpile my JSX component to normal JS with:
npx babel --watch src --out-dir . --presets react-app/prod
This is fine, but now I want to ALSO compile Typescript TSX, but these docs are a bit unclear on how to combine these. They refer to the Microsoft Typescript React Starter, but that uses Webpack, so it's not the same setup.
Typescript setup
nom install typescript
npx tsc --init
TSCONFIG.json
{
"compilerOptions": {
"rootDir": "src",
"outDir": "build"
},
}
Now I should be able to run npm run build but I can't find the settings for package.json.
Should I use tsc watch or babel watch ? Or can I just discard babel when using typescript?
In other words, what's the most basic setup to compile TSX components to javascript without using modules and webpack?
You can compile Typescript using Babel with #babel/preset-typescript.
npm install --save-dev #babel/preset-typescript
// .babelrc
{
"presets": ["#babel/preset-typescript"]
}
So just add this preset & add tsconfig.json to your project and you will able to transpile TS.
For more info
I'm trying to get bootstrap.css and Google fonts CDNs working in my Gatsby project.
There is no HTML file; just JavaScript files.
For bootstrap, I can npm install bootstrap and then import the min.css from that.
Trying to figure out how to get Amatic SC font from Google fonts; I have npm installed google-fonts-webpack-plugin.
I am using gatsby-node.js by adding:
const GoogleFontsPlugin = require("google-fonts-webpack-plugin")
exports.modifyWebpackConfig = ({ config, stage }) => {
config.plugin("google-fonts-webpack-plugin",new GoogleFontsPlugin(
{
fonts: [
{ family: "Amatic SC" }
]
}
),null)
};
However, I get the error below;
Invalid 'constructor' parameter. You must provide either a function or null
What am I doing wrong and how can I fix it?
Is there a way of referencing a CDN directly so rather than npm installing bootstrap, I could just reference its latest version?
You can include the font using typeface-amatic-sm from NPM, and in your JS do:
import 'typeface-amatic-sc'
Otherwise, can include scripts it in your </head> using helmet like:
<Helmet>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</Helmet>
When I try to import Jquery like
import $ from 'jquery';
inside test file
or like
import $ from 'jquery'; global.$ = global.jQuery = $;
inside the Jest setup file, I get error as
● Runtime Error- SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at createMockFunction (node_modules/jest-mock/build/index.js:179:10)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
How to fix this issue? Checked the path and node_modules for Jquery both are fine. using Jest version "^14.1.0".
I have a newer version of Jest (v24.7.0), so I'm not sure this answer works with the Jest version used in the question.
From a note on Jest documentation:
Note: babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project.
I found the solution on the Jest documentation itself:
Install these dependencies: npm install --save-dev babel-jest #babel/core #babel/preset-env
Add a configuration file for Babel similar to this one in your project's root directory:
// babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
Try using #babel/preset-env. Here's an example .babelrc:
{
"env": {
"test": {
"presets": [["#babel/preset-env"]]
}
}
}
You can add additional configuration options, of course; the important part is that #babel/preset-env is set as a preset in your env.test object.
I am writing a npm package that depend on :
"peerDependencies": {
"react": "15.4.1",
},
"dependencies": {
"classnames": "2.2.5",
"react-onclickoutside": "5.8.3",
"styled-components": "1.1.2"
}
I have added them as peer dependencies.
I have created a webpack build, and I've generated a 'umd' module that I want to import in my application.
The probleme is that a component from the module that depend on react-onclickoutside, complain about the presence of 2 React.
This is the code that can be toggled and generate this error :
DropDown = onClickOutside(DropDown, {
handleClickOutside(instance) {
return instance.closeMenu;
},
});
This give me this error :
Error: Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: ....).(…)
If I look at my UMD module, I can see that my peer dependencies is bundled, this is probably why there is now two React in my application.
I would like to know how I can prevent webpack from bundling React react in my module
You can make use of the externals feature in webpack. Basically it will create the UMD module without bundling React, and assuming that it will be provided elsewhere
I've been using System.js to load my React 15.3.2 dependency into my application:
System.config({
"defaultJSExtensions": false,
"map": {
"react": "vendor/assets/react/react.js",
"react-dom": "vendor/assets/react/react-dom.js"
}
});
System.import("js/main.js");
My main.js is importing React:
import React from "react";
import ReactDOM from "react-dom";
With version 15.3.2 everything works fine. I'm able to create components, render them etc.
With version 15.4 System.js fails with an error message:
Uncaught (in promise) Error: (SystemJS) require is not defined
I'm using Babel with es2015 prefix.
It seems like the React 15.4 structure is completely different and ReactDOM cannot be loaded the same way as before?
Read more about this issue here:
https://github.com/facebook/react/issues/8301