webpack : Uncaught ReferenceError: require is not defined
uncaught referenceerror: require is not defined react
webpack-node-externals
referenceerror: require is not defined nodejs
uncaught referenceerror: require is not defined axios
jest referenceerror: require is not defined
webpack target
angularjs referenceerror: require is not defined
This error comes when in webpack target = node
but i have done target=web
(default)
also i am not loading reactjs externally
this error comes on loading app in browser
what i am doing wrong ?
In Console
File
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); const nodeExternals = require('webpack-node-externals'); const config = { target: 'web', externals: [nodeExternals()], entry: './src/index.js', output: { filename: '[name].bundle.js', path: __dirname + '/build' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.(png|svg|jpe?g|gif)$/, use: [{ loader: 'file-loader', options: { name: '[path][name].[ext]' } } ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] } ] }, devtool: 'inline-source-map', plugins: [ new HtmlWebpackPlugin({ title: 'Instarem.com' }) ] }; module.exports = config;
.babelrc using
babel-preset-env
{ "presets": [ "react", [ "env", { "targets": { "browsers": ["last 2 versions"] }, "debug": true, "modules": "commonjs" } ] ], "plugins": [ "transform-object-rest-spread", "transform-class-properties" ] }
thanks :)
I found Clue
In facebook's create react app generator bundle it shows
module.exports = __webpack_require__(/*! ./lib/React */ "./node_modules/react/lib/React.js");
but in my case it shows only
module.exports = require("react");
You should not use
externals: [nodeExternals()],
in web app. According to https://github.com/liady/webpack-node-externals it is only for backend. Since you use nodeExternals
in web app you get CommonJS modules, that expects built in node require
function. So just remove it to fix error.
Uncaught ReferenceError: require is not defined · Issue #17 · liady , When I add this to my commonconfig in webpack, it throws this error. I can't understand why is it occurring or how to solve this. Any help will be It will typically be the value of the entry: key in the WebPack config with -bundle appended. If you’re not doing explicit chunking, your entry chunk should be both an initial and entry chunk and have the WebPack runtime in it. The WebPack runtime contains and loads the require function before your code runs.
Maybe it will be helpful for someone. Add into call nodeExternals option importType with value 'umd'.
nodeExternals({ importType: 'umd' })
When I run the dev server, I got an error 'Uncaught ReferenceError , I have just started to study Webpack and trying to setup development environment Uncaught ReferenceError: require is not defined at eval (Recommended) Don't activate webpack-node-externals in your Webpack browser config, but let Webpack indeed bundle those modules when targeting the web (this is probable what you want to do) Have the external modules loaded in some other way in the browser, and add the appropriate importType flag to the webpack-node-externals configuration (either var for scripts or amd for AMD)
I set this config up (minus the extraneous things that seem to be specific to your env) locally and it worked.
package.json
{ "name": "test-webpack", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "webpack": "^3.5.5" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" } }
.babelrc
{ "presets": [ "react", [ "env", { "targets": { "browsers": ["last 2 versions"] }, "debug": true, "modules": "commonjs" } ] ] }
webpack.config.js
const config = { target: 'web', entry: './index.js', output: { filename: '[name].bundle.js', path: __dirname + '/build', }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, ], }, }; module.exports = config;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<div>Hello</div>, document.getElementById('root'));
index.html
<body> <div id="root" /> <script src=" ./build/main.bundle.js "></script> </body>
Running npm start built the bundle and running index.html ran the react app.
Getting started with Webpack, If you open this file in your browser, you get an error: “Uncaught ReferenceError: require is not defined”. We haven't used Webpack yet, so this webpack_require. I am using Babel with Angular2 and Webpack. Whenever I use the webpack-server to develop the bundles are created and rendered fine. When try to build the bundle to be used in my .Net mvc application I get the following arrow when the page loads. Uncaught ReferenceError: __webpack_require__ is not defined. Webpack config
"Uncaught ReferenceError: require is not defined" when , Ok I found something that helped Graphql-js uses .mjs as file extension which caused issues with the webpack build Adding to my webpack rules helped. So why do we need to assign the library to a variable and then expose it on window?I thought jQuery does that for us? It does, but only if module.exports is undefined. If module.exports is defined -- which it will be with our webpack import -- module.exports = jQuery.
Client on node: Uncaught ReferenceError: require is not defined , Client on node: Uncaught ReferenceError: require is not defined. So, I am writing an Webpack - Does everything (bundles JS, CSS, etc). Made popular by the Fix Uncaught ReferenceError: videojs is not defined … Verified This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
Uncaught ReferenceError: require is not defined webpack with , telegram-mt-node, telegram-tl-node) inside webpack on a client web app. currently I am getting this error: Uncaught ReferenceError: require is not defined the Dismiss Track tasks and feature requests. Join 40 million developers who use GitHub issues to help identify, assign, and keep track of the features and bug fixes your projects need.
Comments
- i am using
babel-preset-env
instead ofbabel-preset-es2015
both almost do same thing .justbabel-preset-env
does little bit more .so at a time only one should be used - @vijay see my updated answer. I reproduced ypur config and it is working as expected without
nodeExternals
. - What is the reason for a downvote ?
- This helped me a lot. Thank you sir.
- i am already using
babel-preset-env
.you can see in .babelrc