Code:
import React from 'react'
import { render } from 'react-dom'
import { Router} from 'react-router'
render((
<Router>
</Router>
), document.getElementById('app'))
Gives error:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I am using Browserify with Babel6 - here's the babelrc:
{
"presets": ["es2015", "react"],
"env": {
"development": {
"plugins": [
["react-transform", {
"transforms": [{
"transform": "livereactload/babel-transform",
"imports": ["react"]
}]
}]
]
}
}
}
And package.json deps:
"axios": "^0.8.1",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-react-transform": "^2.0.0-beta1",
"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
"babel-plugin-transform-react-jsx": "^6.3.13",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-preset-stage-2": "^6.3.13",
"babel-runtime": "^6.3.19",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"livereactload": "^2.1.0",
"react": "^0.14.5",
"react-addons-linked-state-mixin": "^0.14.5",
"react-dom": "^0.14.3",
"react-hot-loader": "^1.3.0",
"react-mixin": "^1.1.0",
"react-proxy": "^1.1.2",
"react-redux": "^4.0.6",
"react-router": "^1.0.3",
"react-simple-router": "^0.1.6",
"reactify": "^1.1.1",
"redux": "^3.0.5",
"redux-devtools": "^3.0.1",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.1",
"redux-form": "^4.0.7",
"redux-simple-router": "^1.0.2",
Browserify config:
var props = {
entries: [script],
cache: {},
packageCache: {},
plugin: isProd ? [] : (watch ? [watchify, livereactload] : [livereactload]),
transform: [
['babelify', {
presets: ['es2015', 'react'],
plugins: [
['react-transform', {
'transforms': [{
'transform': 'livereactload/babel-transform',
'imports': ['react']
}]
}]
]
}],
[envify, {}]
],
extensions: ['.jsx', '.js'],
debug: !isProd,
fullPaths: !isProd // for watchify
}
Suggestion? I am finding lots of issues on GH with this but no clear solution. This is taken right off the examples on React Router site so not sure why I cannot get it working. The only diff is they use webpack.
Well the issue was odd - thanks to comment I was able to resolve it. I have a .babelrc config as well as a browserify gulp job with its own babel config. For some reason having both created this issue. I deleted the one in gulp and now things work fine. Reason: I have zero idea.
Related
Good day!
The project uses webpack 5, the tests themselves were written before the transition.
There is clearly a problem with babel, although the config was written according to jest documentation
I tried everything and looked up a lot over the forums and Github, but i couldnt find a solution. everything i try doesnt seem to work. I need help please!
Thank you!
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
package.json
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.12.13",
"#babel/preset-env": "^7.13.12",
"#babel/runtime": "^7.13.10",
"#mdi/js": "^5.9.55",
"#mdi/svg": "^5.9.55",
"#vue/babel-preset-app": "^4.5.12",
"#vue/test-utils": "^1.1.4",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"eslint-plugin-jest": "^24.3.6",
"husky": "^6.0.0",
"jest": "^26.6.3",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"izitoast": "^1.4.0",
"regenerator-runtime": "^0.13.7",
"vue": "^2.6.12",
"vue-axios": "^3.2.4",
"vue-click-outside": "^1.1.0",
"vue-select": "^3.11.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.4.8",
"vuex": "^3.6.2"
},
"jest": {
"transform": {
"\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"common/vue/mixins/": "<rootDir>/__mocks__/jsFileMock.js",
"common/vue/components/ns-servers": "<rootDir>/__mocks__/jsFileMock.js"
}
},
.babelrc
{
"presets": [["#babel/env", { "modules": false }]],
"env": {
"test": {
"presets": [["#babel/env", { "targets": { "node": "current" } }]]
}
}
}
this is usually a parsing error, you have to tell Jest how you want to parse your test files and their dependencies. To help you properly I need to see your jest.config file (or your package.json depending on where you decide to set up your jest implementation).
Here are some basic settings to guide you:
// .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"vue"
]
}
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}
Remember to install first npm install -D babel-preset-vue
Have a nice day!
I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.
OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.
I'm in the process of upgrading to webpack 4.6.0 from 3.0.0.
Everything builds fine, but when it comes to executing the code in the browser, imports are not working properly.
This is mu setup:
package.json
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^22.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.6.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3",
"workbox-webpack-plugin": "^3.0.0"
.babelrc
{
"presets": [
"env",
"react"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-object-rest-spread",
"transform-object-assign",
"syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
]
}
}
}
webpack.config.js
{
test: /\.js$/,
include: [
path.resolve('src')
],
use: [
{ loader: 'babel-loader' },
...
]
}
And then when it comes to being executed, this happens:
progressiveImage is a react component which when being debugged, it has no default from import.
Can you spot anything wrong from this?
Thanks in advance.
I use decorators in my project, but it seems the babel-jest do not support this new experiment feature
I find some support from this github issue ===> which replace babel-jest with webpack-babel-jest, and it fix the decorator problem. But a new problem comes in when i run npm run test ==> "ReferenceError: regeneratorRuntime is not defined"
It seems we need regenerator-runtime.(I use redux-saga in my project) I can't get a way to fix this.
package.json {
"babel-core": "^6.7.6",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-15.4": "^1.0.3",
"jest": "^21.2.1",
"node-sass": "^3.4.2",
"react-addons-test-utils": "^15.4.2",
"regenerator-runtime": "^0.11.0" }
.babelrc {
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-react-jsx-source",
"transform-class-properties",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}
],
"env": {
"development": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"es2015",
"react",
"stage-0"
]
}
}
}
}
I can't get a way to fix this.
This is well-known issue of regenerator-transform babel plugin, which is commonly used for transpiling code with sagas.
See verbose explanation here: Unable to export generator functions
So I have a React app that I'm working on, I'm building the app with Visual Studio (ASP.NET Web API 2.0 for the backend). I had to make some pretty major changes to the app so I created a separate branch for it. I added a few JSX files to the project in the new branch and when I try to require them in a file like so:
const Reports = require("./Reports/Reports.jsx");
I get an error: "Uncaught Error: Cannot find Module ./Reports/Reports.jsx" in the web browser
It seems like webpack isn't detecting any of the newly added files on the branch, what could be the cause of this?
Here's my webpack config:
function getWebpackConfig(moreProps) {
var config = {
debug: true,
devtool: 'source-map',
entry: {
main: './src/start.jsx'
},
output: {
path: path.join(__dirname, './dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.jsx$|\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
},
resolve: {
alias: {
"~": path.resolve("./src")
},
extensions: ['', '.js', '.jsx']
}
};
config = Object.assign({}, config, moreProps);
return config;
}
Here's my package.json containing the node_modules installed in the directory of my project:
{
"name": "internal auditing site",
"version": "1.0.0",
"description": "Web Client for internal auditing site",
"repository": "~company name excluded for StackOverflow~",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.16.0",
"lodash": "^4.11.1",
"moment": "^2.12.0",
"node-uuid": "^1.4.7",
"path": "^0.12.7",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.4",
"redux": "^3.4.0",
"redux-thunk": "^2.0.1",
"webpack": "^1.13.3",
"whatwg-fetch": "^0.11.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-runtime": "^6.6.1",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.7",
"history": "^2.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"object-assign": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
I'm also not entirely sure if this is an issue with Webpack or Team Foundation Server.