index.js:
import react from 'react';
import {render} from 'react-dom';
render(
<h1>Hello World!</h1>,
document.getElementById('root')
);
package.json:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Callum Linington",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.3.2",
"bluebird": "^3.5.0",
"eslint": "^3.19.0",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
Webpack config:
var webpack = require('webpack');
var packages = require('./package.json');
var path = require('path');
module.exports = {
entry: {
main: './src/index.js',
vendor: Object.keys(packages.dependencies)
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor' // Specify the common bundle's name.
})
],
devtool: "cheap-eval-source-map",
devServer: {
contentBase: path.join(__dirname, "dist"),
publicPath: '/',
port: 9000
},
module: {
rules: [
{
test: /\.js?$/,
use: [ 'babel-loader', ],
exclude: /node_modules/
}
]
}
};
Webpack output:
Chrome Dev Output:
It is crutial to name imported React class starting with capital letter. You first line should be: import React from 'react';. That is because all JSX tags will be converted by Babel to something like React.createElement(....) and React is not there. Exactly what console output tells you.
Related
I keep getting this error
Can't resolve 'file-loader'
I am running webpack serve command.
I've tried different regex but it always shows the same mistake. if this may have something to do with the way in which the React files are placed let me know.
package.json
{
"name": "Tick",
"version": "1.0.0",
"description": "Productivity app",
"main": "src/server/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "nodemon src/server/app.js",
"dev": "webpack serve",
"build": "webpack"
},
"author": "Gabriel Gamboa",
"license": "ISC",
"dependencies": {
"cross-env": "^7.0.3",
"express": "^4.17.1",
"nodemon": "^2.0.13",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.2",
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
}
}
Webpack config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src", "client", "index.js"),
mode: 'development',
output: {
path:path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}]
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: ['file-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "client", "index.html"),
}),
],
}
Please help I've tried everything
You need to install it as it is not listed in your package.json file as a dependency.
npm i file-loader -D
I made my own react component npm package and published in npm, now when import and use it in other CRA apps, i get this error when npm start in run in command line .
and in console:
My webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'web',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=512&&name=[path][name].[ext]?[hash]'
}
]
},
mode: 'development',
externals: {
'react': 'commonjs react'
}
};
My package.json file:
{
"name": "primetable1",
"version": "1.0.0",
"description": "A Datatable for react apps based on Primereact",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --watch",
"build": "webpack"
},
"keywords": [
"primereact",
"primeicons"
],
"author": "Anish Arya",
"license": "ISC",
"peerDependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-runtime": "^6.26.0",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.12.19",
"react-scripts": "3.4.0",
"style-loader": "^1.1.3",
"webpack-cli": "^3.3.11",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"classnames": "^2.2.6",
"primeicons": "^2.0.0",
"primereact": "^3.4.0",
"react-transition-group": "^4.3.0"
}
}
My .babelrc file:
{
"presets": ["env"],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx",
"react-hot-loader/babel"
]
}
I followed this article to create and publish npm package:
https://codeburst.io/extracting-a-react-js-component-and-publishing-it-on-npm-2a49096757f5
How to solve this error?
The externals configuration seems wrong – you probably only need externals: [nodeExternals()] (from const nodeExternals = require("webpack-node-externals");).
I have started learning react js, but I am stucked in setting my webpackconfig.file.I am getting below error:
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint html-webpack-plugin for "index.html" = index.html
webpack config file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
By searching, It might be problem in webpackplugins
package.json file:
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.7",
"webpack": "^4.28.1"
}
My each and every file(index.html,main.js,pacage.json,webpacconfig.js,.babelrc) is in a same folder, I can't detect what the actual problem,
I'm just trying to do import a simple, blank exported class. Im not sure why it can't find the file because it's in the same directory as the class importing it. I've searched google for similar error codes but no solutions have worked for me and its a relatively simple problem so im quite confused.
Error:
error TS2307: Cannot find module 'menu'
Folder structure:
node_modules/
src/
entry.tsx
menu.tsx
index.html
package-lock.json
package.json
tsconfig.json
webpack.config.js
entry.tsx
import menu from 'menu';
menu.tsx
export default class menu { }
webpack.config
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/entry.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader' ]
})
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "bundle.css"
}),
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'index.html'
})
]
};
package.json
{
"name": "helloworld",
"version": "1.0.0",
"description": "Hello there",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server",
"build:prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"html-webpack-plugin": "^2.30.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"style-loader": "^0.19.0",
"ts-loader": "^2.3.7",
"typescript": "^2.5.3",
"webpack": "^3.7.1",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"#types/react": "^16.0.13",
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
}
I think Webpack tries to load Node packages if you don't include the relative path in your "include" lines.
Try changing this line in entry.tsx:
import menu from 'menu';
To this:
import menu from './menu';
I am stuck on this error:
You may need an appropriate loader to handle this file type.
import App from "./App";
ReactDOM.render(, document.getElementById("root"));**
I have tried every single Stack Overflow answer for this and it still doesn't work for me.
This is my webpack.config.js file:-
var path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'build/'),
filename: 'index.js',
publicPath: '/build/'
},
resolve: {
modules: [__dirname, 'node_modules']
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
.babelrc file:
{
"presets": ["es2015", "stage-0", "react"]
}
package.json:
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack && babel-node --presets es2015 server.js",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234 --history-api-fallback"
},
"author": "Manav Saxena",
"license": "ISC",
"dependencies": {
"express": "^4.15.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-infinite-scroll-component": "^2.4.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
index.js file:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));