SCRIPT1006: Expected '() React app with webpack and Babel - reactjs

I am setting up a React app with babel and webpack. The app works fine on chrome and other browsers except internet exlorer11.
Here is my package.json
{
"name": "xai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
"start": "webpack serve"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"not ie < 11",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/node": "^7.14.2",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"#fortawesome/fontawesome-free": "^5.15.3",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"image-webpack-loader": "^7.0.1",
"path": "^0.12.7",
"style-loader": "^2.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#material-ui/core": "^4.11.4",
"axios": "^0.21.1",
"bootstrap": "^5.0.1",
"copy-to-clipboard": "^3.3.1",
"fast-text-encoding": "^1.0.3",
"firebase": "^8.6.3",
"font-awesome": "^4.7.0",
"font-awesome-webpack": "0.0.5-beta.2",
"gh-pages": "^3.2.0",
"history": "^5.0.0",
"hookrouter": "^1.2.5",
"lodash": "^4.17.21",
"markdown-loader": "^6.0.0",
"max-validator": "^1.2.1",
"node-sass": "^6.0.0",
"raw-loader": "^4.0.2",
"react": "^17.0.2",
"react-animations": "^1.0.0",
"react-app-polyfill": "^2.0.0",
"react-beforeunload": "^2.5.1",
"react-beforeunload-component": "^1.2.3",
"react-dom": "^17.0.2",
"react-likert-scale": "^4.1.1",
"react-radio-buttons": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-toastify": "^7.0.4",
"react-tooltip": "^4.2.21",
"reactstrap": "^8.9.0",
"sass-loader": "^11.1.1",
"url-loader": "^4.1.1",
"uuid": "^8.3.2"
}
}
And webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
mode: process.env.NODE_ENV || "development",
resolve: {
modules: [path.resolve(__dirname, "src/"), "node_modules"],
extensions: ["*", ".js", ".jsx", ".json"],
symlinks: false,
cacheWithContext: false,
},
devServer: { contentBase: path.join(__dirname, "src") },
module: {
rules: [
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: "url-loader?limit=10000&mimetype=application/font-woff",
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: "file-loader",
},
{ test: /\.md$/, use: "raw-loader" },
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
use: ["file-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
};
and I use this config for .babelrc
{
"presets": ["#babel/preset-env", "#babel/react"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
The problem is that I used to have the app load(with broken routing when I use CRA). Now I only get a blank page with SCRIPT1006: Expected '('. I am wondering if you could have a workaround to solve this error

You can try to remove the browserslist and use target: ['web', 'es5'] to support IE 11. It will convert your code to ES5 which works in IE 11. For more information, you can refer to this answer and this doc.
I follow the steps in this blog to setup a React app with Webpack and Babel, then I add target: ['web', 'es5'] in webpack.config.js like below and it works well in IE 11. You can also try:
module.exports = {
// ...
target: ['web', 'es5'],
};

Related

React application sudden break and causes Appropriate loader Error

I know this issue has been asked before , the solution was to create babel config file & webpack file but it still doesnt solve the issue
I was using a create react app and all this while it was working fine until I ran npm install. I am not too sure what caused it to break but now all it has is the appropriate loader error. I am NOT familiar with babel and webpack. So hopefully someone can shed some light here.
I have install the babel presets in package.json. Following is my package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#hookform/resolvers": "^2.8.8",
"#reduxjs/toolkit": "^1.8.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"antd": "^4.19.1",
"axios": "^0.26.1",
"babel-preset-es2015": "^6.24.1",
"firebase": "^9.6.7",
"lodash.debounce": "^4.0.8",
"mdb-react-ui-kit": "^2.4.0",
"moment": "^2.29.3",
"otp-input-react": "^0.3.0",
"qs": "^6.10.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropdown-tree-select": "^2.7.1",
"react-hook-form": "^7.27.1",
"react-moment": "^1.1.2",
"react-nestable": "^1.3.0",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"react-scripts": "^2.1.3",
"react-toastify": "^8.2.0",
"socket.io-client": "^4.4.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^3.0.4",
"style-loader": "^0.19.1",
"webpack": "^4.0.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.0.0"
},
"scripts": {
"start": "PORT=4007 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Following is my file structure
This is my .babelrc file
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties"
]
}
This is webpack.config.js file
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const port = process.env.PORT || 3000;
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.[hash].js",
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015"],
},
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
modules: true,
localsConvention: "camelCase",
sourceMap: true,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
favicon: "public/favicon.ico",
}),
],
devServer: {
host: "localhost",
port: port,
historyApiFallback: true,
open: true,
},
};
Thank you.
FOUND THE ANSWER
Had to update react-scripts to ^5.0.0 and i removed babel.rc file and webpack config file

Google spreadsheet api throws crypto.createSign error in react app with webpack

I have a react app with webpack recently upgraded to version 5.
I am getting the following error and need help in fixing it
Uncaught (in promise) TypeError: crypto.createSign is not a function
at Object.sign (index.js:151)
at Object.jwsSign [as sign] (sign-stream.js:32)
at GoogleToken.requestToken (index.js:225)
at GoogleToken.getTokenAsyncInner (index.js:163)
at GoogleToken.getTokenAsync (index.js:142)
at GoogleToken.getToken (index.js:94)
at JWT.refreshTokenNoCache (jwtclient.js:158)
at JWT.refreshToken (oauth2client.js:143)
at JWT.authorizeAsync (jwtclient.js:139)
at JWT.authorize (jwtclient.js:135)
when the following code is executed (The credentials are correct)
const { GoogleSpreadsheet } = require("google-spreadsheet");
.
.
.
let submitOrderDetails = async () => {
const SPREADSHEET_ID = "working-id-here";
const doc = new GoogleSpreadsheet(SPREADSHEET_ID);
// this fails
await doc.useServiceAccountAuth({
client_email: creds.client_email,
private_key: creds.private_key,
});
.
.
.
}
webpack.config.json
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
path: path.join(__dirname, "build"),
filename: "main.js",
publicPath: "/",
},
target: "web",
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader", //1. Turns sass into css
],
},
{
test: /\.(png|jp?g|svg|gif)?$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "index.html",
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
],
resolve: {
fallback: {
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
"crypto-browserify": require.resolve("crypto-browserify"),
os: require.resolve("os-browserify/browser"),
child_process: false,
},
},
};
package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"fs": "0.0.1-security",
"google-spreadsheet": "^3.2.0",
"googleapis": "^67.0.0",
"http": "0.0.1-security",
"https-browserify": "^1.0.0",
"net": "^1.0.2",
"os": "^0.1.2",
"path": "^0.12.7",
"prettier": "^2.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"stream": "0.0.2",
"tls": "0.0.1",
"zlib": "^1.0.5"
},
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"pretty": "prettier --write \"./**/*.*\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/plugin-proposal-class-properties": "^7.16.5",
"#babel/plugin-transform-runtime": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"node-sass": "^6.0.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"process": "^0.11.10",
"sass-loader": "^12.4.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.3.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.11.3",
"webpack-merge": "^5.8.0"
}
}
Answering my own question. I updated the webpack config by adding fallbacks.
Here are the updated webpack.config.json and package.json
webpack.config.json
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: __dirname,
entry: "./src/index.js",
output: {
path: path.join(__dirname, "build"),
filename: "main.js",
publicPath: "/",
},
target: "web",
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader", //1. Turns sass into css
],
},
{
test: /\.(png|jp?g|svg|gif)?$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "index.html",
}),
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
],
resolve: {
fallback: {
fs: false,
tls: "empty",
child_process: false,
util: require.resolve("util/"),
buffer: require.resolve("buffer"),
assert: require.resolve("assert/"),
http: require.resolve("stream-http"),
path: require.resolve("path-browserify"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
"crypto-browserify": require.resolve("crypto-browserify"),
},
},
};
package.json
{
"name": "sigmaprints",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"pretty": "prettier --write \"./**/*.*\""
},
"devDependencies": {
"#babel/core": "^7.12.1",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.2.1",
"cross-env": "^7.0.2",
"css-loader": "^5.0.0",
"file-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^1.1.5",
"process": "0.11.10",
"html-webpack-plugin": "^4.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"prettier": "^2.1.2",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.1.2",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.2.0"
},
"browser": {
"crypto": false
},
"dependencies": {
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"google-spreadsheet": "^3.1.15",
"http-browserify": "^1.7.0",
"https-browserify": "^1.0.0",
"net": "^1.0.2",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router-dom": "^5.2.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"tls": "0.0.1",
"util": "^0.12.4"
}
}

Invalid hook call on npm link a library to application

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the render er (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app.
I am developing own library of components and using same library in my application through npm link but getting above error while testing.
here is my webpack.config
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'eval-source-map',
module: {
rules: [
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
{
test: /\.(tsx|ts|mjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [['#babel/plugin-proposal-class-properties'], ['#babel/plugin-transform-runtime', { "regenerator": true }]],
presets: ['#babel/preset-env', '#babel/preset-react', '#babel/preset-typescript'],
},
},
},
{
test: /\.mjs$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
},
{
test: /\.(css|scss)$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
exclude: [/\.js$/, /\.ts$/, /\.html$/, /\.json$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
resolve: {
extensions: ['.mjs', '.js', '.ts', '.tsx', '.json'],
},
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '',
filename: 'bundle.js',
libraryTarget: 'commonjs'
}
};
here is my package.json
{
"name": "abc",
"version": "1.0.42",
"description": "A React component library",
"main": "dist/bundle.js",
"types": "dist/types/index.d.ts",
"scripts": {
"test": "jest",
"build:development": "npm-run-all --parallel webpack:watch generate-typings",
"build:production": "npm-run-all webpack:prod generate-typings",
"build:clean": "rmdir /Q /S dist",
"generate-typings": "tsc --declaration --emitDeclarationOnly",
"styleguide": "npx styleguidist server",
"styleguide:build": "npx styleguidist build",
"webpack:watch": "webpack --watch --mode=development",
"webpack:prod": "webpack --mode=production",
"localVersion": "node -p \"require('./package.json').version\"> localVersion.txt",
"serverVersion": "npm view #company/abc version > serverVersion.txt"
},
"repository": {
"type": "git",
"url": "url"
},
"keywords": [
"react",
"components",
"typescript"
],
"author": "Spencer Cousino",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#types/enzyme": "^3.10.5",
"#types/fetch-mock": "^7.3.2",
"#types/jest": "^24.9.1",
"#types/nock": "^10.0.3",
"#types/node": "^11.15.9",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"#types/react-table": "^6.8.7",
"async-wait-until": "^1.2.4",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"fetch-mock": "^7.7.3",
"file-loader": "^3.0.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.3.0",
"nock": "^10.0.6",
"node-fetch": "^2.6.1",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"oidc-client": "^1.10.1",
"powerbi-report-component": "^1.6.0",
"prettier": "1.17.0",
"react": "^16.14.0",
"react-docgen-typescript": "^1.20.1",
"react-dom": "^16.14.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-table": "6.10.3",
"react-slick": "^0.23.2",
"react-spinners": "^0.9.0",
"react-styleguidist": "^11.1.5",
"reactstrap": "^8.4.1",
"sass-loader": "^7.3.1",
"ts-jest": "^25.4.0",
"typescript": "^3.8.3",
"url-loader": "^1.1.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/runtime": "^7.12.5",
"#company/abc": "0.0.6",
"#company/abc1": "^1.2.0",
"#company/abc2": "^1.0.23",
"#company/abc3": "^1.9.1",
"#company/abc4": "^1.0.1",
"core-js": "^3.8.0",
"date-fns": "^1.30.1",
"react-bingmaps": "^3.6.1",
"react-bootstrap": "^0.32.3",
"react-grid-layout": "^0.16.6",
"react-scripts": "^4.0.3",
"react-tabs": "^3.1.1",
"slick-carousel": "^1.8.1"
},
"peerDependencies": {
"react": "~16.8.4",
"react-dom": "~16.8.4",
"#types/node": "^11.11.6",
"node-fetch": "^2.3.0",
"oidc-client": "^1.7.0",
"powerbi-report-component": "^1.1.3",
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#fortawesome/free-solid-svg-icons": "^5.8.1",
"react-slick": "^0.23.2",
"react-spinners": "^0.5.3",
"reactstrap": "^8.0.0"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"setupFilesAfterEnv": [
"./testSetup.ts"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "identity-obj-proxy",
"^.+\\.(svg)$": "<rootDir>/src/mocks/fileMock.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx"
],
"collectCoverageFrom": [
"**/context-components/**/*.{js,jsx,ts,tsx}"
]
}
}
I have tried multiple ways but none of them worked for me.
Any help will be appreciated.

Uncaught Reference error React is not defined

I am getting the following error
external_"react":1 Uncaught ReferenceError: react is not defined
at eval (external_"react":1)
at Object.react (bundle.js:120)
at __webpack_require__ (bundle.js:20)
at eval (client.js:2)
at Module../src/client.js (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
eval # external_"react":1
react # bundle.js:120
__webpack_require__ # bundle.js:20
eval # client.js:2
./src/client.js # bundle.js:97
__webpack_require__ # bundle.js:20
(anonymous) # bundle.js:84
(anonymous) # bundle.js:87
I have read many articles on here about how to solve, but nothing works.
My webpack.config.js is as follows :
const isDevelopment = process.env.NODE_ENV === 'development';
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isomorphicRules = [
{
test: /\.(js?|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
]
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: require('sass'),
sassOptions: {
indentWidth: 4,
includePaths: ['public'],
},
},
}
]
},
];
const client = {
entry: './src/client.js',
output: {
path: path.join(__dirname, './src/public/dist/'),
publicPath: '/dist',
filename: 'bundle.js'
},
module: {
rules: isomorphicRules,
},
externals: ["react", "react-dom"],
plugins: [
new HtmlWebpackPlugin({
template: '!!raw-loader!' + path.join(__dirname, './src/views/clientside.ejs'),
filename: 'clientside.ejs',
inject: 'body'
})
]
};
const server = {
entry: './src/server.js',
output: {
path: path.join(__dirname, './src/public/dist/'),
filename: 'server.js'
},
module: {
rules: isomorphicRules
},
target: 'node',
externals: [nodeExternals(), "react", "react-dom"],
plugins: [
new HtmlWebpackPlugin({
template: '!!raw-loader!' + path.join(__dirname, './src/views/serverside.ejs'),
filename: 'serverside.ejs' // this line decide the extension of output file.
})
]
};
module.exports = [
client,
server,
];
I am stumped as I have added react as an external.
For good measure here is my package.json
{
"name": "webtest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"abstract-syntax-tree": "^2.9.3",
"bootstrap": "^4.5.1",
"compression": "^1.7.4",
"dotenv": "^8.2.0",
"ejs": "^3.1.3",
"express": "^4.17.1",
"fabric": "^4.1.0",
"form-data": "^3.0.0",
"formidable": "^1.2.2",
"govuk-frontend": "^3.8.1",
"highlight.js": "^10.1.2",
"moment": "^2.27.0",
"node-fetch": "^2.6.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-dom-server": "0.0.5",
"react-html-parser": "^2.0.2",
"react-json-view": "^1.19.1",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "^3.4.3"
},
"scripts": {
"webpack": "webpack --mode development --config webpack.config.js",
"dev": "set NODE_ENV=development && webpack --mode development --config webpack.config.js && nodemon --exec babel-node src/index.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/node": "^7.10.5",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/polyfill": "^7.10.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"babel-plugin-css-modules-transform": "^1.6.2",
"cross-env": "^7.0.2",
"css-loader": "^4.2.2",
"dart-sass": "^1.25.0",
"ejs-webpack-loader": "^2.2.2",
"file-loader": "^6.0.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1",
"mini-css-extract-plugin": "^0.10.0",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"nodemon-webpack-plugin": "^4.3.2",
"raw-loader": "^4.0.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.1",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^1.7.2"
}
}
I am using the npm start dev script to launch.
The rendered html is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSON Forms Demo</title>
</head>
<body>
<div id="root">
</div>
<script src="/dist/bundle.js"></script></body>
</html>
So it is clear to me the problem is that react is not defined. My question is why not?
My client.js looks like
import React from 'react';
import ReactDOM from 'react-dom';
import ClientApp from './clientApp';
ReactDOM.render(<ClientApp />, document.getElementById('root'));
And clientApp is as follows :
import React, { Component } from 'react';
class ClientApp extends Component {
render() {
return (
<div>
<h1>Hello World from Client Side App</h1>
</div>
);
}
}
export default ClientApp;
Also my .babelrc file looks like
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
So I feel like I've covered all the bases with what I've read on here and on the webpack website, but I clearly have missed something and would be most grateful if the panel could take a look.
Thanks to tmhao2005, yuRa and Freestyle09. It was driving me spare.
I removed the external directive from the webpack config and it works.

Webpack 2 : You may need an appropriate loader to handle this file type React

I have checked my config and packages multiple times and cannot figure out whats up. Seems webpack is ignoring my babelrc file but I've also tried using the presets option in my config and still cant get it to transpile React. Doing it from the command line with babel cli works fine:
webpack.config.js
var path = require('path');
const config = {
entry: './frontend/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.(js || jsx)$/,
use: 'babel-loader',
include: path.resolve(__dirname, 'frontend')
}
],
}
};
module.exports = config;
.babelrc
{
"presets": [
["es2015", {"modules": false}],
"react",
"stage-0"
],
"plugins": [
["module-resolver", {
"root": ["./frontend"],
"alias": {
"actions": "actions",
"components": "components",
"reducers": "reducers",
"stores": "stores",
"utils": "utils"
}
}]
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "./frontend/app.js",
"scripts": {
"test": "jest",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.1",
"fetchr": "^0.5.36",
"fluxible": "^1.2.0",
"fluxible-action-utils": "0.2.4",
"fluxible-addons-react": "0.2.8",
"fluxible-reducer-store": "^0.1.0",
"immutable": "^3.8.1",
"keymirror": "^0.1.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-module-resolver": "^2.5.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"jest": "^18.1.0",
"webpack": "^2.2.1"
}
}
/\.(js || jsx)$/
is not how regular expressions work. You mean
/\.(js|jsx)$/

Resources