Related
I'm having an issue where babel-loader doesn't appear to be able to handle any JSX code. While I'm familiar with how the higher end code of the site works, I didn't set up the environment, which is how I got in this situation!
I'm trying to reverse engineer the babel, webpack, neutrino config so I can use it elsewhere, and so I can do some package updates.
Error in terminal after running npm run develop
ℹ ｢wds｣: Project is running at http://localhost:5000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/xxx/Documents/GitHub/React-Boilerplate
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Time: 6205ms
ERROR in ./src/index.js 7:16
Module parse failed: Unexpected token (7:16)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import './globals/css/variables.css';
| import './globals/css/global.css';
> ReactDOM.render(<div>text in here</div>, document.getElementById('root'));
ℹ ｢wdm｣: Failed to compile.
So the code is hanging as soon as the babel-loader sees JSX code.
package.json
{
"name": "xxx",
"version": "0.0.0",
"description": "xxx",
"scripts": {
"develop": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"generate": "plop --plopfile ./generators/plopfile.js",
"clean": "rm -rf ./dist"
},
"author": "xxx",
"license": "xxx",
"private": true,
"dependencies": {
"#fortawesome/free-solid-svg-icons": "^5.12.1",
"#material-ui/core": "^4.9.13",
"#material-ui/icons": "^4.11.2",
"#tomorrow/bloom": "^0.1.2",
"draft-js": "^0.11.4",
"draftjs-to-html": "^0.9.1",
"eslint": "^5.16.0",
"html-to-draftjs": "^1.5.0",
"json-query": "^2.2.2",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"postcss": "^8.2.4",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-draft-wysiwyg": "^1.14.4",
"react-hot-loader": "^4.8.0",
"react-promise-tracker": "^2.0.5",
"react-router-dom": "^4.3.1",
"react-select": "^2.4.2",
"react-spinners": "^0.8.3",
"shortid": "^2.2.15"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/preset-env": "^7.12.11",
"#neutrinojs/react": "^9.0.0-rc.0",
"babel-core": "^6.0.20",
"babel-loader": "^8.2.2",
"babel-merge": "^2.0.1",
"babel-plugin-react-css-modules": "^5.2.3",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.0.15",
"dotenv": "^7.0.0",
"neutrino": "^9.0.0-rc.0",
"plop": "^2.3.0",
"postcss-aspect-ratio": "^1.0.2",
"postcss-custom-media": "^7.0.7",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-lh": "^2.0.2",
"postcss-loader": "^3.0.0",
"postcss-nesting": "^7.0.0",
"postcss-preset-env": "^6.6.0",
"postcss-responsive-type": "^1.0.0",
"postcss-subgrid": "^0.2.1",
"prettier": "^1.16.4",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "^2.1.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.1"
}
}
webpack.config.js
const neutrino = require('neutrino');
module.exports = neutrino().webpack();
.neutrinorc.js
const { resolve } = require('path');
const babelMerge = require('babel-merge');
// require('dotenv').config();
const react = require('#neutrinojs/react');
module.exports = neutrino => {
const { config } = neutrino;
// Configure react preset
neutrino.use(react, {
html: {
title: 'Boilerplate'
},
hot: true,
devServer: {
https: true,
port: 3000
},
style: {
loaders: ['postcss-loader']
}
});
// Customize Babel
config.module
.rule('compile')
.use('babel')
.tap(options =>
babelMerge(
{
plugins: [
['#babel/plugin-proposal-decorators', { legacy: true }],
['#babel/plugin-proposal-class-properties', { loose: true }],
[
'babel-plugin-react-css-modules',
{
generateScopedName: '[path]--[local]', //--[hash:base64:5]' // took this out as code wasn't working locally on PC,
webpackHotModuleReloading: false, //can be true in dev if
autoResolveMultipleImports: true
}
]
]
},
options
)
);
// Customize CSS modules
config.module
.rule('style-modules')
.use('css-modules')
.tap(options =>
Object.assign(
options,
(options.localIdentName = '[path]--[local]') //--[hash:base64:5]'// took this out as code wasn't working locally on PC,
)
);
// Set webpack options
config.output.path(resolve('./public'));
};
I suspect I need to add a new plugin to the babelMerge function - any help is wildly appreciated!
Oh, and here's src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import App from './containers/App';
import '#tomorrow/bloom/bloom.css';
import './globals/css/variables.css';
import './globals/css/global.css';
ReactDOM.render(<div>text in here</div>, document.getElementById('root'));
#neutrinojs/style-loader is Neutrino middleware for loading and importing stylesheets from modules.
I did not find style-loader middleware installed in your dev dependency list. You can try it.
I was building a react project and during the final "npm start" stage, I got many errors:
please help me fix this.
C:\Users\Intel\Desktop\burger-project>npm start
burger-project#0.1.0 start C:\Users\Intel\Desktop\burger-project
node scripts/start.js
Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! burger-project#0.1.0 start: node scripts/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the burger-project#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Intel\AppData\Roaming\npm-cache_logs\2020-09-22T17_01_17_645Z-debug.log
Also, this my package.json file of the project
{
"name": "burger-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
"axios": "^0.19.2",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "^26.3.0",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "^26.4.2",
"npm-upgrade": "^2.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"prop-types": "^15.7.2",
"raf": "3.4.0",
"react": "^16.8.0",
"react-dev-utils": "^5.0.2",
"react-dom": "^16.8.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-plugin-add-module-exports": "^1.0.2",
"css-loader": "^4.2.1",
"html-webpack-beforehtml-plugin": "^1.0.0",
"preload-webpack-plugin": "^3.0.0-beta.3",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
this is code of start.js
//'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web sever.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {
process.on(sig, function() {
devServer.close();
process.exit();
});
});
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
Probably the best way in your case is to just create a new project using
npx create-react-app your-project-name and moving all your files from src to the new project src and also copying all of your dependencies from package.json to the new project package.json.
for more on Create React App
App is based on 2-year old tutorial at https://www.youtube.com/watch?v=82tZAPMHfT4
Since the tutorial is over 2 years old, I've made config changes that diverge from what is brought up in the tutorial, but I don't seem to be making any headway.
package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log",
"webpack": "node_modules/.bin/webpack -d"
},
"engines": {
"node": "8"
},
"dependencies": {
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"consolidate": "^0.15.1",
"es6-promise": "^4.2.8",
"express": "^4.17.1",
"firebase": "^7.5.0",
"handlebars": "^4.5.3",
"isomorphic-fetch": "^2.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"braces": "^3.0.2",
"firebase-admin": "^8.8.0",
"firebase-functions": "^3.3.0",
"firebase-functions-test": "^0.1.6",
"firebase-tools": "^7.9.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"private": true
}
webpack.config.js
let path = require("path");
let config = {
entry: "./index.js",
module: {
rules: [
{
test: /\.js?/,
loader: "babel-loader",
query: {
presets: ["#babel/react"],
},
},
],
},
output: {
filename: "bundle.js",
path: __dirname + "/public",
},
};
module.exports = config;
.babelrc
{
"presets": ["#babel/preset-react", "#babel/preset-env"],
"compact": false
}
After running npm run webpack, lots of errors of the form:
ERROR in ./node_modules/#google-cloud/firestore/build/protos/protos.json
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/tm/devDir/fbHosting/functions/node_modules/#google-cloud/firestore/build/protos/protos.json: Unexpected token, expected ";" (2:10)
1 | {
> 2 | "nested": {
| ^
3 | "google": {
4 | "nested": {
5 | "firestore": {
And/or:
ERROR in ./node_modules/#google-cloud/firestore/build/src/v1/firestore_admin_client_config.json
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/tm/devDir/fbHosting/functions/node_modules/#google-cloud/firestore/build/src/v1/firestore_admin_client_config.json: Unexpected token, expected ";" (2:14)
1 | {
> 2 | "interfaces": {
| ^
3 | "google.firestore.admin.v1.FirestoreAdmin": {
4 | "retry_codes": {
5 | "idempotent": [
try upgrading I think its still looking for old semi colon format configuration.
npm install firebase-functions#latest --save
npm install firebase-admin#latest --save-exact
npm install -g firebase-tools
this is wrong
/Users/tm/devDir/fbHosting/functions/node_modules/#google-cloud/firestore/build/src/v1/firestore_admin_client_config.json: Unexpected token, expected ";" (2:14)
try
npm install #google-cloud/firestore
Version
2.6.1
Trying to implement google closure compiler to existing angularjs project. When i build application i get error java.lang.RuntimeException: Unhandled flag: outputManifest.
Here is package.json:
"devDependencies": {
"angular-mocks": "^1.7.8",
"expect.js": "^0.3.1",
"google-closure-compiler": "^20190909.0.0",
"google-closure-deps": "^20190909.0.0",
"google-closure-library": "^20190909.0.0",
"karma": "^4.3.0",
"karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4",
"less": "^3.10.3",
"mocha": "^6.2.1",
"ng-annotate": "1.2.2",
"sinon": "^7.5.0"
},
"dependencies": {
"angular": "^1.7.8",
"angular-animate": "^1.7.8",
"angular-translate": "^2.18.1",
"bootstrap": "^3.4.1",
"cesium": "^1.62.0",
"jquery": "^3.4.1",
"ol": "^6.0.1",
"olcs": "^2.9.0",
"proj4": "^2.5.0",
"url-polyfill": "^1.1.7"
}
Here is error:
{ Error: java.lang.RuntimeException: Unhandled flag: outputManifest
at mQ.QN [as Dg] (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8941:25462)
at mQ.TN [as Fg] (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8941:25657)
at mQ.ON (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:2802:48)
at mQ.WN (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:966:19)
at new mQ (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:967:19)
at SHd (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8802:132)
at DQ (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:2286:29)
at GQ (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:3753:44)
at /vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:3971:46
at CompilerJS.run (/vagrant/source/node_modules/google-closure-compiler/lib/node/closure-compiler-js.js:54:17)
at getFilesFromStdin.then.inputFiles (/vagrant/source/node_modules/google-closure-compiler/cli.js:164:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
'__java$exception':
{ g: null,
e: 'Unhandled flag: outputManifest',
backingJsObject: [Circular] } }
According to Closure Compiler's Flags and Option documentation:
--output_manifest VAL [is] Not supported by the JavaScript version
While I do not see closure-compiler-js in your package.json, I do see in your error report that you are using it to compile.
at mQ.TN [as Fg] (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8941:25657)
^^^^^^^^^^^^^^^^^^^^^^^^^^
So the solution to this would be either to stop using the JS version or start using flags that it supports.
I have 2 modules.
react native-app
react native storybook
Download Source Code local.properties put your android sdk path
Getting below error when I run npm start
Looking for JS files in
/home/company/Desktop/projects/someapp/vendorapp
Loading dependency graph...(node:9505) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
Duplicate module name: react-animated
Paths: /home/company/Desktop/projects/someapp/vendorapp/node_modules/storybook/node_modules/react-native/Libraries/Animated/release/package.json collides with /home/company/Desktop/projects/someapp/vendorapp/node_modules/react-native/Libraries/Animated/release/package.json
This error is caused by `hasteImpl` returning the same name for different files.
at setModule (/home/company/Desktop/projects/someapp/vendorapp/node_modules/metro/node_modules/jest-haste-map/build/index.js:569:17)
at workerReply (/home/company/Desktop/projects/someapp/vendorapp/node_modules/metro/node_modules/jest-haste-map/build/index.js:641:9)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:9505) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:9505) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:9505) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
Duplicate module name: react-animated
Paths: /home/company/Desktop/projects/someapp/vendorapp/node_modules/storybook/node_modules/react-native/Libraries/Animated/release/package.json collides with /home/company/Desktop/projects/someapp/vendorapp/node_modules/react-native/Libraries/Animated/release/package.json
This error is caused by `hasteImpl` returning the same name for different files.
at setModule (/home/company/Desktop/projects/someapp/vendorapp/node_modules/metro/node_modules/jest-haste-map/build/index.js:569:17)
at workerReply (/home/company/Desktop/projects/someapp/vendorapp/node_modules/metro/node_modules/jest-haste-map/build/index.js:641:9)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:9505) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
Not able to figure out tried lot of other stackoverflow links but none of them solved. Below are the details of package.json file
Let me know if any other details are needed.
react-native storybook Package.json
{
"name": "storybook",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"storybook": "storybook start"
},
"dependencies": {
"native-base": "^2.8.2",
"react": "16.6.3",
"react-native": "0.58.3",
"react-native-material-textfield": "^0.12.0",
"toggle-switch-react-native": "^2.0.2"
},
"devDependencies": {
"#storybook/addon-actions": "^4.1.2",
"#storybook/addon-links": "^4.1.2",
"#storybook/addons": "^4.1.2",
"#storybook/react-native": "^4.1.2",
"babel-core": "^6.26.3",
"babel-jest": "23.6.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-runtime": "^6.26.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"prop-types": "^15.6.2",
"react-dom": "16.6.3",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
react native app
{
"name": "vendorapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.3",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"storybook": "../storybook"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}