Minimal React setup without Webpack

Question

I followed this answer here:

https://stackoverflow.com/a/50066512/11420374

But after compiling my Browser (Firefox 67) says:

SyntaxError: import declarations may only appear at top level of a module

My app.jsx looks like:

import React from 'react';
import ReactDOM from 'react-dom';

class Alpha extends React.Component {render() { return <h1>Hello</h1>; }}
ReactDOM.render(<Alpha />, document.getElementById('root'));

.babelrc:

{
  "presets": ["@babel/preset-react"]
}

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/dashboard.js"></script>
  </body>

</html>

compiled using babel-cli

Why is that? They said that newer browsers support es6 imports.

Tried:

... type="module"></script>

Result:

TypeError: Error resolving module specifier: react

My first thought is this: https://stackoverflow.com/a/46415925/3000068. Does that answer your question? — HPierce, May 01 '19 at 01:11
Browsers unlike node.js, cannot resolve path names,.. So you might need to do `import React from './react';` instead, assuming your react files are in the same directory, or maybe `import React from '/lib/react'` etc. — Keith, May 01 '19 at 01:22
cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:... — , May 01 '19 at 01:24
It looks like you've been down voted without feedback. If helpful I can try to make sense of it and explain. I guess one thing they expected was a direct question up front before any other information. For example the title or first line of the question could say "How can a React build be configured for scenario xyz?" or, "How can React syntax error xyz be fixed?", etc. If you wouldn't mind trying an edit for this I'd be glad to support your effort with +1. Thanks for your patience. — whitneyland, May 01 '19 at 05:01

P Varga · Answer 1 · 2019-05-01T03:37:55.597

Here is a minimal React setup without webpack:

const {render} = ReactDOM
const {createElement: h} = React

function GreatSuccess(props) {
  return h('h1', null, 'Hello ', props.framework)
}

render(h(GreatSuccess, {framework: 'React'}),
  document.getElementById('root'))

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Some of the ways in which this differs from your code:

You're using JSX, which is non-standard. Use React.createElement() instead
Your code assumes Node.js module resolution rules. Either import './path/to/react.js'^*1 or better yet, just load React via a <script> tag

*1: Last time I checked this didn't work, due to bug #14635

hackape · Accepted Answer · 2019-05-01T04:00:35.917

-2

I'm no fan of <script type="module"> solution. I'd recommend an alternative.

Give parcel bundler a try. It is a zero config CLI tool.

First, install globally

npm install -g parcel-bundler

All you need to do is modify your index.html to ref the source code path directly like:

...
    <script src="src/app.jsx"></script>
  </body>
</html>

Then type in terminal

parcel index.html

You're good to go!

edited May 01 '19 at 04:00

answered May 01 '19 at 03:53

hackape

18,643
2
29
57

thanks, i think parcel is a simpler way to do this. – May 01 '19 at 14:29

Minimal React setup without Webpack

2 Answers2