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");).
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'm using puppeteer in my React project with Webpack and babel. I write this simple code in my component and I get the following error.
async goToPage() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(this.state.url);
}
When I run npm start I don't get any error in the command line. But I get this error in google chrome console. I think there is a mistake in webpack.config.js but I searched a lot and I can't solve it. Please check the following information and help to solve this problem.
Error:
Uncaught ReferenceError: ws is not defined
at eval (external_"ws":1)
at Object.ws (bundle.js:6941)
at __webpack_require__ (bundle.js:725)
at fn (bundle.js:102)
at eval (WebSocketTransport.js:16)
at Object../node_modules/puppeteer/lib/WebSocketTransport.js (bundle.js:4655)
at __webpack_require__ (bundle.js:725)
at fn (bundle.js:102)
at Object.eval (Launcher.js:27)
at eval (Launcher.js:407)
package.json
{
"name": "scrapper",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.9.0",
"axios": "^0.18.0",
"babel-plugin-emotion": "^10.0.0",
"bluebird": "^3.5.3",
"feedparser": "^2.2.9",
"file-loader": "^2.0.0",
"lodash": "^4.17.11",
"promise": "^8.0.2",
"prop-types": "^15.6.2",
"puppeteer": "^1.11.0",
"query-string": "^6.2.0",
"react-grid-layout": "^0.16.6",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-promise": "^0.6.0",
"url-loader": "^1.1.2",
"ws": "^6.1.2"
},
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode production",
"start:react": "react-scripts start",
"build:react": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(s*)css$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(woff|woff2)$/,
use: {
loader: "url-loader",
options: {
name: "fonts/[hash].[ext]",
limit: 5000,
mimetype: "application/font-woff"
}
}
},
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[hash].[ext]"
}
}
}
]
},
resolve: {
extensions: ["*", ".js", ".json"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: "./dist/index.html"
})
],
devServer: {
contentBase: "./dist",
hot: true,
port: 3000,
historyApiFallback: true
},
externals: ['ws']
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties", "emotion"]
}
i don't know exact problem just try it once, it may works
just instal it : 'npm install --save ws'
else you can look into this documents : "https://www.npmjs.com/package/ws"
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"));
I'm trying to config the server to have multiple entries and outputs. The app is using Zurb Foundation,jquery and React.
I want jquery and foundation not to be part of the bundle.js and also to have a separate bundle for react
Webpack validates, server starts but nothing is show and in console appears: "ReferenceError: webpackJsonp is not defined"
With a single entry is working, I don't know were is the error when trying to use multiple ones.
webpack.config
var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
entry: {
main: ['script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/foundation.min.js',
'./dist/app.js' ],
react: ['react', 'react-dom']
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
}),
new CommonsChunkPlugin('react', 'react.bundle.js')
],
output: {
filename: bundle.js'
},
devServer: {
inline: true,
contentBase: './build',
port: 3000
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
},
test: /\.js?$/,
exclude: /(node_modules)/
}
]
}
};
package.json
{
"name": "boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"test": "karma start"
},
"author": "CBM",
"license": "MIT",
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"foundation-sites": "^6.2.3",
"jquery": "^3.1.1",
"karma": "^1.3.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.1.0",
"react-router": "^2.8.1",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
babel.rc
{
"presets": ["es2015", "react"]
}
Specify an output for each entry:
entry: {
jquery: ['script!jquery/dist/jquery.min.js', 'script!foundation-sites/dist/foundation.min.js' ],
bundle: './dist/app.js',
react: ['react', 'react-dom']
},
output: {
filename: '[name].js'
}
If you want to add jquery and foundation libraries directly to the html just don't add the entries.
font: https://webpack.github.io/docs/multiple-entry-points.html
When I run npm build nothing seems to happen. When I look for the build files I don't see anything. npm start works fine though.
Package.json
{
"name": "pro-react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
}
Webpack.production.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
}
I also have .babelrc file and webpack.config.js file, let me know if those would be useful to see as well, thanks.
Might be related to the fact that build is an internal command. Seems like I have had this happen to me as well in the past. Check out this Question
In order to run a custom script, you can use the npm run-script build or just npm run build. As stated in the NPM documentation