WebPack reactjs приложение не загружается: Uncaught ReferenceError: snapapp не определен

Это минимальное приложение reactjs которое, когда в комплекте с использованием Webpack, а затем запустить, выдает следующую ошибку в консоли браузера:WebPack reactjs приложение не загружается: Uncaught ReferenceError: snapapp не определен

Uncaught ReferenceError: snapapp is not defined

Может кто-нибудь подсказывает почему?

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
</head> 
<body class='section'> 
<div id="app"></div> 
<script type="text/javascript" src="./build/snapapp.js"></script> 
<script type="text/javascript"> 
    (function() { 
     var mountNode = document.getElementById('app'); 
     snapapp.start(mountNode); 
    })(); 
</script> 
</body> 
</html>

index.js

import { render } from 'react-dom'; 
import rootLayout from './src/components/ApplicationLayout.jsx'; 
import hello from './src/components/hello.jsx'; 
export function start(mountNode) { 
    render(<rootLayout />, mountNode); 
}

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './index.js', 
    output: { 
    path: 'build', 
    filename: 'snapapp.js', 
    libraryTarget: "umd" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
};

SRC/компоненты/hello.jsx

import React from 'react'; 

class Hello extends React.Component { 
  render() { 
    return <h1>Hello</h1> 
  } 
}

источник

2015-11-26 Duke Dougal

Вы экспортируете snapapp из своего модуля, но вы не импортируете/не требуете его в любом месте, он не существует как глобальная переменная.

источник

2015-11-26 10:15:45 Lee

Я отдаю свой статус noob с помощью JavaScript здесь, но откуда бы я его импортировал? Как выглядит такой импорт? –

Самый простой способ заставить его работать, а не экспортировать функцию из index.js, просто инициализировать ее там, а не в вашем HTML. С точки зрения импорта, в другом JS-файле, то есть 'Main.js', вы импортируете либо с помощью import-snapapp из. ./index ';' или 'var snapapp = require (' ./ index ');' – Lee

Hmmm ... snapapp.js IS index.js - это результат набора пакетов webpack index.js, поэтому я не смог бы загрузить его оттуда. –

Вы экспортируете формат файла UMD. Если вам нужно встраивать код в файл index.html, то вам нужно будет либо использовать библиотеку как Require

Альтернатива Вы можете:

Выход в вар

Изменение umd к var, вам может читать около it here, это добавит вашу библиотеку на глобальный объект window. Позволяет вам называть его так, как будто вы находитесь в вашем html-файле.

output: { 
    path: 'build', 
    filename: 'snapapp.js', 
    libraryTarget: "var" 
}

Поместите Bootup скрипт в ваш файл пачке

Если нет какой-то особой причины я бы переместить скрипт в ваш начального пуска index.js файл. Нет причин, по которым вы не можете получить точку монтирования внутри файла. Это также очень распространенная картина того, что вы пытаетесь сделать.

import { render } from 'react-dom'; 
import rootLayout from './src/components/ApplicationLayout.jsx'; 
import hello from './src/components/hello.jsx'; 

render(<rootLayout />, document.getElementById('app'));

источник

2017-06-22 10:59:03 roughcoder

WebPack reactjs приложение не загружается: Uncaught ReferenceError: snapapp не определен

ответ

Смежные вопросы