I'm getting an error when i ran webpack and i can't seem to find the reason why.
Entrypoint main = bundle.js
[0] ./client/client.js 224 bytes {0} [built] [failed] [1 error]
[1] multi ./client/client.js 28 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in ./client/client.js
Module build failed: TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (/Users/XXX/Desktop/react-training/react-todo-list/node_modules/babel-loader/lib/index.js:103:36)
# multi ./client/client.js
here is my package.json,
{
"name": "react-todo-list",
"version": "1.0.0",
"description": "A simple todo list app built with React, Redux and Webpack",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "nodemon server/server.js"
},
"repository": {
"type": "git",
"url": "https://github.com/kweiberth/react-todo-list.git"
},
"author": "XXXX",
"license": "ISC",
"dependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"express": "^4.13.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.13"
}
}
here is my webpack.config,
module.exports = {
entry: ['./client/client.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/',
},
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
}
]
}
}
I've tried installing different versions of babel and webpack with no luck. I'm following an old tutorial on youtube and I was wondering if the older version mentioned in the package.json causes it. This is my initial days learning react and getting use to the node stack. It'd be great if someone can lend me a helping hand to figure this out.
you are using a very old version of webpack (1.12.13) ... we are already in the version 4xx range. It can be really hard to get this all set up in the beginning. I made the same mistake of thinking, that I can set it all up by myself and in the end I spent weeks scratchng my head and not writing any code at all.
This doesn't really answer your question, but...
I would really recommend using something to get you up und running quickly, like create-react-app. If, by any chance, you are still curious how the whole bundling and transpiling stuff works then you can look into that later. But for now, this whole stuff might just kill your motivation. Keep it up! Eventually everything will come together.
Update
Ok, in case you really want to get to the bedrock. The first thing you should do is update your packages. Especially Webpack. You also need webpack-cli when you want to use webpack v4. Furthermore I would suggest reading the webpack getting started section. There are many good examples on how to set up your webpack config. Link to Webpack Docs
I would just recommend using create-react-app, You will not need to bother with build tools. Especially since you're learning React, not the various build tools that accompany it.
npx create-react-app my-app
cd my-app
npm start
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
If you don't want to do that, update both Babel, Webpack and React.
Related
I have installed both babel and babel-jest for use within my project. I have configured my babel.config.js file as so:
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
However I get the following error when trying to run my tests
import * as formObj from '../../../../public/Forms/Classes/Form.class.js';
^
SyntaxError: Unexpected token *
My package.json looks like this for babel, node, and babel-jest
"devDependencies": {
"#babel/preset-env": "^7.9.6",
"babel-jest": "^26.0.1",
"jest": "^24.9.0"
},
"engines": {
"node": ">=11.0.0"
}
Looking online- it seems like a lot of people who have issues with import/export in jest have issues due to their babel.config.js (or lack thereof). However- I made mine exactly how it is like in the jest docs. The error itself seems to step from a babel issue- but I'm failing to see where it could be.
I have tried various other things such as having a translation property in my jest config file, or trying different formats of importing my file, but nothing seems to work correctly.
Any advice greatly appreciated for solving this error.
I’m creating a Javascript library. Inside my project there’s a folder that contains examples of how to use the library. Inside each of the examples is a webpack config file with the entire purpose of bundling that example and serving it over webpack-dev-server with hot reloading. Each of these examples also has the library (at the root of the project) listed as a local NPM dependency. I have hot reloading working for each example and I have babel compiling the library at the root on a watch command.
Primary question: Is there a way that I can have the hot reloader of webpack-dev-server respond to changes in that local NPM dependency?
Secondary question: Is this intended to be the default behavior of webpack? If so, what is could be wrong with my machine/config file?
General/vague question: Am I doing this wrong? I feel like it should be a lot easier to serve local examples (I’m not interested in using Storybook either as the examples I’m writing aren’t in React, Vue, Angular, etc... it's all straight-up vanilla Javascript).
Here's my webpack.config.js file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, argv) => ({
mode: argv.mode,
entry: './index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js'
},
devtool: argv.mode === 'development' ? '#eval-source-map' : 'source-map',
devServer: {
port: 8080,
hot: true,
open: true,
stats: {
children: false, // Hide children information
maxModules: 0 // Set the maximum number of modules to be shown
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [new HtmlWebpackPlugin({ template: './index.html' })]
});
And my package.json file (note that syft.js is the local dependency I want to watch for changes):
{
"name": "with-grid",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "rm -rf dist && webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "",
"devDependencies": {
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"syft.js": "file:../.."
}
}
Folder structure is like such:
dist
index.js (Babel-generated file, what package.json points to, and the file that I want to be watched)
examples
with-grid
webpack.config.js (referenced above)
package.json (referenced above)
src
index.js (main src file)
Operating System: MacOS 10.14.6
Browser: Chrome 76
Node: 12.8.0
NPM: 6.10.3
Yarn: 1.17.3
I opted for a different strategy that now seems very obvious in retrospect. Rather than treating my library like a local node dependency that needs to be resolved, I can just simply import it locally.
When importing from my example folder, I do:
import syft from '../../src'; // Like a relative file
Instead of:
import syft from 'syft.js'; // Like an NPM package
After this small change, everything reloads as expected.
You can use npm link to create symbolic links between your React app and your local dependencies. Just make sure you build your local dependency to trigger reload in your React app.
Your local dependency should have a "main" and a "name" attributes in the package.json. webpack-dev-server will reload based on changes in your "main"
{
"name": "my-dep",
"main": "lib/index.js",
}
Run npm link next to the dependency package.json.
Run npm link my-dep in your React project - it will create a symbolic link between the two projects.
import myDep from 'my-dep in your React project. Reload will be triggered when you change lib/index.js
You can read more here https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557
npm link: https://docs.npmjs.com/cli/link
I have created a React component inside a project that I'd like to use in multiple projects. At the moment, I only care about doing this locally and for development. The React Component is rendered into the root div, the project uses webpack and babel to transpile JSX, ES6 and some ES7 features into a bundle.
I thought it would be simple to export this component such that I can simply run npm install MyComponent and begin using it in a fresh project. However, I find it isn't so straight forward. In particular, I've been reading for hours and hours and only seem to be getting more confused.
If my end goal is to keep developing 'MyComponent' in its containing project, while using 'MyComponent' in any number of other local projects, what are my options? The first thing I did was change the main key of my package.json to /src/components/MyComponent and run npm pack. This produces a tgz file I can install via its absolute filepath in other projects. However, I found that the es6 and jsx was not being transpiled and so my client projects would be unable to parse MyComponent. I then used webpack to transpile into lib/MyComponent, but when I have import MyComponent from './path/to/MyComponent-1.0.0.tgz I'd only see {} (an empty object) in the console.
Searching for solutions to my problem turn up many different approaches pulling together NPM, Grunt, Gulp, Babel, Webpack, etc.. And I am worried it will be many many more hours (days?) before I can grind that down to something understandable.
Given my requirements, what is the simplest solution I can implement to 1) compile down my React Component to the simplest to import module 2) import it into any local projects 3) continue to develop the package in the original host project and have changes easily propagate to client projects.
In general, if you're going to begin creating React components as separated packages (which is a great pattern, for all the reasons you've already mentioned) - you're going to need to get at least a bit familiar with webpack and babel. There's a ton to learn here, but let me try to point you in the right direction:
// webpack.config.js
/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
const ENVIRONMENT = process.env.NODE_ENV
const PRODUCTION = ENVIRONMENT === 'production'
const SOURCEMAP = !PRODUCTION || process.env.SOURCEMAP
const library = 'your-lib-name' // << RENAME THIS <<
const filename = PRODUCTION ? `${library}.min.js` : `${library}.js`
const plugins = []
if (PRODUCTION) {
plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENVIRONMENT),
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: { comments: false, semicolons: false },
sourceMap: SOURCEMAP,
})
)
}
module.exports = {
devtool: SOURCEMAP ? 'source-map' : 'none',
entry: `${__dirname}/path/to/your/component.js`, // << RENAME THIS <<
externals: {
'react': 'react',
'react-dom': 'react-dom',
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}],
},
output: {
filename,
library,
path: `${__dirname}/lib`,
libraryTarget: 'umd',
umdNamedDefine: true,
},
plugins,
}
I know that looks like a bunch - but it handles the majority of what you're going to want. In specific:
If you specify NODE_ENV=production when building, this will uglify/minify your package, and do some other trimming which you may want later.
Building with this script will output a sourcemap, which you can use with dev tools to inspect your minified code in the debugger window, among other things.
This marks react and react-dom as externals - which means they won't get bundled up and packaged inside your bundle. This is great - because it means you won't get 2+ copies of react's filesize just because you've imported your own component!
To use it, though, you now need some package.json love.
package.json
{
"name": "Your Name",
"version": "0.0.1",
"description": "This is my awesome react package!",
"main": "path/to/your/component.js",
"author": "Your Name",
"license": "MIT",
"repository": { /* Your Repo Info Here */ },
"dependencies": {
"any-packages-you-need-included-in-builds": "^1.0.0"
},
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"prop-types": "^15.5.10",
"react-dom": "^15.6.1",
"webpack": "^3.0.0"
},
"scripts": {
"build": "yarn prebuild && NODE_ENV=production webpack",
"prebuild": "mkdir -p ./lib && rm -rf ./lib/*"
}
}
Obviously, you can have a lot more here if you need it - such as other babel-plugin-* plugins that you use in your transpilation, other packages, etc.But this set will let your webpack build run. Note that the scripts here assume you're using yarn - so that you can run yarn build, and that you're on a posix system, for mkdir to work. If you're on windows or not using yarn, just update the scripts accordingly.
The rest is just learning to publish your package to npm or another package repository. Primarily, that's just setting the version number in package.json to something new (npm version) and then publishing (npm publish). You will have to have an npm account for this, of course - and be logged in (npm login).
Once you've published to npm you can just yarn add your-package-name.
Remember, though - we marked react and react-dom as external - so in the consuming package, you'll need to make sure they're available as window.React and window.ReactDOM - or you'll need to include the component directly from node_modules/your-package-name/path/to/your/component.js
You don't need to npm pack a package to use it. If you make your component into a git repo and put it on Github, you can use NPM to install it directly from Github by using npm install alex/mycomponent where alex is your github username and mycomponent is the repo name. Re-running that command will re-install from Github, in case you make changes to the repo.
Once you're happy with the component, you can upload it to the NPM registry to install like any other package (npm install name). Using Github at first makes it a bit easier to develop.
Webpack might not compile things from node_modules by default. Usually, packages are pre-compiled before being published anyway, but you should be able to configure webpack to build your 'packaged' component, along with the rest of your app. Maybe this will help: https://stackoverflow.com/a/38008149/7486612
In order to push react libraries into NPM, you may need some boilerplate which will install and convert many things for you (and you can still use your current react module as the main source, just follow the guides at the end of my answer, then you will surely get all the ideas)
Or you can also refer to my previous answer to a similar question:
Issue with publishing to npm
=====
I've also pushed several react libraries successfully into NPM:
https://www.npmjs.com/~thinhvo0108
=====
Your github repositories' folder structure should also look like mine:
https://github.com/thinhvo0108/react-paypal-express-checkout
=====
Useful tutorial below here:
(boilerplate source) https://github.com/juliancwirko/react-npm-boilerplate
(author's article) http://julian.io/creating-react-npm-packages-with-es2015/
Start by looking at existing component library, eg Material UI.
Specifically check out npm scripts they have (see package.json):
"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
"build:es2015modules": "cross-env NODE_ENV=production BABEL_ENV=modules babel ./src/index.js --out-file ./build/index.es.js",
"build:copy-files": "babel-node ./scripts/copy-files.js",
"build:umd:dev": "webpack --config scripts/umd.webpack.config.js",
"build:umd:prod": "cross-env NODE_ENV=production webpack --config scripts/umd.webpack.config.js",
"build": "npm run build:es2015 && npm run build:es2015modules && npm run build:copy-files && npm run build:umd:dev && npm run build:umd:prod",
That's example of very involved and high quality component library, that makes sure that regardless of your build pipeline you'll be able to use it.
Setting up build process with webpack might be cumbersome, but don't concentrate on that too much from the begining, and cover cases that are most straight forward to you.
Also check out https://storybook.js.org/ while working on your components.
I built an npm module named emeraldfw and published it. My package.json file is
{
"name": "emeraldfw",
"version": "0.6.0",
"bin": "./emeraldfw.js",
"description": "Emerald Framework is a language-agnostig web development framework, designed to make developer's lives easier and fun while coding.",
"main": "emeraldfw.js",
"directories": {
"example": "examples",
"test": "test"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EdDeAlmeidaJr/emeraldfw.git"
},
"keywords": [
"web",
"development",
"framework",
"language",
"agnostic",
"react"
],
"author": "Ed de Almeida",
"license": "MIT",
"bugs": {
"url": "https://github.com/EdDeAlmeidaJr/emeraldfw/issues"
},
"homepage": "https://github.com/EdDeAlmeidaJr/emeraldfw#readme",
"devDependencies": {
"jshint": "^2.9.4",
"mocha": "^3.3.0"
},
"dependencies": {
"jsonfile": "^3.0.0",
"react": "^15.5.4",
"vorpal": "^1.12.0"
}
}
As you may see, I declared a "bin": "./emeraldfw.js" binary, which corresponds to the application itself. The package.json documentations says this is going to create a link to the application executable at node.js bin/ directory. This worked fine, but when I install it globally (npm install emeraldfw -g) and then run it from the command line I receive an error messsage
All other node modules are working fine and my application is passing in all tests and when I run it directly inside the development directory (with node emeraldfw.js) it works really fine.
I'm not a node.js expert and after having fought this error for two days, here I am to ask for help.
Any ideas?
EDIT:
I checked the permissions for my node binary (emeraldfw.js) and it belongs to edvaldo:edvaldo, my user and group. And it is with executable permissions set. I should have no permission issues inside my own area with these settings, don't you think?
Well, shebang issue here.
Before creating npm modules, you need read every single line of it's documentation.
As it stated here you need to use shebang to let your operating system know that it should run with node instead of operating system's own script execution hosts.
Please make sure that your file(s) referenced in bin starts with
#!/usr/bin/env node, otherwise the scripts are started without the node executable!
So, by using shebang on an npm module, you tell the os to create platform specific executables which let it use node to run the script. A .cmd file on Windows for example.
Have you try to install as su?
Working in a React / Webpack project I started to have problems with the eslint library.
The eslint package is downloaded using npm and it's used to validate the project using a webpack preLoader.
preLoaders: [{
test: /\.jsx?$/,
loaders: [ 'eslint' ],
include: path.resolve(__dirname, 'app')
}]
It used to work fine until recently when I tried to git clone the same project to an other folder.
After installing the dependencies "npm install" and starting the project "npm start" the following error appeared.
ERROR in ./main.view.jsx
Module build failed: RangeError: Maximum call stack size exceeded
at keys (native)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:78:24)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:88:38)
at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14)
at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26)
# ./app.jsx 17:26-57
The strange part of all is that the old project installation still works.
The problem must be somewhere in the node_modules folder because when I copy the modules from the old installation to the new one the project suddenly works.
I did a "npm list --depth=0" on both projects and both have the same packages and versions. Why one is working and the other one not?
I guess the problem is in the eslint package because when I remove the preLoader it works again.
I'm really confused about that. Someone had that problem before?
My main.view.jsx looks like that
import React from 'react';
export default class MainView extends React.Component {
render() {
return (
<div />
);
}
}
Thanks!
I could solve the problem by myself.
Isolating everything I found out that the problem was the babel dependencies.
For some reason the combination of versions I had of babel-core, babel-loader and babel-eslint where not working properly together.
I changed the babel versions required for my project in the package.json and now everything works fine.
- "babel-core": "5.6.x",
- "babel-loader": "5.3.x",
- "babel-eslint": "3.1.x",
+ "babel-core": "5.8.x",
+ "babel-loader": "5.4.x",
+ "babel-eslint": "4.1.x",
Here my eslint dependencies
"eslint": "1.10.x",
"eslint-loader": "1.1.x",
"eslint-plugin-react": "3.10.x"
Hope the time I lost with that will help someone else!
Looking through the thread https://github.com/eslint/eslint/issues/4485, the solution now is very simply to update babel-eslint to 4.1.6. For instance, "babel-eslint": "^4.1.6". Now works :)
For some reason, I was able to fix this by just disabling a single rule:
Add this into your rules:
'no-octal-escape': 0,
if your code contains
export * from "."
remove above line