I have problem with webpack build I write custom webpack config:
https://github.com/Simproduction/react-client-webpack
but when I run dev or build a project everything work correct but I can't call React from console or use react developers tools
I get error
Uncaught ReferenceError: React is not defined(…)
Could you help me?
My test project,
https://github.com/Simproduction/react-CM
You need to expose React so it is available on the window using the expose-loader:
module: {
loaders: [
{ test: require.resolve("react"), loader: "expose?React" },
]
}
It contains AMD and CommonJS in webpack. You know js loader, right?
If you use AMD ,you know that all js code are in 'define([],function(){ var a=10; ...}) area. if you want print a in console. You should like this
define([],function(){
var a=10;
window.a = a;
})
so, you can edit your main.js. Add this line window.React = React; , but we may use CDN instead of it is common solution.
Related
I've spent possible the worst day of my life trying to get web workers run inside a create react app.
If I just import
import VoiceWorker from './voice.worker.js'
And
voiceWorker = new Worker(VoiceWorker)
voiceWorker.postMessage({command:'start'})
It works fine locally but not on the server where it can't find the worker file.
So I've followed various instructions, I can't use the inline blob method because the webworker has dependencies.
I updated React-Scripts to 2.0.5 because somewhere I read that it had support for webworkers, but it doesn't seem to.
I've been using the worker-loader library, used react-app-rewired
With the config-overrides below
const path = require('path')
const WorkerPlugin = require('worker-plugin')
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
})
config.plugins.push(new WorkerPlugin())
config.output.globalObject= `this`
return config
}
And import VoiceWorker from 'worker-loader!./voice.worker.js'
This is now trying to load the worker from the below URL and fails:
https://localhost:3000/course/function()%20%7B%20%20return%20new%20Worker(webpack_require.p%20+%20%220306a1085789e37891cf.worker.js%22);%7D
I've tried the worker plugin as above and that doesn't do anything.
I got it loading before and 'window' was undefined but that line config.output.globalObject= thisfixed that.
Please can someone tell me a way to get workers loading in React! ?
Got it working with https://github.com/developit/workerize-loader which seems to be more mature.
react-app-rewired with config.output.globalObject= self helps with the 'window is undefined' problem.
I have created standalone bundle which I include in React App. The App itself does not anything know about Extension Bundle (next XB) it load, but the XB does know about App and libraries it use inside. How to make App share library packages it compiled with to XB? I mean if the App compiled with React and React-dom libraries to make XB exclude from compile with such libraries and use them from the App instead?
I put into webpack config to exclude React from compiling:
var config = {
//....
output: {
library: 'videoEditor',
libraryTarget: 'umd',
path: BUILD_PATH+"./../bundles/",
filename: '[name].bundle.js'
},
// ...
}
// .... later just extending config if compiling as standalone
config.externals = Object.assign(config.externals,{'react':'React'});
Yes, that gives me on exit the Bundle without React library (so it size reduces from 190KB to 10KB). But if I try to load it I get an error:
index.js?7afc:1 Uncaught ReferenceError: require is not defined
at eval (index.js?7afc:1)
at Object.<anonymous> (video-editor.bundle.js:80)
at __webpack_require__ (video-editor.bundle.js:30)
at video-editor.bundle.js:73
at video-editor.bundle.js:76
at webpackUniversalModuleDefinition (video-editor.bundle.js:9)
at video-editor.bundle.js:10
Without externals all is working ok.
index.js?7afc:1 is
import React from 'react';
import AppLayout from 'layouts/app';
There inside import React from 'react'; is coming as module.exports = require('react');
I do not understand how to make require work. Seems it is invisible for global space.
update: I have tried to change libraryTarget on any available option: 'umd', 'commonjs', 'this'. The result is the same.
I know about commonChunkPlugin from webpack but I have several separated projects from different sources they compile by different people.
Along with React, you also need to add ReactDOM in your externals from React v0.14.x onwards
externals: {
// Use external version of React
"react": "React",
"react-dom": "ReactDOM"
},
I am attempting to do some code-splitting in my create-react-app application that utilizes server side rendering.
I am utilizing 'react-loadable` to do the code-splitting: https://github.com/thejameskyle/react-loadable
As of now I simply have split my Home.js component away from the rest of my app, just to see if it works. In development mode (read: not SSR), it's chunked off and works fine.
However, I can't get things to work on the server. I'm following the guide on their Github page and am stuck because of the webpack changes needed. In create-react-app applications, you don't have access to webpack as it's hidden away.
The error I receive when starting the server is:
return (0, _importInspector.report)(import('../components/home/Home'), {
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10) ...
I'm pretty sure it's because I don't have webpack configured correctly as stated in the guide.
In the guide, it clearly states for SSR:
First we need Webpack to tell us which bundles each module lives inside. For this there is the React Loadable Webpack plugin.
Import the ReactLoadablePlugin from react-loadable/webpack and include it in your webpack config. Pass it a filename for where to store the JSON data about our bundles.
// webpack.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';
export default {
plugins: [
new ReactLoadablePlugin({
filename: './dist/react-loadable.json',
}),
],
};
I don't think this is possible without ejecting.
Anyone have any idea if react-loadable can be used in a create-react-app server-side-rendered application?
import these modules at the top of your server file
require('ignore-styles');
require('babel-polyfill')
require('babel-register')({
ignore: [ /(node_modules)/ ],
presets: ['es2015', 'react-app'],
plugins: [
'syntax-dynamic-import',
'dynamic-import-node',
'react-loadable/babel'
]
});
I have a react native app that is setup with Redux and Redux Saga.
I have unit tests using mocha, all tests used to work fine until I added native-base.
When I test now, it throws this error
[poject-path]/node_modules/native-base-shoutem-theme/index.js:1
(function (exports, require, module, __filename, __dirname) { import connectStyle from './src/connectStyle';
^^^^^^
I have a setup with babel, is there anyway I can transpile that dependency? or do something without changing my code?
What I currently did in my file that is causing the problem is the following
const Toast = null;
if(process.env.NODE_ENV !== 'test')
Toast = require('native-base').Toast;
The tests work with the above, but I was just testing to make sure it passes and it did, however that's not a good way to do it.
There is a similar problem in their GitHub Repo here
Can anyone help?
I have a setup with babel, is there anyway I can transpile that dependency
By convention, all npm modules should be provided in repository in transplated form, usually, by perform prepublush script and index link into dist directory. But in general case babel can easily transplate any dependencies, by customizing ignore regex in configutation
For example, when using webpack with babel-loader, config with force transpiling MODULE_ONE and MODULE_TWO will have following view:
{
test: /(\.js)$/,
exclude: /node_modules(?!(?:\/|\\)((MODULE_ONE)|(MODULE_TWO)))/,
loader: 'babel',
query: { presets: ['react', 'es2015', 'stage-0'] }
}
in this set-up, how do you transpile the angular2 library being imported from the generated ngfactory files?
the current app is a combination of the webpack + aot cookbook based on the angular docs
angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html
I have a working POC where you can replicate the issue from this repo:
https://github.com/jetlogs/Angular2-AOT-Localization
after you've done the compilation / bundling, you can open the 2 files:
non-aot.html - this is the non-aot version of the same app, and it loads fine
aot.html - this file fails with:
ng_module_factory.js?95b1:13 Uncaught SyntaxError: Unexpected token import
Expected behavior
the expected behavior is that aot.html and non-aot.html should have the same behavior
Minimal reproduction of the problem with instructions
clone the repo, then
run these commands on the working directory:
npm install
npm postinstall
npm run build
then open aot.html to reproduce the issue
Is there any way on how to fix the import statements from the imported angular2 libraries? Thanks
UPDATE:
I've tried transpiling the angular2 source files which are in ES2015 by using the babel-loader:
{
test: /\.js$/,
loader: 'babel',
include: [
/node_modules(\\|\/)#angular/
],
exclude: [
/\.umd\.js$/
],
query: {
presets: ['es2015']
}
},
it now compiles without issues with ES6 incompatibilities, however, it now encounters a new error only for aot.html:
core.umd.js?e2a5:3272Uncaught Error: No provider for NgZone!
any reason why transpiled angular2 source codes being referenced by the AOT compiler are cdausing NgZone issues?
I've updated the repo above to reflect my latest changes
UPDATE2: 10/13/16
Updated to Angular 2.1
still the same issue
The System.import syntax used in ng_module_factory.js is ES6 style module loading. Webpack 1, which you are probably using, does not support this syntax.
A workaround might be to transpile the Angular ES6 modules to ES5 with require() syntax, but you already tried this without success.
However you might consider switching to Webpack 2, which fully supports ES6 style imports and is very close to its stable release. The compilation worked for me this way without changing anything except for the webpack config which uses a new syntax for some parts.
For me it was a wrong import generated by IDE:
import { Component, Output } from "#angular/core/src/metadata/directives";
Instead of:
import { Component, Output } from "#angular/core";