score:6
yeah, you'd be better off following the example and requiring test
from a .jsx file rather than inlining it in the html.
otherwise, test
needs to be exported as a global, so you'd need to follow similar conventions to the browserify --standalone
flag, which looks to be something like this:
output: {
library: "test",
librarytarget: "umd"
}
http://webpack.github.io/docs/webpack-for-browserify-users.html#standalone
edit: after looking at your gh repo, you have:
<script src="bundle.js" type="text/js"></script>
instead of
<script src="bundle.js" type="text/javascript"></script>
so it wasn't loading bundle at all. further, you can't have 2 separate copies of react, the way you have it currently you're requiring react from within webpack, and then you're also loading it on the page. you should either export a function which takes the react object, or use the global to be able to use it outside of the bundle.
for example this would work:
/** @jsx react.dom */
module.exports = function(react) {
var test = react.createclass({
render: function(){
return <h1>hi!!</h1>
}
});
return test;
};
and then:
/** @jsx react.dom */
react.rendercomponent(
test(react)(),
document.getelementbyid('hi')
);
or this
/** @jsx react.dom */
var test = react.createclass({
render: function(){
return <h1>hi!!</h1>
}
});
module.exports = test;
and then:
/** @jsx react.dom */
react.rendercomponent(
<test />,
document.getelementbyid('hi')
);
though i can't imagine most folks consuming a react package are going to be loading it with a script tag, and you generally don't want globals, so it's probably best to just use the commonjs style require and let people figure out shimming or whatever.
Source: stackoverflow.com
Related Query
- WebPack with React Uncaught Reference Error
- Uncaught ReferenceError: process is not defined error when converting react (TS) app to PWA with webpack and babel config
- Error with basic React Example: Uncaught TypeError: undefined is not a function
- Error using component done with react,redux and react-redux and build with webpack in react application
- Using one webpack project inside another with react hooks causes an error
- SCRIPT1002: Syntax error in IE11 with React + Babel + Webpack
- Include and reference an image in react with webpack
- Compiling react with webpack syntax error
- Running gunjs with Reactjs and webpack throws Reference Error in console
- When Using Redux Saga with React Get This Error .. Uncaught TypeError: getPosts is not a function
- Error on import JSON with Webpack 4.5 + Babel 6 + React 16
- Error using css modules in typescript react with webpack config
- IE11 is not responding due to a long running script error with Webpack + React + TypeScript
- React error when compiling with webpack
- Invalid configuration error while creating a react app with webpack configuration
- Webpack with JavaScript, React and jest gives Babel Error
- Error adding image with react and webpack
- Trying to install webpack 5 with react 17 for module federation, getting this error on npm install
- React JS - webpack throws error with loading JSON file
- React Typescript ERROR when running npm run build with webpack
- How do I fix a uncaught in promise error in react with typescript when doing a axios post request?
- Hetting error in react build with webpack
- React Uncaught Reference Error
- Google spreadsheet api throws crypto.createSign error in react app with webpack
- Shorthand React prop causing reference error with transform-react-constant-elements Babel plugin
- What is the best way to deal with a fetch error in react redux?
- Add Favicon with React and Webpack
- Service mocked with Jest causes "The module factory of jest.mock() is not allowed to reference any out-of-scope variables" error
- Cannot find namespace 'ctx' error when creating Context with react - typescript
- How to import CSS modules with Typescript, React and Webpack
More Query from same tag
- Invariant Violation: Element type is invalid: expected a string or a class but got: undefined. Check the render method of `MyApp`
- Dialog form constantly reendering elements slowing down my application (and crashing)
- How do I check if user is 'logged in' in a react component when using laravel authentication?
- Use parameter and display it in a correct approach
- React noob having issues exporting component to another component
- Effective onBlur for react-data-grid
- Fixing tab bar in material-ui
- Map through an array to receive multiple get request back
- Connecting to React docker container on port 80
- How to fix React 15.5.3 PropTypes deprecated warning when using create-react-app
- Normalize.css does not fully add reset to react app
- When push to heroku container - huge amount of data is generated
- Unable to upload file as a path to my form using reactjs
- How to redirect user to root route if the user refreshes the page on any other route in REACT ROUTER?
- How to pass an Array and access it within React Lifecycle
- How to forceUpdate (re-render) React components?
- ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response
- Mock axios request using jest
- Pass path Param to render() function of Route in Switch - React Router
- How to dispatch an action on page load in react-redux?
- Ant Design - filter a column by all its existed data
- How to Control what Ace Editor Autocompleter writes to the File
- Is there a way to pass down props to a component implicitly?
- react-native: command not found
- problem with router and privaterouter / history
- Is there a good way to use private variables and methods in React.js
- React-chosen raising error
- Infinite loop error in React JS with useEffect and useState
- How to pass a variable to callback of setState in React Component?
- react-sortable-tree not rendering right