I am using webpack and babel. I have a file like this:
import React from 'react';
import ReactRedux from 'react-redux';
var Layout = React.createClass({
render(){
return (<div>Markup</div>);
}
});
function mapStateToProps(state, action) {
return state;
}
export default ReactRedux.connect(mapStateToProps)(Layout);
For some reason when I run webpack, after compiling, it runs with this error: Cannot read property 'connect' of undefined. Not sure why it would fail at getting ReactRedux object. My webpack config is like this:
var compiler = webpack({
entry: "./dist/runner.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015', 'react']
}
}
]
},
devtool: 'source-map',
output: {
filename: "public/dist/bundle.js"
}
});
This is because the react-redux package doesn't have a default export on the module. You can access the connect function manually like:
import { connect } from 'react-redux';
...
export default connect(mapStateToProps)(Layout);
Related
I had a working storybook but had to update to webpack5 to try and fix a sass issue... but that is now breaking the stories and I am not sure how to fix it.
I have a main.js on my <root>/.storybook folder:
const path = require('path');
module.exports = {
core: {
builder: 'webpack5',
},
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'fonts/'
}
}
]
});
config.module.rules.push({
test: /\.(js|ts|tsx)$/,
use: [
{
loader: 'babel-loader',
}
],
});
config.module.rules.push(
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../")
});
config.resolve.extensions = ['.ts', '.tsx', '.js'];
return config;
},
stories: ['../src/stories/storybook.js'] // <-- this used to work
};
My <root>/src/stories/storybook.js:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { addDecorator } from '#storybook/react';
import { withA11y } from '#storybook/addon-a11y';
import StyleguideStory from './styleguide';
import './reset.css';
addDecorator(withA11y);
StyleguideStory('Styleguide');
And Basically styleGuide is a folder (<root>/src/stories/styleguide) with this index inside:
import Story1 from './Story1';
...
export default function StyleguideStory(nameRoot) {
Story1(nameRoot);
...
}
My stories are normally folders (<root>/src/stories/styleguide/<folders>) with an index:
import React from 'react';
import { storiesOf } from '#storybook/react';
import StoryExample from './StoryExample';
import StoryDoc from './StoryDoc';
export default function Story1(nameRoot) {
const story = storiesOf(`${nameRoot}/Story1`, module);
story.add('Examples', () => <StoryExample />);
story.add('Props', () => <StoryDoc />);
}
And each story is a normal function component... these all used to work before going to webpack, but I am not sure if I configured it wrong, or if this structure is not supported anymore....
I am learning how to make custom component or library and publish on npm. I found a free tutorial here:
https://www.udemy.com/course/your-custom-react-component/learn/lecture/13561884#overview
github link
https://github.com/davidcsejtei/custom-button
But I am facing one problem .he created a simple component custom button
import React, { Component } from 'react';
import '../style/button.scss';
export default class CustomButton extends Component {
render() {
return(
<button>Custom button</button>
);
}
}
but when we create a build it include react library in his build so now it's size increase to 7.5kb.It should be below 2kb as it is small component and it is used in another project
In other ways custom component use react dependency from there parent component . Can we remove this react dependency in build ?
Here is the webpack config:
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'custom-button.js',
library: 'custom-button',
libraryTarget: 'umd',
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: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
optimization: {
minimizer: [new UglifyJsPlugin()]
},
plugins: [
new CleanWebpackPlugin(['dist'])
]
}
any update ?
In order to exclude react out of your build with webpack, you just simply declare externals in your configuration like below:
externals: {
react: "react",
}
As you output with your umd module above, it will require react as the dependency in the build which means it will consume the react at the parent (consuming) repo:
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
// ...
I am trying to use koajs and reactjs to make a boilerplate application, to use later as a starting point for projects.
I am trying to use webpack as a means to compile my react jsx files, but I am getting this error:
ERROR in ./src/js/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from "./components/App";
|
> ReactDOM.render(<App />, document.getElementById('app'));
const path = require('path');
module.exports = {
mode: "development",
entry: './src/js/index.js',
loader: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
},
output: {
path: path.join(__dirname, '/src/js'),
filename: 'index_bundle.js'
}
}
index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById('app'));
module.exports = {
mode: "development",
entry: './src/js/index.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
},
output: {
path: path.join(__dirname, '/src/js'),
filename: 'index_bundle.js'
}
}
I'm trying to learn React with node.js following an online tutorial https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm. When I run the Main.js I got the following error:(function (exports, require, module, __filename, __dirname) { import React from 'react';
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
....
Here's the main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
And the app.jsx:
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Webpack.config.js:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
I searched for answers. Some said to use 'require' rather than import. I didn't quite understand how to use it or whether it's related to this issue. Can someone please help to explain? Many thanks in advance!
I just simply want to export and import a child component into my rot-directory (App.js) and render it out in the browser, but I get this error message in terminal "Module not found: Error: Cannot resolve 'file' or 'directory'". I don't understand what I typed wrong or why I cannot import my child to my App.js.
Have tried to solve this problem but with no results. I've been testing this in my "App.js" to get a more explicit name but not working:
import { ContactsList } from './ContactsList';
I've also tried typing this in my "ContactsList.js" but with no result:
export default class ContactsList extends React.Component {}
I'am a beginner so excuse me for my knowledge but I really want to learn this and the power of react. Please help me for better understanding!
--------App.js---------
import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';
class App extends React.Component {
render() {
return (
<div>
<h1>Contacts List</h1>
<ContactsList />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
--------ContactsList.js---------
import React from 'react';
import ReactDOM from 'react-dom';
class ContactsList extends React.Component {
render() {
return (
<ul>
<li>Joe 555 555 5555</li>
<li>Marv 555 555 5555</li>
</ul>
)
}
}
export default ContactsList;
--------webpack.config.js---------
module.exports = {
entry: './src/App.js',
output: {
path: __dirname,
filename: 'app.js'
},
module: {
loaders: [{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
In your ContactsList.js file, use a <div> to wrap the <ul>
Also in your webpack config file. Can you try to use loader : "babel-loader" instead of loader: 'babel'(Don't forget to install the babel-loader package)
Also remove the query part and try to create a separate .babelrc file with the following settings:
{
"presets" : [
"react",
"es2015"
]
}
Hope this can solve your problem
According to es6 module mechanism the default module should be
imported without {}
import ContactsList from './ContactsList';
and export like
export default class ContactsList extends React.Component {}
But I guess you are trying babel on .jsx extension however it seams
you are using ContactsList.js
Just change the to .jsx to .js in
--webpack.config.js
module.exports = {
entry: './src/App.js',
output: {
path: __dirname,
filename: 'app.js'
},
module: {
loaders: [{
test:/\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
Hope it works
You need to do some changes on webpack.config.js file. first replace
test:/\.jsx?$/,
with
test: /\.(js|jsx)$/,
Secondly import modules as follows
import ContactsList from 'path-of-the-file';
But you need to provide the actual path. to get the path correct there are many plugins available depending on the text editors we use. i am using https://github.com/sagold/FuzzyFilePath