I'm setting up React for the first time following the tutorial. I created main.js and ran the various commands. The last command gives me error:
To install React DOM and build your bundle with webpack:
$ npm install --save react react-dom babel-preset-react
$ webpack
When I run webpack I receive error:
Output filename not configured
It points me to the usage docs. The usage docs tells me the command line interface expects input of the form:
webpack <entry> <output>
Obviously the command webpack as shown in the react tutorial does not meet this criteria. What did I do wrong?
Create a webpack.config.js, eg.:
module.exports = {
context: __dirname + "/app",
entry: {
jsx: './main.js',
html: './index.html'
},
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
}
Related
Module not found: Error: Can't resolve 'process/browser' in '/Users/nigelng/oxpay-merchant-portal-fe/node_modules/xlsx'
Did you mean 'browser.js'?
I have installed xlsx 0.18.5 npm package to export xlsx files, I found out that's a webpack issue (https://github.com/SheetJS/sheetjs/issues/2527), but the solutions didn't work for me.
do anyone experience the same error?
The way I fixed this was by using the package #craco/craco so you can manually change the webpack config file without ejecting create-react-app (since that is permanent). Once craco is installed create a file in the root directory named craco.config.js and then copy and paste this configuration, should fix your problem:
const webpack = require("webpack");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
}
}
};
Make sure to change your start script to "craco start" and you should be off to the races.
I'm trying to debug my android app with react native v0.66.1 and react native tools v1.8.1 in vsCode. But after running the app and attach to packager, or launch in debug mode,
I got this error com.facebook.react.commot.JavascriptException: Invalid or unexpected token.
update babel.config.js of your project : (assume your metro-react-native-babel-preset is 0.58.0)
from:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
to:
module.exports = {
presets: [['module:metro-react-native-babel-preset', {
unstable_disableES6Transforms: true
}]],
};
finally run yarn start --reset-cache to restart app.
Unable to resolve module #env from D:\react\weatho\weatho-app\App.js: #env could not be found within the project
10:import {REACT_APP_WEATHER_API_KEY} from "#env";
my env file looks like this:
REACT_APP_WEATHER_API_KEY=2607fb610e6f9fecd16c84408d0b42a2
and my Babel file looks like this:
module.exports = function(api) {
api.cache(true);
return {
plugin: ['babel-preset-expo','module:react-native-dotenv'],
}
}
and my env file is in root folder along with Appjson and few other files
You should add a plugin like this(.env file must be in the root directory)
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "#env",
path: ".env",
},
],
],
};
};
And don't forget to restart the expo start and ios/android restart the app.
If you are still getting the same issue then it can be a cache issue.
You can easily clear the babel cache by running the following command :
rm -rf node_modules/.cache/babel-loader/*
or
yarn start --reset-cache
or
expo r -c
Your babel config has 'plugin' which should be 'plugins'
yarn start --reset-cache
npm start -- --reset-cache
expo start -c
I recently try to make a boilerplate for webpack2 + babel6 + gulp + react-hot-loader project. I started by forking react-hot-loader-minimal-boilerplate. Then I added a gulpfile to it as this branch.
If you read the code, you'll find I've only added the last 1 commit, which added the gulp package, gulp file and add the npm run gulp script. You 'd want to take a look at gulpfile.babel.js, which currently looks like this:
const gulp = require('gulp');
const webpack = require('webpack');
const cfg = require('./webpack.config');
const devServer = require('webpack-dev-server');
const path = require('path');
const util = require('gulp-util');
gulp.task('dev', () => {
cfg.plugins = [
new webpack.HotModuleReplacementPlugin(),
];
cfg.entry = {
'app': [
'babel-polyfill',
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'./src/index',
],
};
new devServer(webpack(cfg), {
//contentBase: path.join(__dirname, 'dist'),
hot: true,
historyApiFallback: true,
//publicPath: cfg.output.publicPath,
stats: {
colors: true,
},
}).listen(8080, 'localhost', function (err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
util.log(`'${util.colors.cyan('dev:server')}' http://localhost:8080/webpack-dev-server/index.html`);
});
});
Supposedly, the command npm run dev and npm run gulp should have the same effect. But in reality, the gulp command is not working.
If I change my React code, the code in browser should update accordingly.
The console log for code update in npm run dev:
Instead, although the browser did get signal from webpack-dev-server for the update, the DOM is not updated along with the signal.
The console log for code update in npm run gulp:
Any suggestion on how to fix this boilerplate?
I am using webpack for react(es6) project.
My problem
I have built react app with ES6, so everywhere i have used import keyword for dependency. Now for server side rendering i am using NodeJS so its not support import yet. For this i have to use require instead of import.
Now i have used webpack for bundling my app, but it always generate final bundle file (single.bundle.js), That's why i am not able to import chunk of transpiled code for server side rendering.
Solution
If it is possible to transpile every file (src to dist), then i can import this es5 file into nodejs server code.
Question
Is this possible with webpack to transpile whole folder with same out put rather than bundle file ?
Otherwise i have to use grunt or gulp. :(
You can use webpack for server too. It will transpile to webpack server bundle only your specific code containing react and excluding node_modules by externals option. Here is example of webpack.config.js for server side
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: './src/server.js',
output: {
path: __dirname,
filename: 'server.js'
},
target: 'node',
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
externals: nodeModules,
}