Related
First of all, thank you all for your attention. I'm new about react/redux code, and I have an old project that already existed and I only need to duplicate it because they need the same version with some different parameters.
So, I duplicated the old project, created a new gitlab project for it, changed what I needed(practically only text) on the duplicated project, then how it was showing many errors after "npm run build", I did:
Inside the package.json file I changed "node-sass" to use the version 4.11.0 because the old one was generating some "Module not found: Error: Cannot resolve module" kind of errors(as I said, this was a duplication from a old project that even is still running on production has many deprecated dependencies).
I deleted the package-lock.json file.
I deleted also the node_modules folder.
I did "npm install" already on the master branch of the folder to create again the node_modules.
As you can see, I just tried to delete the package-lock.json file then I deleted the node_modules folder, and finally I did "npm install", but when I tried "npm run build", the async_hooks error showed up... I'm stuck in this part.
After these basic steps, the error happened: Cannot resolve module 'async_hooks'. I tried to "npm install async_hooks" but it didn't work, I also tried to put the "async-hooks" on the package.json file but it didn't work, and finally I also tried put a new version from bluebird there but didn't work too.
How to install this "async_hooks"? Because even after doing "npm install async_hooks" it didn't work yet. I run "npm run build" but the same error happened.
See below the full result:
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
# ./~/bluebird/js/release/util.js 410:18-40
ERROR in ./~/bluebird/js/release/promise.js
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
# ./~/bluebird/js/release/promise.js 34:4-26
. Here is my package.json file:
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"build": "node ./node_modules/webpack/bin/webpack.js ",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"license": "ISC",
"engines": {
"node": "^v8.9.4"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-react-constant-elements": "^6.3.13",
"babel-plugin-transform-react-inline-elements": "^6.3.13",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.1.18",
"babel-preset-es2015-node5": "^1.2.0",
"babel-preset-react": "^6.1.18",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.11.6",
"babel-runtime": "^6.11.6",
"bootstrap-loader": "^1.1.0-beta.1",
"bootstrap-sass": "^3.3.7",
"chai": "~3.5.0",
"chai-jquery": "~2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jquery": "~2.2.1",
"jsdom": "~8.1.0",
"mocha": "~2.4.5",
"node-sass": "^4.11.0",
"postcss-loader": "^0.9.1",
"react-addons-test-utils": "~0.14.7",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0"
},
"dependencies": {
"axios": "~0.13.1",
"bluebird": "^3.4.1",
"css-loader": "^0.23.1",
"griddle-react": "~0.6.0",
"immutable": "^3.8.1",
"jwt-decode": "^2.2.0",
"lodash": "~3.10.1",
"moment": "^2.19.1",
"nested-property": "^0.0.7",
"numeral": "^2.0.6",
"react": "^0.14.3",
"react-datetime": "^2.10.3",
"react-dom": "^0.14.3",
"react-ga": "^2.3.5",
"react-redux": "~4.3.0",
"react-router": "~2.0.1",
"redux": "~3.1.7",
"redux-form": "^6.1.1",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0"
}
}
. and here is my webpack.config.js file:
var path = require('path');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname,'./js/'),
publicPath: '/js/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Any ideas?
I have a reactjs app - which is running well in dev environment. I mean, when I use
npm start
It's running in localhost:8080 without any issues.
When I try to execute the same with below command, to generate a distribution folder for static hosting, somewhere in AWS S3. That's where the problem.
npm run build
Below is my output folder structure when I execute the above command:
dist
bundle.js
bundle.js.map
public
index.html
I have gone through these posts (regarding warning which I'm getting related to bundle.js file sizes & this link) and did modify as per the suggestion, but I haven't got the desired outcome.
Below is my package.json for reference:
{
"name": "react-starter",
"version": "1.1.5",
"description": "example",
"main": "dist/bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config ./webpack.dev.js",
"build": "webpack --max_old_space_size=4096 --config ./webpack.prod.js --progress --profile --colors"
},
"homepage": ".",
"keywords": [
"react"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.2",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^3.2.0",
"dotenv": "^6.2.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"eslint-plugin-react-hooks": "^1.6.0",
"file-loader": "^1.1.11",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.21.0",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.3.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1",
"webpack-merge": "^4.1.4"
},
"dependencies": {
"bootstrap": "^4.3.1",
"i18next": "^16.0.0",
"i18next-browser-languagedetector": "^3.0.1",
"konva": "^2.5.1",
"normalizr": "^3.4.0",
"prop-types": "^15.7.2",
"react-hot-loader": "^4.11.1",
"react-i18next": "^10.11.1",
"react-icons": "^3.7.0",
"react-konva": "^16.8.6",
"react-player": "^1.11.1",
"react-scroll": "^1.7.12",
"reactstrap": "^6.5.0"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
webpack.prod.js is below:
const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
entry: 'apps/index.js',
mode: 'production',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
libraryTarget: 'commonjs2',
},
plugins: [
new CleanWebpackPlugin(['dist/*.*']),
],
externals: {
react: 'react',
'react-dom': 'react-dom',
},
});
I also noticed some deprecations in the library which I'm trying to integrate with. I've installed the missing peer dependencies. I've reported the issues with the library here.
I believe to upload it to S3, we should have all necessary files in the dist or public folder along with index.html which would be added as a prefix in S3 from where the app gets the entry point.
Any help on this would be highly appreciated. Also, I would be ready to provide any additional information.
Looking at your package.json file it seems you haven't used create-react-app.
I suggest to simply create a new React.js app using it and copy the content of your app in the newly created. It's easy and it works.
Hope this helps.
Just getting things working is not enough. You should go through a simple guide to setup things step-by-step like these
creating-a-production-ready-webpack-4-config-from-scratch
react-boilerplate using WebPack 4
And try some simple boilerplate projects before messing with a complex one like these
react-boilerplate
react-webpack-boilerplate
And yes starting with create-react-app is also good as suggested by #Daniele Ricci and You can use react-scripts eject to understand what's going on under the hood.
Okay, I am pretty new to the react-node-express trio. But I will try my best to explain the issue. I have a library(module/library) that was made in by someone. I am trying to import some function from that module in to my react app as -
import {some_module} from 'some_library';
Now, that module is a standalone project that exports this function, there in that project they have - import reference to some local file to which my import gives an error while loading that :
import * as Util from './util.js';
SyntaxError: Unexpected token import
my package.json have following dependencies:
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/runtime": "^7.4.3",
"#bbmx/utilities": "^1.4.0",
"axios": "^0.18.0",
"babel-preset-stage-0": "^6.24.1",
"config": "^3.1.0",
"cookie-parser": "^1.4.4",
"express": "^4.16.3",
"grunt": "^1.0.1",
"grunt-artifactory-artifact": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"load-grunt-tasks": "4.0.0",
"lodash": "^4.17.11",
"node-fetch": "^2.6.0",
"react": "^16.8.6",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"react-router-dom": "^5.0.0",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/node": "^7.2.2",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.4.4",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-polyfill": "^6.26.0",
"css-loader": "^2.1.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"enzyme-to-json": "^3.3.5",
"file-loader": "^3.0.1",
"jest": "^24.7.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.6.0",
"nodemon": "^1.18.11",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"script-loader": "0.7.2",
"style-loader": "^0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-standard": "^18.3.0",
"webpack": "^4.31.0",
"webpack-cli": "^3.1.2",
"webpack-config-utils": "^2.3.1",
"webpack-dev-middleware": "^3.6.2",
"webpack-hot-middleware": "^2.24.3",
"webpack-node-externals": "^1.7.2"
}
and have the .babelrc file with following config.
{
"presets": ["#babel/env", "#babel/react"],
"plugins": ["#babel/plugin-transform-runtime","#babel/plugin-proposal-class-properties","#babel/plugin-syntax-dynamic-import"]
}
with web-pack.config as :
const path = require('path');
const webpack = require('webpack');
const { getIfUtils } = require('webpack-config-utils');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { ifProduction } = getIfUtils(process.env.NODE_ENV || 'development');
const mode = process.env.NODE_ENV || 'development';
const pkg = require('./package.json');
module.exports = [
{
name: 'client',
entry: {
client: ['./client', 'webpack-hot-middleware/client'],
bundle: './client/bundle.js'
},
output: {
path: path.resolve(__dirname, `dist/client/${pkg.version}`),
filename: '[name].js',
publicPath: `/${pkg.version}`
},
devtool: ifProduction('nosources-source-map', 'source-map'),
resolve: {
modules: [path.resolve('./client'), path.resolve('./node_modules')]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /fp-clientlib-v3.js/,
use: ['script-loader']
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
{
test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.png/,
loader:
'file-loader?limit=150000&mimetype=image/png&name=images/[name].[ext]'
},
{
test: /\.jpg/,
loader:
'file-loader?limit=150000&mimetype=image/jpeg&name=images/[name].[ext]'
},
{
test: /\.gif/,
loader:
'file-loader?limit=150000&mimetype=image/gif&name=images/[name].[ext]'
},
{
test: /\.ico/,
loader:
'file-loader?limit=150000&mimetype=image/ico&name=images/[name].[ext]'
}
]
},
mode,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin()
]
}
Can someone help me out as why this might be happening?
Node JS currently doesn't support ES6 imports. Enable ES6 imports in node js provides a solution to this issue. I have tired this and it worked for me.
Run the command:
npm install babel-register babel-preset-env --save-dev
Now you need to create a new file(config.js) and add the following code to it.
require('babel-register')({
presets: [ 'env' ]
})
// Import the rest of our application.
module.exports = require('./your_server_file.js')
Now you can write import statements without getting any errors.
Hope this helps.
You need to run the new file which you created with above code. In my case it was config.js. So i have to run:
node config.js
OR
I found one easy solution to this issue.
Create .babelrc file in the root of your project.
Add following(and any other babel presets you need, can be added in this file):
{
"presets": ["env"]
}
Install babel-preset-env using command npm install babel-preset-env --save, and then install babel-cli using command npm install babel-cli -g --save
Now, go to the folder where your server or index file exists and run using: babel-node fileName.js
Or you can run using npm start by adding following code to your package.json file:
"scripts": {
"start": "babel-node src/index.js"
}
I have a project in react with webpack and add an image, I added the file-loader and the image and gave the following error:
ERROR in ./src/assets/images/image.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/pages/Home/index.js 26:0-52
# ./src/routes.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
my webpack looks like this:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
If I remove the file-loader the error continues, then the problem is that it does not recognize the file-loader, but I can not resolve.
I load the image like this, but I've tried it in other ways and the error is always the same:
import imgHome from "../../assets/images/image.png"
Installed Packages:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^2.0.0",
"file-loader": "^3.0.1",
"flow-bin": "^0.86.0",
"flow-typed": "^2.5.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
Look at your package.json and see if there is file-loader.
If not, you may need to install it by:
npm install file-loader --save-dev
Try this:
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
I'm writing tests for a React application and run into an issue while compiling classes that i import in my test files. When running the test suite
i get the following error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/node_modules/react-redux/es/connect/connect.js:5
import connectAdvanced from '../components/connectAdvanced';
^^^^^^
I have tried to use babel-jest to transpile using the transform property and the modulePathIgnorePatterns. My jest.config.json looks like:
{
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"setupFiles": [
"raf/polyfill",
"<rootDir>/test/testSetup.js"
],
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
my babel.rc file (its in the root directory)
{
"presets": [ "react", "es2015", "stage-2" ],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
]
}
I have the following packages in my package.json:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.5.0",
"babel-jest": "^23.6.0"
"mkdirp": "^0.5.1",
"prettier": "^1.13.7",
"prettier-eslint": "^8.8.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.5.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.4",
"yargs": "^12.0.1"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"css-loader": "^1.0.0",
"eventing-bus": "^1.3.3",
"filesize": "^3.6.1",
"i18next": "^11.5",
"node-sass": "^4.8.3",
"react": "^16.4",
"react-circular-progressbar": "^1.0.0",
"react-dom": "^16.4",
"react-redux": "^5.0",
"react-truncate": "^2.4.0",
"redux": "^4.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1"
}
Who knows how i can modify my jest.config or .babelrc file so that my tests will compile without problem? Thanks in advance.
Your problem is: js files from /node_modules are not compiled by default.
It is totaly fine when you run your code in browser (that is exactly why such modules are not compiled because you have no need for that).
But jest runs using Node which doesn't understand import syntax. The best solution is to enable babel transpilation of node_modules when you run tests.
{"env": {
"development": {
"plugins": ["transform-es2015-modules-commonjs"]
},
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}}
Also use --no-cache when runing jest while fixing such problems.