4

I am having trouble while trying to import a component with React.

app.js:1 Uncaught ReferenceError: require is not defined at :5:12 at i (babel.min.js:24) at r (babel.min.js:24) at e.src.n.(:3000/anonymous function).l.content (https://unpkg.com/[email protected]/babel.min.js:24:30503) at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

After some research I found that the error was caused because the browser doesn't understand import so I tried to install webpack, It didn't work, so I made some other research, finally I had to disable the windows firewall, then I was able to run the npm install, and I got this :

  • [email protected] added 157 packages from 127 contributors and audited 36574 packages in 18.717s found 31 high severity vulnerabilities run npm audit fix to fix them, or npm audit for details

But nothing appears into my project.

There is all my project down below :

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="app"></div> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="./src/components/app.js" type="text/babel"></script> </body> </html>

/src/components/com.js

class Com extends React.Component { render() { return <div> <h1>Hey this is my com component</h1> </div> } } export default Com

/src/components/app.js

import Com from './com.js' class App extends React.Component { render() { return <div> <h1>Hey this is my app component</h1> <p>{Math.random() * 10}</p> <Com /> </div> } } ReactDOM.render(<App />, document.getElementById('app'))

Hope someone can help me figure it out.

(I would like to say Hello or Hi at the beginning of my question but I don't know why I can't edit it, so Hello here.)

EDIT

I finally have webpack working.

webpack.config.js

const webpack = require("webpack") const path = require("path") let config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "./public"), filename: "./bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: [ '@babel/preset-env', '@babel/preset-react' ] } } ] } } module.exports = config

I don't know if it is correct, but I do have Babel working, and I can import component correctly.

Improve this question
5
  • Can we have you webpack configuration? Commented Jan 11, 2019 at 18:05
  • Or maybe i suggest create-react-app if you dont wanna struggle with this Commented Jan 11, 2019 at 18:06
  • I don't have any webpack because I didn't get it to work, and I was using creat-react-app before but the cdn are more efficient in my case so I would like to use them. Commented Jan 11, 2019 at 18:08
  • But but but but.... whatever do you mean more efficient. It is a development environment, your "exported" production code compiles itself to a single script file which you will host on your server, there is no CDN, no dependancies, no nothing. A single static script file for production. Commented Jan 11, 2019 at 18:12
  • cdn load faster than files on my server, and I only have to serve few ko, not 400ko, so yes it is more efficient in my case. Commented Jan 11, 2019 at 18:13

1 Answer 1

Reset to default
1

Webpack builds one js bundle file, so you need to get rid of the cdn's in the html file. You can add them into the webpack.config file with plugins. 

npm install webpack-cdn-plugin --save-dev

https://www.npmjs.com/package/webpack-cdn-plugin

- EDIT -

You could do npx create-react-app your-app

or

Or if you just want react and babel you could use npm.

Make sure you have a package.json.

npm init

add react.

npm install react react-dom --save-dev

https://www.npmjs.com/package/react-dom

add babel.

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

https://babeljs.io/setup#installation

You can find the dependencies in your package.json.

Then reconfigure webpack.config.js.

module.exports = { entry: './src/app.js', output: { path: path.join(_dirname, 'public'), filename: 'bundle.js' module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react' ] } } } ] } };

https://webpack.js.org/configuration/

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I googled the webpack-cdn-plugin and it seems to generate a index.html with the cdn into it, so I don't really understand why I can't do it by myself. What I need is a webpack.config.js to handle React.
Well you have three options here. If you want to use the cdn's you have my first answer. If you want the easiest method I edited my answer and shows you how to install create-react-app. The final answer will get you to use react and babel with webpack and it shows you how to set them up with the webpack.config.js file configured. The final option is the most confusing but will give you the most flexibility and customization for your app.
I edited my post with my webpack.config.js I don't know if you were notified when I did that
What did you change in your code that made it work? Did you get rid of the cdn's in your Html file? What did you add into Webpack.config.js file?
I finally made webpack working, so I just created the webpack.config.js which is in my post, and that's it (also remove the babel cdn and I installed it via npm as you said)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.