Related
I'm trying to add typescript to a existing react project but I'm getting an error when re-starting the server with npm start.
I'm following the steps from this documentation but I'm getting an error message:
The only thing I might not have right is the react.scripts versions. Here is a copy of the results thrown by npm outdated:
Also, I checked my dependencies and everything seems to be normal.
Things I have done:
run npm update to update all react related packages
I have deleted the node files and re install them with npm install
I have renamed other files to .tsx including the index.js file but I get another error:
Really keen to move this project to the next level with typescript but I have been stack trying to get it to work. By the way, here are my dependencies too:
{
"name": "world-budget-react-v",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#types/jest": "^26.0.23",
"#types/node": "^15.0.2",
"#types/react": "^17.0.5",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"autoprefixer": "7.1.6",
"axios": "^0.21.1",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"firebase": "^8.2.6",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^17.0.2",
"react-dev-utils": "^5.0.2",
"react-dom": "^17.0.2",
"react-gtm-module": "^2.0.11",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scroll-restoration": "^1.0.6",
"react-test-renderer": "^17.0.1",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"typescript": "^4.2.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.11.3",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
Any recommendations? I hope I provided as much info as possible!
Lastly, I found this answer but not sure what they mean. Anyone keen to explain maybe Could not find a required file. - Adding TypeScript to React project
As per the react-scripts 2.10 you can add TypeScript to an existing project.
yarn add typescript #types/node #types/react #types/react-dom #types/jest --dev
Create a react-native app using : npx react-native init AwesomeProject
Once its up and running, follow this link to add typescript the right way.
I am trying to create a reusable React component with Material UI and npm link it to a different application. The component and application are being bundled using webpack. The application renders the component fine in development, but when I bundle the application the component starts breaking the material-ui styling.
Some of the solutions I have tried include:
https://material-ui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds
https://reactjs.org/warnings/invalid-hook-call-warning.html
I thought defining #material/core in the peerDependencies would solve it, but every time I use a Material-UI component the application throws the Invalid Hook Call Warning.
Nothing seems to work ☹️
component's package.json:
{
"name": "component",
"version": "1.0.0",
"description": "",
"main": "build/index.js",
"scripts": {
"test": "jest",
"start": "webpack --watch",
"build": "webpack --optimize-minimize -p",
"dist": "npm run build"
},
"peerDependencies": {
"#material-ui/core": "^3.2.0 || ^4.0.0",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "^4.9.0",
"#material-ui/icons": "^3.0.2",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-runtime": "^6.26.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.1.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.7.0",
"faker": "^4.1.0",
"husky": "^1.3.1",
"jest": "^23.6.0",
"jest-styled-components": "^6.3.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"sinon": "^7.2.2",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"clsx": "^1.0.4",
"prop-types": "^15.6.2"
}
}
component's webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.jsx',
mode: 'production',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/env'],
},
},
},
],
},
resolve: { extensions: ['*', '.js', '.jsx'] },
externals: {
react: 'react',
},
optimization: {
minimize: true,
},
};
Any help would be much appreciated! Thanks in advance.
This actually makes perfect sense if you check out the docs on npm link:
First, npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed.
Note that the command only makes a symlink locally so when you build/deploy, it would logically follow the package can't be found.
My advice would be to create a scoped package for your custom component. Create an npm account, upload your package and then add it to your project like this:
npm install #brettoberg/reusable-component
Now, webpack and any other system should be able to find it because it's published.
I'm trying to upgrade from Babel 6 -> 7. I used npx babel-upgrade --write to assist with updating the package.json and then ran a npm install.
When trying to run our webpack dev server, it fails to compile with the following error:
ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-transform-object-rest-spread' from '/vagrant'
at Function.module.exports [as sync] (/vagrant/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/vagrant/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePlugin (/vagrant/node_modules/#babel/core/lib/config/files/plugins.js:54:10)
at loadPlugin (/vagrant/node_modules/#babel/core/lib/config/files/plugins.js:62:20)
at createDescriptor (/vagrant/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/vagrant/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/vagrant/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPluginDescriptors (/vagrant/node_modules/#babel/core/lib/config/config-descriptors.js:105:10)
at alias (/vagrant/node_modules/#babel/core/lib/config/config-descriptors.js:63:49)
Note /vagrant is the project root.
The only references left to babel-plugin-transform-object-rest-spread exist in node_modules so my guess is these are triggering it somehow?
package.json
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"autoprefixer": "^9.0.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-transform": "^3.0.0",
"css-loader": "^1.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"eslint": "^5.2.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-react": "^7.10.0",
"eslint-plugin-standard": "^3.1.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.7.1",
"jest-fetch-mock": "^1.6.5",
"lodash-webpack-plugin": "^0.11.5",
"mini-css-extract-plugin": "^0.6.0",
"path": "^0.12.7",
"postcss": "^7.0.1",
"postcss-cssnext": "^3.0.2",
"postcss-loader": "^2.1.6",
"postcss-modules-values": "^1.3.0",
"raw-loader": "^0.5.1",
"react-test-renderer": "^16.4.1",
"redux-mock-store": "^1.5.3",
"sinon": "^6.1.4",
"standard": "^11.0.0",
"style-loader": "^0.21.0",
"svg-react-loader": "^0.4.5",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.1.3",
"webpack-visualizer-plugin": "^0.1.11"
},
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
}
Edit: I've been unable to identify the cause of the issue and have reverted to Babel 6.
Had this issue and was able to solve it after some digging --
we still had a transform-object-rest-spread left in the plugins in our webpack configuration and in our package.json, without the babel prefix. Replacing it with #babel/plugin-proposal-object-rest-spread fixed it for us!
updated presets from and used #user14981617's advice.
https://babeljs.io/docs/en/env/ was recommended in terminal.
npm WARN deprecated babel-preset-es2015#6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
:)
this is what I have currently:
{
"presets": [
["env", {
"modules": false,
"targets": {
"chrome": "60",
"edge": "60",
"node": "current"
}
}],
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread"]}
Banging my head against the wall for the past few hours trying to figure out what happened to my webpack.config. I even tried to revert to an older commit and still saw the same problems. Any ideas or suggestions would be much appreciated. Thanks! Posting my webpack.config and package.json below
webpack.config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [ '#babel/polyfill', './app/index.js',],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader'},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
],
mode: process.env.NODE_ENV === 'production' ? 'production': 'development'
};
----------
## package.json
{
"name": "my-reps",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "NODE_ENV='production' webpack",
"firebase-init": "firebase login && firebase init",
"deploy": "npm run build && firebase deploy"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.0.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"classnames": "^2.2.6",
"firebase-tools": "^4.2.1",
"jquery": "^3.3.1",
"lodash.debounce": "^4.0.8",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-places-autocomplete": "^7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-twitter-embed": "^1.1.3",
"react-twitter-widgets": "^1.7.1",
"reactstrap": "^6.5.0"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.0",
"babel-register": "^6.26.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.22.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
error message:
ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html
ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html
ℹ ｢wdm｣: Failed to compile.
Did you happened to update npm packages recently? Particularly the following packages in devDependencies:
webpack
webpack-cli
babel
babel-loader
Certain version of these packages may cause problems when building.
If so, you can try reinstalling devDependencies to the versions you used to use.
Another way is to use the latest version instead. Sometimes npm update command will not install the latest version for some reason. So you need to go to npm website and check the latest version of each devDependencies.
I'm integrating jest into my nuxt application using vue-test-utils (following Edd Yerburgh's new book).
The test fails right out of the box with "SyntaxError: Unexpected token {". Similar code builds fine with nuxt and the tests ran with Ava. I'm assuming that I have a problem with my jest configuration.
I've included my package.json, code excerpt and console out.
Thanks for any help,
Dan
npm 6.4.0
package.json
{
"name": "cxl-ui-base",
"version": "1.0.0",
"description": "Base UI for SA and CXL",
"author": "Dan Mahoney <dan.mahoney#contextlabs.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test:coverage": "TEST=unit nyc --report-dir=generated-files/coverage ava --tap | tap-summary",
"test:unit": "NODE_ENV=testing jest --verbose --no-cache",
"test:watch": "NODE_ENV=pro ava --watch",
"lint": "eslint -f node_modules/eslint-detailed-reporter/lib/detailed.js --ext .js,.vue -o generated-files/lint.html .",
"doc": "jsdoc -c doc.conf.js"
},
"dependencies": {
"#nuxtjs/auth": "^4.5.1",
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/dotenv": "^1.1.1",
"ava-describe": "^2.0.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"dotenv": "^5.0.1",
"eslint-import-resolver-alias": "^1.1.1",
"express": "^4.16.3",
"jsdoc-vue": "^1.0.0",
"jsonwebtoken": "^8.2.1",
"leaflet": "^1.3.1",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"npm": "^6.4.0",
"nuxt": "1.4.1",
"nuxt-leaflet": "0.0.10",
"nuxt-material-design-icons": "^1.0.4",
"oauth-1.0a": "^2.2.4",
"vue": "^2.5.16",
"vue-d3": "^0.1.0",
"vue-i18n": "^7.6.0",
"vue-uuid": "^1.0.0",
"vue2-leaflet": "^1.0.2",
"vuelidate": "^0.7.2",
"vuetify": "^1.0.17",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.2",
"#vue/test-utils": "^1.0.0-beta.19",
"ajv": "^6.5.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.4.2",
"babel-plugin-add-module-exports": "^0.3.3",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"chromedriver": "^2.38.3",
"eslint": "^4.3.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-standard": "^10.2.1",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsdoc": "^3.7.1",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"eslint-plugin-vue-a11y": "0.0.26",
"jest": "^23.5.0",
"jest-vue-preprocessor": "^1.4.0",
"jsdoc": "^3.5.5",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"loglevel": "^1.6.1",
"nightwatch": "^0.9.21",
"npm-merge-driver": "^2.3.5",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^1.0.0",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue-jest": "^2.6.0",
"vue-loader": "^13.7.2",
"vue-meta": "^1.5.0",
"vue-template-compiler": "^2.5.16"
},
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"jest": true
}
}
}
Code
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuetify from 'vuetify';
import test from 'jest';
import ClientMap from '#/components/Map'; // eslint-disable-line
import { commonAssertions } from '#/plugins/test.utils';
// for mocking
import modal from '#/components/Modal'; // eslint-disable-line
const localVue = createLocalVue();
localVue.use(Vuetify);
test('Sanity Test', () => {});
test('Initial State', (t) => {
const $modal = sinon.mock(modal);
const wrapper = shallowMount(Map, {
mocks: {
$modal,
},
localVue,
});
commonAssertions(Map, t, wrapper);
});
test.todo('Select Layer');
test.todo('Test Modal??');
test.todo('Test Tooltip??');
test.todo('UnSelect Layer');
Relevant Output
FAIL src/test/specs/map.spec.js
● Test suite failed to run
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:
/Users/dan.mahoney/Projects/cxl-ui-base/src/test/specs/map.spec.js:10
import { shallowMount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.045s
The problem is that nuxt puts the babel config into nuxt.config.js. I found an npm package that solves that. It allows you to have a .babelrc file and have it injected into nuxt.config.js. When Jest compiles the files for testing, it uses .babelrc. Kudos to the author.
You should set the NODE_ENV to test then run the jest
you can do it by adding this line to your package.json file
"scripts": {
....
"test": "NODE_ENV=test jest"
},