10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?
Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.
Here's the error that I am getting when upgraded existing working application to NextJs:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at ReactDOMServerRenderer.render (<path to project directory>\node_modules\react-dom\cjs\react-dom-server.node.development.js:3743:17)
at ReactDOMServerRenderer.read (<path to project directory>\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToString (<path to project directory>\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at render (<path to project directory>\node_modules\next\dist\next-server\server\render.js:82:16)
at Object.renderPage (<path to project directory>\node_modules\next\dist\next-server\server\render.js:382:16)
at Function.getInitialProps (<path to project directory>\.next\server\static\development\pages\_document.js:483:19)
Existing application has custom _document.js. However, even after removing that still getting above error. (Above error is after removing custome _document.js). Cannot share application code here. However, following is the code snippet from .next\server\static\development\pages\_document.js file around line 483. Line number 483 in above error is await ctx.renderPage( line in following code.
static async getInitialProps(ctx) {
const enhancers = false ? undefined : [];
const enhanceApp = App => {
for (const enhancer of enhancers) {
App = enhancer(App);
}
return props => _react.default.createElement(App, props);
};
const {
html,
head
} = await ctx.renderPage({
enhanceApp
});
const styles = [...(0, _server.default)(), ...( false ? undefined : [])];
return {
html,
head,
styles
};
}
What did I try so far:
Googled for error
Tried to change import statements and commenting out portions of custom _document.js
Tried copying custom _document.js file example from NextJs documentation site
Removed custom _document.js
Deleted node_modules directory and ran npm install again
Deleted .next directory and restarted application again
Has anyone come across similar error? Thank you for your help. Any hint or clue also appreciated.
After spending lot of time commenting out and figuring out where 'import' is not correctly defined, found out the newer version of next-seo package needed named import rather than default for NextSeo. I had to go through lot of files to narrow down the code in error.
Wish there was better stack trace, especially when error it was showing was from _document.js !
I just upgraded React to 16.2.0 on my React-Native project to use the new Fragment syntax.
I have a component which returns something like this now:
return (
<>
<View>...</View>
<View>...</View>
</>
);
TypeScript doesn't complain about the syntax which is great, however I get an error when I try to run this code:
Bundling `index.js` [development, non-minified] 45.8% (1078/1593), failed.
error: bundling failed: SyntaxError in /Users/alexmngn/Workspace/MyProject/MyComponent.tsx: /Users/alexmngn/Workspace/MyProject/MyComponent.tsx: Unexpected token (68:17)
> 68 | return (<>
| ^
It doesn't seem to compile the fragment syntax back to ES5.
And when I try to use React.Fragment instead I get a TypeScript error:
/Users/alexmngn/Workspace/MyProject/MyComponent.tsx(1,28): error TS2305:
Module '"/Users/alexmngn/Workspace/MyProject/node_modules/#types/react/index"'
has no exported member 'Fragment'.
And the app doesn't run and throw an error as well Invariant Violation
I use the latest stable versions of all packages:
React: 16.2.0
React-Native: 0.51.0
TypeScript: 2.6.2
#types/react: 16.0.31
#types/react-native: 0.51.4
Is there anything specific I need to do to make it working with React-Native? To compile to ES5? Or even to be able to use React.Fragment without Typescript complaining? Seems like there is a type ReactFragment in the definition of the types but still get this error.
Thanks
I just started working on a project that was developed by another developer (reactjs project) , however when I try to start the project I get this error in the browser console :
Uncaught ReferenceError: Popper is not defined
The error is pointing to a specific line of course which is in the file :
node_modules/bootstrap/dist/js/bootstrap.js
the error in the last line of the following :
var bootstrap = (function (exports,$,Popper) {
'use strict';
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
// a lot of generated code
}({},$,Popper));
As I said earlier the error shows up pointing to the last line with the error mentioned before
Note : I have searched all other possible answers here in stack overflow but with no luck , including this answer Bootstrap 4: Uncaught ReferenceError: Popper is not defined so please it is not a duplicate
The problem was not in the code , the problem was that I had an old version of nodejs and npm on my machine I thought this might help someone in the future.
TL;DR: Doesn't work with IOS10 simulator. IOS9, however, seems fine.
I've been trying to implement L Wansbrough's react-native-camera module which everyone seems to recommend. After 10 hours of failing to get it to work, I really really need some help.
I gave up trying to get it into my existing project, so for now I'm just trying to do this from scratch in a brand new area. This is what I'm doing:
react-native init cameraProject
Okay, new project made. Let's just make sure the versions are right:
react-native -v
I get react-native-cli: 1.0.0 react-native: 0.36.0 returned. Just to check the requirements fully:
java -version
Returns: java version "1.8.0_112"
Java(TM) SE Runtime Environment (build 1.8.0_112-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16, mixed mode)
So the requirements look solid. Now:
react-native run-ios
Success - the app runs in the simulator, everything works as it should. Now I try and follow the documentation to install the react-native-camera. First off, there's a new requirements section regarding iOS10 which my simulator is running. You need to add the privacy key regarding the camera to the Info.plist file. This seems to have been omitted from the source code's example Info file and the documentation doesn't have the code required. I've dug around and added the following to cameraProject/ios/cameraProject/Info.plist:
<key>NSPhotoLibraryUsageDescription</key>
<string>Going to use some photos</string>
That's added in alphabetical order in the list, around line 25. Refreshing simulator and it's all good. Next:
npm install react-native-camera#https://github.com/lwansbrough/react-native-camera.git --save
followed by:
react-native link react-native-camera
Perfect; I get the messages I expect:
rnpm-install info Linking react-native-camera android dependency
rnpm-install info Android module react-native-camera has been successfully linked
rnpm-install info Linking react-native-camera ios dependency
rnpm-install info iOS module react-native-camera has been successfully linked
Everything still works as it should. Onto the 'Usage' section. I'm going to copy and paste the code out from GitHub into a module called BadInstagramCloneApp.js I'm then going to import that into index.ios.js with a basic import BadInstagramCloneApp from './BadInstagramCloneApp'; and we'll stick it in the main body with <BadInstagramCloneApp />.
Refresh the simulator:
Error
Alright, so quit the simulator, close Terminal and re-run react-native run-ios as I believe that should rebuild. It still doesn't work, throws:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'cameraProject'.
I've loaded Xcode and looked at the manual instructions to link files. My library folder has the RCTCamera.xcodeproj file already. It's also already got libRCTCamera.a in the cameraProject->Build Phases->Link Binary with Libraries section. The Header Search Paths have the correct items in there and they are both marked as 'recursive' as per the instructions. Then CMD+R to run the project. New simulator loads, looks like it's going to work then falls over with the same red screen. Quit Xcode, run react-native run-ios again from Terminal (says build succeeded) and it's still giving the same error as above.
I've tried every permutation of this I can think of. I've tried copying the code from inside the example files, I've tried the older version of the module and I've followed a couple of tutorials online which are supposed to launch the react-native-camera as well. Not a single thing I've tried has ended in anything except a red screen or the application crashing out.
Suggestions? All I want to do is allow the user to take a photo and then return that photo as a Base64 encoded object.
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import BadInstagramCloneApp from './BadInstagramCloneApp';
export default class cameraProject extends Component {
render() {
return (
<View style={styles.container}>
<BadInstagramCloneApp />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('cameraProject', () => cameraProject);
BadInstagramCloneApp.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import Camera from 'react-native-camera';
class BadInstagramCloneApp extends Component {
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
<Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
</Camera>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) => console.log(data))
.catch(err => console.error(err));
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
});
// AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
// AppRegistry.registerComponent('cameraProject', () => BadInstagramCloneApp);
module.exports = (BadInstagramCloneApp);
The console.log then throws this:
ExceptionsManager.js:62Cannot read property 'Aspect' of undefinedhandleException # ExceptionsManager.js:62handleError # InitializeJavaScriptAppEngine.js:120reportFatalError # error-guard.js:30guardedLoadModule # require.js:60_require # require.js:49(anonymous function) # require-0.js:1executeApplicationScript # debuggerWorker.js:20onmessage # debuggerWorker.js:38
RCTLog.js:38Running application cameraProject ({
initialProps = {
};
rootTag = 1;
})
ExceptionsManager.js:62Module AppRegistry is not a registered callable module (calling runApplication)handleException # ExceptionsManager.js:62handleError # InitializeJavaScriptAppEngine.js:120reportFatalError # error-guard.js:30guard # MessageQueue.js:48callFunctionReturnFlushedQueue # MessageQueue.js:107onmessage # debuggerWorker.js:44
ExceptionsManager.js:82Unhandled JS Exception: Cannot read property 'Aspect' of undefinedreactConsoleError # ExceptionsManager.js:82logIfNoNativeHook # RCTLog.js:38__callFunction # MessageQueue.js:236(anonymous function) # MessageQueue.js:108guard # MessageQueue.js:46callFunctionReturnFlushedQueue # MessageQueue.js:107onmessage # debuggerWorker.js:44
ExceptionsManager.js:82Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication)
If I quit everything, reload, rebuild using react-native run-ios then the project builds correctly but crashes out after the splash screen is displayed. Console doesn't log any errors, but if I choose 'Pause on all caught exceptions' from the dev tools then it shows a stop here:
**_nodeUtil.js**
/** Used to access faster Node.js helpers. */
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding('util');
} catch (e) {}
}());
If I try and run in from within Xcode rather than Terminal then it builds correctly, the simulator launches, but inside Xcode it opens cameraProject->Libraries->RCTCamera.xcodeproj->RCTCameraManager.m and highlights line 988:
[self.session commitConfiguration]; <Thread 1: EXC_BAD_ACCESS (code=1, address=0x50)
Any ideas on this?
I am having the same issue with a project I'm working on. According to this gitHub issue, the problem is a combination of new iOS 10 camera permissions and possibly also a problem with the simulator camera support itself. I've found that if I open the xcodeproj file directly in XCode, the simulator opens fine. I still haven't found a permanent fix but running build from XCode instead of react-native run-ios bypasses the issue for me. I'll follow up if I find a better option.
If I quit everything, reload, rebuild using react-native run-ios, then
the project builds correctly but crashes out after the splash screen
is displayed. Console doesn't log any errors, but if I choose 'Pause
on all caught exceptions' from the dev tools then it shows a stop
here:
_nodeUtil.js
Used to access faster Node.js helpers.
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding('util');
} catch (e) {}
}());
I just can tell you that this is not relevant for your question, it always happen. Look here:
React Native - debugging exception