How to import external css inside jsx file in react? - javascript

I have to add the css file externally. Tried with the code import "./Login.css"; which is located in the base path. Cant able to get the file, which turns the error like below.
You may need an appropriate loader to handle this file type.
.Login {
padding: 60px 0;
}
I updated in webpack config also.
Webpack config:
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
In JSX File:
import React from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
Package.json,
{
"name": "reactapp",
"version": "1.0.0",
"description": "Tetser",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-bootstrap": "^0.32.1",
"react-dom": "^15.6.1"
}
}
I tried atmost everything, but no solution. Anyone clarify, please.

You will need to add css-loader and style-loader to your dev dependencies in package.json
Link to webpack docs:
https://webpack.js.org/concepts/loaders/#using-loaders

The way I do it (ex: import fonts from fonts.com) :
create a css file,
import external css in local css file
import local css file in js

Related

Import js file in webpack / babel-loader not working in ios9 (ipad)

I run a cordova / Vue.js app with webpack
in my package.json :
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0"
...
}
in my webpack.config file :
const CONFIG = {
entry: {
app: ["babel-polyfill", path.join(PATHS.SRC_JS, 'app.js')],
},
output: {
path: PATHS.DIST,
//filename: 'app.bundle.js'
filename: './js/[name].js' //
},
module: {
rules: [
...
{
test: /\.js$/,
exclude: /node_modules\/(?!(swiper)\/).*/,
use: [
{
loader: 'eslint-loader',
options: {
emitWarning: true,
noConsole: 0
}
},
{
loader: 'babel-loader',
options: {
presets: [ 'env']
}
}
]
},
//.VUE FILES
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
};
module.exports = CONFIG;
and in my main app.js file,
if i write
console.log('app.js')
import style from '../css/sass/main.scss';
import config from '../assets/config.json';
and then i run webpack and cordova compilation, with output on ipad mini, it works, i have 'app.js' writed on console.
But if i add an import to js file (any file) :
import style from '../css/sass/main.scss';
import Preloader from './components/preloader-component.js';
import config from '../assets/config.json';
on ipad console i have an error :
SyntaxError : Unexpected token ')' in app.js:1
When building app with xcode on ios simulator, it works, but not on ipad (ios 9.3.5).
Need help !
Thanks
RESOLVED
Finally the problem was that Babel did not transpile ES6 correctly, so Safari on iOS would not read the code...
I simply put babel options in a .babelrc file, in place of in the webpack config file..and it works !!
Mysterious...
If someone has the same problem..

Testem receiving imports compiled to `require` when using ES2015/React presets to Babel

I have a project which is set up so that it builds with reactand jsx. It works fine to build it using node_modules/webpack/bin/webpack.js --config webpack.config.js and I can run the result in the browser with no problems. However, when I run npm test and view the test runner in the browser, I get the error: "Uncaught ReferenceError: require is not defined at dashboard-tests.js:3". It seems that webpack is compiling my tests (but not my normal code) into a version of javascriptthat can't be run in browsers.
Here are the relevant files:
.babelrc:
{
"presets": ["es2015", "react"]
}
testem.json:
{
"framework": [
"jasmine"
],
"launch_in_dev": [
"PhantomJS"
],
"launch_in_ci": [
"PhantomJS"
],
"serve_files": [
"tmp/**/*-test{,s}.js"
],
"on_start": "babel static_source --out-dir tmp",
"on_exit": "yes | rm -r tmp"
}
package.json:
{
"main": "index.js",
"scripts": {
"test": "testem"
},
"dependencies": {
"jquery": "^3.2.1",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-feather": "^1.0.7"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"jasmine-es6": "^0.4.3",
"testem": "^1.18.4",
"webpack": "^3.6.0"
}
}
webpack.config.js:
var path = require("path");
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: './static_source/js/index.js',
output: {
path: path.resolve('./app/static/js/'),
filename: "compiled.js"
},
plugins: [],
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
],
}
}
dashboard-tests:
import React from 'react';
import ReactDOM from "react-dom";
import TestUtils from "react-dom/test-utils";
import Dashboard from './dashboard';
describe('Dashboard', function() {
it('exists', function() {
expect(Dashboard).not.toBe(undefined);
});
it('renders arrows', function() {
var dashboard = <Dashboard />;
var renderedDashboard = TestUtils.renderIntoDocument(dashboard);
var arrowsDiv = TestUtils.findRenderedComponentWithClass('arrows');
expect(arrowsDiv).not.toBe(undefined);
});
});
You are using Babel to compile your test source files. Babel is just a transpiler, it takes ES+ files and translates them to ES5 files. Because import does not exist in ES5 Babel replaces them with require().
To fix the problem you need to bundle your source file into one, using Webpack.
You will need a separate Webpack configuration file, let's call it webpack.config.test.js. In this file we need to instruct Webpack to fetch all your static_source/**/*-test{,s}.js files as entry-points.
You will need the glob module : npm install glob --save-dev.
Then add the webpack.config.test.js file with this content :
var path = require("path");
var glob = require('glob');
var webpack = require('webpack');
module.exports = {
context: __dirname,
// we look for all file ending with -test(s?).js and return the absolute path
entry: glob
.sync('./static_source/js/**/*-test{,s}.js')
.map(function(file) { return path.resolve(__dirname, file) }),
output: {
// save the resulting bundle in the ./tmp/ directory
path: path.resolve('./tmp/'),
filename: "compiled.js"
},
plugins: [],
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
],
}
}
On the testem.json file replace the on_start with a before_test to Webpack, and the serve_files to map to the bundled file.
"before_tests": "webpack --config webpack.config.test.js ",
"serve_files": [
"tmp/compiled.js"
],
When testem will be launched it will trigger the Webpack test compilation.
Now you should have a tmp/compiled.js file with all your test files bundled. You may need to do some tweaking but it should basically works.

Webpack not parsing riot js files

I have recently implmented webpack in my application and trying to load all tag files which are converted into js through srcipt src tag. Still the riot js is not able to mount tag file..any solutions for the same ?
When I manually load login_form.js file, riot is able to read it correctly.
HTML:
<html>
<body>
<script type="text/javascript" src="../public/libs/riot/riot.js"></script>
<script src="../public/dist/js.js"></script>
<login_form></login_form>
</body>
Andrew Van Slaars produced a great video I used to get started with Riot.js + Webpack.
https://www.youtube.com/watch?v=UgdZbT-KPpY
He also provides a "starter kit" git repo with Riot.js + webpack: https://github.com/avanslaars/riot-webpack-base
Both are very helpful and a good starting point.
The package.json shows what's required – N.B. the use of tag-loader not riotjs-loader. I found the tag loader works for me so haven't tried the riotjs-loader.
{
"name": "riot-webpack-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"riot": "^2.3.11"
},
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"tag-loader": "^0.3.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
The webpack.config file is fairly simple to start with:
var path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module:{
loaders:[
{
test: /\.js$/,
loader:'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.tag$/,
loader: 'tag',
exclude: /node_modules/
}
]
}
}
There is an official Riot tag loader for Webpack: https://github.com/riot/tag-loader
It supports hot module reloading as well.
module.exports = {
module: {
loaders: [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader',
query: {
hot: false, // set it to true if you are using hmr
// add here all the other riot-compiler options riotjs.com/guide/compiler/
// template: 'pug' for example
}
}
]
}
}
Then in your code:
import riot from 'riot'
import 'riot-hot-reload'
// riot will have now a new riot.reload method!!

webpack issue when trying to render in reactjs

Hi I am a newbie in react js and was trying to build an quiz application..When trying to do so I am getting an error when the render is getting called..
The below is the webpack.config file:-
module.exports = {
entry: {
app: './src/index.js'
},
// Add resolve.extensions.
// '' is needed to allow imports without an extension.
// Note the .'s before extensions as it will fail to match without!!!
resolve: {
extensions: ['', '.js', '.jsx', '.es6.js']
},
output: {
path: __dirname,
filename: 'app/js/main.js'
},
module: {
loader: [
// {
// test: /\.css$/,
// loaders: ['style', 'css'],
// // include: PATHS.app
//
// },
// Set up jsx. This accepts js too thanks to RegExp
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
presets:['es2015','react'],
loader: 'jsx-loader'
// query: {
// presets: ['react']
// }
}
]
}
};
The following is my index.js file:-
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
//React.createElement(People, {})
the following is my App.jsx:-
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component{
render(){
return(
<div>Appppppoihj</div>
)
}
}
export default App
The most interesting part is that I am getting an error in my index.js file while I am trying to call renderDOM.render..
The issue I am getting is :-
ERROR in ./src/index.js
Module parse failed: C:\Users\Th\Desktop\ReactJs_Master\src\index.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:4)
The following is my package.json:-
{
"name": "react_quiz",
"version": "1.0.0",
"description": "quiz with the help of reactjs",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Pratham",
"license": "ISC",
"devDependencies":{
"babel-core":"5.8.*",
"babel-loader":"5.3.*",
"webpack":"1.12.*"
},
"dependencies":{
"react":"15.0.1",
"react-dom":"15.0.1"
}
}
I have tried out all different websites and solutions on this website but none of them is helping me so far..The error is coming at < in the app component when calling reactDOM.render
I would of much help if any of you all could help me out as I am stuck for a long time on this and not getting any sort of solution for this..
Thanks a lot for the help.
Instead of jsx-loader try use babel-loader
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: { presets: ['es2015', 'react'] }
}]
}
Note - Make sure that you have installed these packages
npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
babel-loader
babel-core
babel-preset-es2015
babel-preset-react
Update
also you can move presets option from webpack.config to .babelrc
{
"presets": ["es2015", "react"]
}

Cannot Import CSS from an npm in webpack

I can't figure out the correct incantation to pull bootstrap.css into my Webpack/React project. When webpack builds my project, I get the following error:
ERROR in ./app/js/XXXXXX/XXXXXX.jsx
Module not found: Error: Cannot resolve module 'bootstrap/css/bootstrap.css' in /Volumes/Doomsday Device/XXXXXX
# ./app/js/XXXXXX/XXXXX.jsx 27:0-38
In the source file, I have the following imports:
import React from 'react';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
require('bootstrap/css/bootstrap.css');
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
In my webpack.config.js, I have:
module.exports = {
...
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], include: APP_PATH },
{ test: /\.scss$/, loaders: ["style", "css", "sass"] },
{ test: /\.css$/, loaders: ["style", "css"] },
{ test: /\.(png|jpe?g|gif)$/, loader: "file-loader?name=img/img-[hash:6].[ext]" }
]
},
....
}
I have added bootstrap as a dependency in package.json:
{
...
"dependencies": {},
"devDependencies": {
...
"bootstrap": "^3.3.6",
"css-loader": "^0.19.0",
...
},
...
}
Any ideas as to why might be wrong? Thanks!
It looks like you have typed wrong path, try importing it from bootstrap/dist/css/bootstrap.css

Categories