We Keep Coding

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..

How to import external css inside jsx file in react?

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

Import TypeScript from JavaScript using webpack

Edit: I simply forgot to add typescript and ts-loader dependencies to my project..
I'm trying to import a file called Test.ts from my main.js.
Test.js:
export default class Test {}
main.js:
import Test from './Test' // or `const Test = require('./Test')`
In my webpack.config.js I have the following:
{
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.(js|ts)$/,
loader: 'babel-loader'
},
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
On compilation I get the following error:
This relative module was not found:
* ./Test in ./src/main.js
What am I missing?

Webpack is not parsing the jsx file

I have this jsx file.
//react code
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
and this is my webpack.confg.js file
//webpack config
module.exports = {
entry: __dirname + '/assets/app/components/test/test.jsx',
output: {
path: __dirname,
filename: '/assets/app/components/test/test.min.js'
},
module: {
loaders: [
{
test: '/\.jsx?/',
exclude: '/node_modules/',
loader: 'babel',
query: {
presets:['es2015', 'react']
}
}
]
}
}
on running the web pack its giving the error as
/assets/app/components/test/test.jsx
Module parse failed: /Users/joseph.antony/workspace/sloop/assets/app/components/test/test.jsx Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)

I'm fairly sure that your issue is due to the regex tests not being expressed correctly:
This:
test: '/\.jsx?/',
exclude: '/node_modules/',
Should be:
test: /\.jsx?/,
exclude: /node_modules/,
Regex literals are not wrapped in strings.

Here is my module config I used for all React projects I create. You will need to npm install the packages I have specified below.
module: {
loaders: [
{
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
exclude: __dirname + "/node_modules",
loader: require.resolve("babel-loader"),
query: {
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react')
]
}
}
]
},

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"]
}