I have webpack config
{
// ...
module: {
rules: [
{
resource: {
not: [/node_modules/, /raw-loader/],
and: [/\.js$/]
},
loader: 'babel-loader'
}
]
}
}
Some component
import React from 'react';
import { H1 } from '../../../components/Typography';
const Example = () => {
return <H1>H1 — Header</H1>;
};
export default Example;
And file that imports this example component
import ExampleH1Code from 'raw-loader!./examples/h1';
import ExampleH1 from './examples/h1';
Babel applies to both ExampleH1 and ExampleH1Code. But i want ExampleH1Code to be raw ES6 text ExampleH1 working component to render on page.
Is it possible? Thanks
Related
I'm trying to bundle some React components with webpack.
But when I launch webpack --mode=development, i get this error :
Module parse failed: Unexpected token (6:4)
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
| const OwnButton = () => {
| return ( <Button color='secondary' variant='outlined'
This is my webpack config :
const path = require('path');
module.exports = {
entry: './src/app.js', // relative path
output: {
path: path.join(__dirname, 'public'), // absolute path
filename: 'js/bundle.js' // file name
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
This is my app.js config :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '#material-ui/core/Button';
import OwnButton from './Components/OwnButton';
const template = <Button>Hello from react jsx</Button>;
ReactDOM.render(template, document.getElementById('root'));
ReactDOM.render(<OwnButton/>, document.getElementById('React-OwnButton'));
And the wanted component (index.jsx) :
import Button from '#material-ui/core/Button';
const OwnButton = () => {
return (
<Button color='secondary' variant='outlined'>
Hello from my own component
</Button>
);
};
export default OwnButton;
And my .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
I don't understand how the call l.6 on app.js can work but not the on index.jsx l.6.
Where must I put the loader for this, in babel?
The problem is that you configured the Babel Loader to only intervene for .js files.
Try changing: test: /\.js$/ -> test: /\.((js)|(jsx))$/
This will make the loader work for .jsx files too.
I am using scss and css in my project . I have two file styles.css and styles.css.I imported both file in _app.js
import "../styles.scss";
import Head from "next/head";
import React from "react";
import App from "next/app";
import "../styles.css";
in style.css
a {
color: red;
}
and in my styles.scss
body {
background-color: aqua
}
but background color is not set .I am not sure why it is not set. I also using scss loader to compile my scss file.
here is my code
https://codesandbox.io/s/sharp-jennings-upb7y?file=/styles.scss:0-33
NOTE ::To run this project you need to create new terminal and run a command npm run dev. because it run on 3004 port
my webpack-config
const withSass = require("#zeit/next-sass");
module.exports = (phase, { defaultConfig }) => {
return withCss(
withSass({
webpack(config, { isServer }) {
config.module.rules.push({
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: "sass-loader",
options: {
additionalData: `$public_font_url: ${process.env.NEXT_PUBLIC_FONTS};`
}
}
]
}
]
});
return config;
}
})
);
};
Here is the solution, you must use the Head tag provided by next.js, there is no problem in your config file
https://codesandbox.io/s/relaxed-sea-khlgr?file=/pages/index.js
I have just began learning React, and have stumbled upon this error while trying to build using webpack.
Module not found: Error: Can't resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
My webpack.config.js:
const path = require('path');
module.exports = {
entry: {
index: '.src/index.js',
js: './src/js/index2.js',
react: './src/components/App.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
}
]
}
};
My Home.js:
const Home = () => {
return <h1>Home</h1>
}
export default Home
This is how I've imported Home in App.js:
import { BrowserRouter, Route, Switch , Link} from 'react-router-dom';
import Home from 'Home';
import About from 'About';
I came across few questions on here, which suggested adding an empty index.js in src folder, but that too didn't work.
your import is not correct
import Home from 'Home';
import About from 'About';
you need to specify the path and of the file, for example:
import Home from './src/components/Home.js';
home.js is the file where you exported your component
I've created React application and I need to generate embed code to other websites. It's large app where I want to do only one component as a widget for other domains. I have read Writing embeddable Javascript plugin with React & Webpack and How to embed react component on other domains?. I set my webpack, but still can't render the widget on another domain.
This widget should:
be available via <script> tag, not iframe
show only one part of the app (path /referral), but not all app
The widget is a button and popup, which displays by click on the button.
Here is my webpack.config.js in client folder:
const path = require('path');
const bundleOutputDir = './referral';
const env = require('yargs').argv.env;
module.exports = env => {
const isDevBuild = !(env && env.prod);
if (env === 'build') {
mode = 'production';
} else {
mode = 'development';
}
return [
{
mode: mode,
entry: './src/components/early-referrals/Referral.js',
output: {
filename: 'widget.js',
path: path.resolve(bundleOutputDir),
library: 'Referral',
libraryTarget: 'umd',
umdNamedDefine: true
},
devServer: {
contentBase: bundleOutputDir
},
module: {
rules: [
{ test: /\.html$/i, use: 'html-loader' },
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader' + (isDevBuild ? '' : '?minimize')
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /(\.jsx|\.js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'#babel/env',
{
targets: {
browsers: ['ie 6', 'safari 7']
}
}
]
]
}
}
}
]
}
}
];
};
Here is component RegisterReferral.js, which is entry point in webpack:
import PopupRef from '../popup/PopupRef';
const RegisterReferral = ({
...
}) => {
const [...] = useState();
useEffect(() => {
...
}, []);
return (
<div>
// some styles for button that displays popup
<PopupRef />
</div>
);
};
const mapStateToProps = state => ({
...
});
export default connect(
mapStateToProps,
{ ... }
)(RegisterReferral);
PopupRef.js is a component with popup, which should displays on other websites within the button.
In the App.js, I have the route for this component that I want to create as an embeddable:
<Route exact path="/referral" component={RegisterReferral} />
And this is a way how I paste the code on another domain:
// the URL in script is an URL of bundle file from webpack
<html>
<head>
<script src="http://example.com/client/referral/widget.js" type="text/javascript"></script>
</head>
<body>
<p>Another website</p>
<div id='app'></div>
</body>
</html>
Also, I've tried to do entry point in webpack.config.js with Referral.js. And here is this component:
// Referral.js
import React from 'react';
import { render } from 'react-dom';
import App from './RegisterReferral.js';
render(<App />, document.getElementById('app'));
// At this case, webpack.config.js has 2 changes:
entry: './src/components/early-referrals/Referral.js',
output: {
...
library: 'Referral',
},
Nothing works. My component doesn't display on other websites.
Please help me to figure out what's wrong and how to embed one component (not all app) from React app on other websites.
Assume that you correctly config your webpack to bundle react js code
This is how I render the component in any page I want
Assume that I have this component
import React, {Component} from "react";
import {render} from "react-dom";
class LoginForm extends Component { }
render(<LoginForm/>, document.getElementById("loginForm")); // use render method
Edit:
Just saw your code I think you need also change the id in index.html
<div id="root"></div>
to
<div id="referral"></div>
I am trying to set up react storybook with my meteor 1.4 project that has the package twbs:bootstrap3 and some custom styles.
After reading the info from the link to set up styles here I have the following code:
const path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.less?$/,
loader: ["style", "css", "less"],
include: path.resolve(__dirname, '../'),
},
{
test: /\.css?$/,
loader: ["style", "raw"],
include: path.resolve(__dirname, '../'),
},
}
}
Here is my story
import React from 'react';
import { storiesOf, action } from '#kadira/storybook';
import { styles } from './shared';
import HomeSearch from '../features/Search/components/HomeSearch/HomeSearch.jsx';
storiesOf('HomeSearch', module)
.add('normal', () => {
return getItem();
});
function getItem() {
return <HomeSearch />
}
But I am not sure how to import those "packed" styles into the stories.
If the CSS is pre-compiled, and global, you can add the tags in a custom preview-head.html file. see: https://storybook.js.org/configurations/add-custom-head-tags/
If the CSS is non global, or needs to be processed, you need to add the correct loaders to the custom webpack config. see https://storybook.js.org/configurations/custom-webpack-config/