I'm starting to learn react with a tutorial. But webpack is not working as expected.
So here is my simple webpack.conf.js file.
module.exports = {
entry: "./app-client.js",
output: {
filename: "public/bundle.js"
},
module: {
loaders: [
{
exclude: /(node_modules|app-server.js)/,
loader: 'babel'
}
]
}
};
Also I installed all the modules:
npm install -g webpack
npm install webpack react babel-loader babel-core
But when running webpack, I got the following error message:
ERROR in ./app-client.js
Module build failed: SyntaxError: app-client.js: Unexpected token (4:13)
2 | var APP = require('./components/APP');
3 |
> 4 | React.render(<APP />, document.getElementById('react-container'));
| ^
In my understanding, babel-loader is supposed to take care of that. But it looks like it's not making the effort.
What am I missing?
Babel 6 doesn't do anything by itself. In order to properly process JSX, you need to have the following in your .babelrc file:
{
"presets": ["react"]
}
Also, you need to make sure you install that preset using NPM:
$ npm install --save-dev babel-core react react-dom babel-preset-react
A good place to start is the official React getting started page
Related
I have created an npm package with the scoped name '#bpmg/mycomponent' with a single react component. I have published this to a local npm registry (verdaccio).
I have created a new react project to test this package, using create-react-app.
I have installed my npm package successfully and can import the component into my project.
However, webpack (from create-react-app scripts) complains about my imported file.
support for the experimental syntax 'jsx' isn't currently enabled
So I install react-app-rewired and try to override the webpack config to "include" this one node_module in the webpack bundler.
Here is what I have
/* config-overrides.js */
const path = require('path');
module.exports = {
webpack: function (config, env) {
config.module.rules= [
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!(#bpmg)\/).*/,
include: [
path.join(__dirname, 'src')
],
loader: 'babel-loader',
options: { presets: ['#babel/env', '#babel/preset-react'] },
}
];
return config;
}
}
This fails to run
ERROR in ./node_modules/#bpmg/myComponent/src/myComponentMainFile.js
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Where it chokes on the first bit of jsx syntax it encounters.
Where am I going wrong here?
I am using react.js & web pack. when run the NPM run build command get this error I am learning the how to make build with web pack so I try first time but getting this error. please help!
I write this code from some web pack tutorial website.
assets by status 1.05 KiB [cached] 2 assets
./src/index.js 796 bytes [built] [code generated] [1 error]
ERROR in ./src/index.js 13:2
Module parse failed: Unexpected token (13:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const ProviderComponent = ()=>{
| return (
> <Provider store={store} >
| <App/>
| </Provider>
webpack 5.65.0 compiled with 1 error in 901 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
Web pack file
const port = process.env.PORT || 8080;
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
output :{
path:path.join(__dirname,'/dist'),
filename:'main.[fullhash].js'
},
module:{
rules:[{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
},
]
},
resolve:
{
mainFiles: ['index', 'Index'],
extensions: ['.js', '.jsx','.css'],
alias: {
'#': path.resolve(__dirname, 'src'),
}
},
plugins:[
new HtmlWebPackPlugin({
template:'./public/index.html'
})
],
devServer:{
host:'localhost',
port:port,
historyApiFallback:true,
open:true
}
}
You have JSX in your index.js which is not standard javascript. Webpack by default can only transpile standard javascript, for transpiling JSX which is a react feature, you need to use something that can help webpack recognize the syntax of JSX, webpack calls this things loaders.
There are different loaders which you can use, here for example you should use babel-loader to tell webpack how to understand JSX.
babel-loader internally uses Babel.js which is a library for transpiling non -standard javascript into standard javascript.
It's better to get familiar with Babel.js and then use it in webpack. But for now, what you need is this:
Install babel (with preset-react) and babel-loader
npm install -D babel-loader #babel/core #babel/preset-env #babel/preset-react
Add babel to your webpack js|jsx files rule
You can set babel options in the webpack config file like I'm doing here, or create a separate file for configuring babel itself. You can read more about it in Babel.js docs.
...
module:{
rules:[{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', "#babel/preset-react"]
}
}
},
...
I recently ejected my create-react-app because I need to load sass files. Unfortunately, create-react-app uses webpack 1. But, the current version of sass-loader includes a dependency on webpack 2. The support docs don't indicate the last sass-loader version that supports webpack 1. Does anyone know where I can find this info?
You'll need to use the webpack 1 branch of the loader:
https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1
As shown in the documentation:
module.exports = {
...
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
};
And then in your react app:
require("./file.scss")
In your npm install you'd do:
npm i -S npm install sass-loader#4.1.1
I've started learning Backbone.js and I'm a little confused with setting up the project. How shoul I set up the Backbone.js environment with Webpack and npm? First, I did
$ npm init
$ npm i webpack --save-dev
$ npm i webpack-dev-server --save-dev
$ npm i backbone --save-dev
$ npm i jquery --save-dev
$ npm i babel-core
$ npm i babel-loader
$ npm i babel-preset-es2015
I had the following in my webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
}
module.exports = config;
and in my main.js I had
import Backbone from 'backbone';
import $ from 'jquery';
but nothing worked. How should I make an initial setup for Backbone with ES6? Also, does Backbone support ES6, or it is rather outdated and deprecated for modern time?
I'd suggest you start here: https://github.com/jerrysu/backbone-webpack-example
There's nothing preventing you using Backbone with ES6, though you should read this: http://benmccormick.org/2015/04/07/es6-classes-and-backbone-js/
The first problem I see with your webpack configuration is that your loader is missing a test expression (https://webpack.js.org/configuration/)
I'm trying to have a simple demo app working using Typescript and React, with webpack. When I try to add whatgw-fetch to retrieve data from a server, I get this error when running webpack :
error TS2307: Cannot find module 'whatwg-fetch'
The error is on the import line :
import * as Fetch from 'whatwg-fetch'
I did install the npm dependency and the typing for typescript
npm install --save whatwg-fetch
typings install --global --save dt~whatwg-fetch
My webpack configuration is :
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
var path = require('path');
module.exports = {
entry: [
path.resolve(__dirname, 'app/index.tsx')
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{test: /\.tsx$/, exclude: /node_modules/, loader: "ts-loader"}
]
},
plugins: [HTMLWebpackPluginConfig]
};
I don't see any error in my IDE (IntelliJ IDEA) and if I change the import to some module that actually is not there, I get a different error (Module not found: Error: Cannot resolve module 'whatwg-fetcha' in C:\dev\[...]), and my IDE tells me the import is not valid.
The import for basic React works fine with an equivalent setting :
npm install --save react
typings install --global --save dt~react
import * as React from 'react'
Am I missing something ?
Thanks for your help.
After some more research (and actually writing the question down), it seems that the typing for whatwg-fetch is in this use case : Import a module for side-effects only (as described on the site : Though not recommended practice, some modules set up some global state that can be used by other modules. These modules may not have any exports, or the consumer is not interested in any of their exports.)
So instead of
import * as Fetch from 'whatwg-fetch'
I used
import 'whatwg-fetch'
And I don't get any more errors and I can use the fetch function in my component. Hope this helps someone else.
Aside from #Antoine solution, I also needed to add #types/whatwg-fetch to my project to make it work:
npm install --save #types/whatwg-fetch