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
Related
As soon as import Effect Composer into an active document, I get this error message. Could there be a possibility of my model/material causing this?? I am not even using the Effect Composer in Script. Or could it be that I need some kind of background??
*./node_modules/screen-space-reflections/dist/index.js 675:33
Module parse failed: Unexpected token (675:33)
You may need an appropriate loader to handle this file type.
| var boneMatrices = material[boneMatricesName];
|
if (material[boneMatricesName]?.length !== skeleton.boneMatrices.length) {
| delete material[boneMatricesName];
| boneMatrices = new Float32Array(skeleton.boneMatrices.length);*
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import './styles.css'
import { EffectComposer } from '#react-three/postprocessing'
//I just inserted it here to see if this causes the failure and it does
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Have you tried to install the es2015 preset??
REF: "You may need an appropriate loader to handle this file type" with Webpack and Babel
npm install babel-preset-es2015
You need to install the es2015 preset:
npm install babel-preset-es2015
and then configure babel-loader:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
Maybe you need to add the file-loader under your modules.
https://www.npmjs.com/package/file-loader
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};
I am setting up webpack and react in a SpringMVC webapp and I'm getting this error when hitting my /index page.
The relevant controller method is here
#RequestMapping("/index")
public ModelAndView index(final HttpServletRequest request) {
return new ModelAndView("index");
}
The template at src/main/resource/templates/index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
</head>
<body>
<span>React Content Below:</span>
<div id="content"/>
</body>
<script type="text/javascript" src="http://localhost:3000/dist/app.js">
</script>
</html>
Now onto the meat. My webpack.config.js looks like this
// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');
const webpack = require("webpack");
module.exports = {
mode: 'development',
entry: './src-js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
devServer: {
open: true,
host: 'localhost',
port:3000
},
externals: {
'react': 'React'
},
module: {
rules: [
{
test: /\.js|jsx$/,
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
]
}
},
{
test: /\.css$/i,
use: ['style-loader','css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
and my ./src-js/app.js looks like this.
import * as ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello, world</h1>, document.getElementById('content'));
I later ammended app.js to look like this
import * as React from 'react';
import * as ReactDOM from 'react-dom'
class Component extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
return <h1>Hello, world</h1>
}
}
ReactDOM.render(<Component/>, document.getElementById('content'));
This works for now but long term I would prefer to not need to import React from this file and wrap everything in a Component.
Adding import React from 'react' to the top of app.js has no effect and neither does var React = require('react'). I'm assuming I'm just missing something in my webpack config but I can't seem to find what, anyone know why this is happening?
In the webpack documentation (https://webpack.js.org/configuration/externals/) it looks like there are no quotes before the colon:
externals: {
react: 'React'
},
A few lines below (https://webpack.js.org/configuration/externals/#object) you can find react in lowerCase:
externals: {
react: 'react'
},
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 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
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/