How to get node packages up-to-date? - node.js

I've used a truffle react box to get an app working. npm install gives me lots of deprecation warnings, and alos that some packages need others that aren't installed. Is there a good way, or a place online, that can get my package.json file up to date? Since I'm really new to react, I think having missing packages is sure to cause a lot of lost time. Thank you.
package.json
{
"name": "someApp",
"version": "0.1.0",
"license": "MIT",
"private": true,
"repository": {
"type": "git",
"url": "some repo..."
},
"main": "src/index.js",
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom --watch"
},
"dependencies": {
"dotenv": "^2.0.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.1.1",
"babel-jest": "17.0.2",
"babel-loader": "6.2.7",
"babel-preset-react-app": "^2.0.1",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.0",
"debug": "^3.1.0",
"detect-port": "1.0.1",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.5.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"growl": "^1.10.2",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "19.0.1",
"json-loader": "0.5.4",
"minimatch": "^3.0.2",
"object-assign": "4.1.0",
"openzeppelin-solidity": "1.11.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react-dev-utils": "^0.4.2",
"recursive-readdir": "2.1.0",
"stmux": "^1.5.5",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"truffle": "^4.1.13",
"truffle-contract": "^1.1.8",
"truffle-hdwallet-provider": "0.0.6",
"truffle-solidity-loader": "0.0.8",
"url-loader": "^1.0.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-manifest-plugin": "^1.1.0",
"whatwg-fetch": "^1.0.0"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/coverage/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://127.0.0.1:7200",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}

A really cool package i've used is npm-check
It provides a nice interface to tell you what packages are outdated.
interface image
to install the package, run in your terminal: npm install -g npm-check
To check packages, run: npm-check in the directory that contains the package.json you are checking.

Related

React + NPM Material UI: Npm install error Unable to resolve dependency tree

After installing materialUI I'm having issues when trying to run an npm install on my application that was created with create-react-app.
I've tried deleting node_modules & package_lock.json multiple times - issue persists.
I can continue to install npm packages using --force however, not ideal. I'd like to understand what the issue is here.
Error:
package.json:
{
"name": "video-upload",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "7.1.6",
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.11.0",
"#svgr/webpack": "2.4.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.18.4",
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.9",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.3.0",
"babel-preset-react-app": "^7.0.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.6",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.3.1",
"postcss-safe-parser": "4.0.1",
"react": "^18.2.0",
"react-app-polyfill": "^0.2.0",
"react-dev-utils": "^7.0.1",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"styled-components": "^5.3.6",
"terser-webpack-plugin": "1.1.0",
"typescript": "^4.9.3",
"url-loader": "1.1.1",
"web-vitals": "^2.1.4",
"webpack": "4.19.1",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/styled-components": "^5.1.26"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.ts",
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
}
}
Your package 'fe-react-app-video-upload' has a dependency on react#18.2.0
It could not match that, given you are installing an old version of MUI. As I see it, you are trying to install MUI with the old method.
The updated version of Material-UI for React, is available at the #mui/xxx org.
Now, if you really do want v4 of MUI, for some reason, you have to force install. That's because v4 has a dependency on old React, while the first package I mentioned, has a dependency on React 18.2.0; any lower version won't do, only higher versions given the ^ symbol in front.

Jest SyntaxError: Unexpected token 'export' from node module

I've been having this issue with Jest. Jest is throwing an error pointing towards a dependency from within node_modules. Probably need to configure jest to support this syntax, because it can't parse it. But i'm not sure what for configurations.
I've tried to add transformIgnorePatterns in the jest.config.ts file with no luck,
"node_modules/(?!(geotiff)/)"
Any help would be highly appreciated!
Details:
/Users/Documents/Project/node_modules/quick-lru/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export default class QuickLRU extends Map {
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (node_modules/geotiff/dist-module/source/blockedsource.js:1:1)
This is the jest.config.ts
// jest.config.ts
import type {Config} from "#jest/types";
const config : Config.InitialOptions = {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!**/*.d.ts"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testMatch": [
"<rootDir>/src/**/*.(test).{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "node",
"testEnvironmentOptions": {
"url" : "http://localhost"
},
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
},
"transformIgnorePatterns": [
"node_modules/(?!(geotiff)/)"
],
"moduleFileExtensions": [
"web.ts",
"ts",
"web.tsx",
"tsx",
"web.js",
"js",
"web.jsx",
"jsx",
"json",
"node",
"mjs"
],
"globals": {
"ts-jest": {
"tsconfig": "./tsconfig.test.json"
}
},
"modulePaths": [
"<rootDir>/src/"
]
};
this is the package.json file
{
"name": "Project",
"version": "1",
"private": true,
"homepage": ".",
"files": [
"build/**/*"
],
"engines": {
"node": ">=16.14.0",
"npm": ">=8.11.0"
},
"repository": {
"type": "git",
"url": "ssh://Project},
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
"scripts": {
"build-css": "sass --style=compressed -I ./src -I ./node_modules src/:src/",
"watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:/src --watch",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"debug": "npm-run-all -p --inspect=9227 watch-css start-js",
"prebuild": "cross-env CI=true npm run test --watchAll=false",
"build": "npm run build-css && node scripts/build.js",
"postbuild": "node scripts/zip.js",
"build-test": "npm run build-css node scripts/build.js",
"serve-build": "npm run serve -s build",
"test": "node scripts/test.js --env=jsdom",
"prepublishOnly": "npm run build",
"preversion": "CI=true npm run test",
"postinstall": "patch-package",
"lint": "./node_modules/.bin/ESLint -c .eslintrc.js -o ./lint.log"
},
"devDependencies": {
"#babel/cli": "^7.18.6",
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.18.6",
"#svgr/webpack": "^6.2.1",
"#turf/turf": "^6.4.0",
"#types/classnames": "^2.3.1",
"#types/enzyme": "^3.10.12",
"#types/jest": "^28.1.3",
"#types/node": "^18.0.0",
"#types/react": "^17.0.39",
"#types/react-autocomplete": "^1.8.6",
"#types/react-autosuggest": "^10.1.5",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-highlight": "^0.12.5",
"#types/react-router-dom": "^5.3.3",
"#types/uuid": "^8.3.4",
"#typescript-eslint/parser": "^5.30.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"adm-zip": "^0.5.9",
"autoprefixer": "10.4.7",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.27.2",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^28.1.1",
"babel-loader": "^8.2.2",
"babel-preset-react-app": "10.0.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chalk": "5.0.1",
"classnames": "~2.2.6",
"core-js": "^3.6.5",
"cross-env": "^5.2.1",
"css-loader": "^6.7.1",
"dotenv": "16.0.1",
"enzyme": "^3.11.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsdoc": "^39.3.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-react": "^7.22.0",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.1.1",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"fs-extra": "10.1.0",
"geotiff": "^2.0.5",
"html-webpack-injector": "^1.1.4",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.1",
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^28.1.1",
"joi-browser": "^13.4.0",
"mini-css-extract-plugin": "^2.6.1",
"neo-async": "^2.6.2",
"npm-run-all": "^4.1.3",
"object-assign": "^4.1.1",
"ol": "~6.14.1",
"ol-ext": "^3.2.26",
"patch-package": "^6.2.2",
"proj4": "^2.5.0",
"promise": "^8.0.1",
"raf": "^3.4.0",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-autocomplete": "^1.8.1",
"react-autosuggest": "^10.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-dev-utils": "^12.0.0",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-dom": "^17.0.2",
"react-highlight": "^0.14.0",
"react-redux": "^8.0.2",
"react-scripts": "^5.0.0",
"redux": "^4.0.5",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"resolve": "^1.6.0",
"sass": "^1.49.9",
"serve": "^13.0.2",
"sneakpeek-cli": "^0.2.1",
"source-map-loader": "^4.0.0",
"swiper": "^6.8.4",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"ts-node": "^10.8.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.7.4",
"url-loader": "^4.1.1",
"uuid": "^7.0.3",
"webpack": "~5.73.0",
"webpack-dev-server": "^4.9.2",
"webpack-manifest-plugin": "^5.0.0"
},
}

Unable to add typescript to a react project

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.

unable to import THREE.js in es6

I'm trying to show a three.js scene inside a div using create react app. However, it throws an undefined THREE.
Tried
npm install --save three
import * as THREE from 'three'
But doesn't seem to work, it always throws THREE is not defined no-undef. Kindly have a look at my repo as well. https://github.com/priyakrishnadev/webglapp
Update:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
"axios": "^0.16.2",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"classnames": "^2.2.5",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"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",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"lodash": "^4.17.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"prop-types": "^15.6.0",
"raf": "3.4.0",
"react": "^16.1.0",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.1.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-timeago": "3.4.3",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-form": "^7.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"three": "^0.88.0",
"timeago-react": "^2.0.0",
"url-loader": "0.6.2",
"uuid": "^3.1.0",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"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",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
The problem is is that you are importing THREE as es6 modules, but then trying to include DDSLoader, MTLLoader and OBJLoader which are not in THREE and are not set up as modules (as they are in the /exmaples/js/ folder in three.js).
You need to use versions that are set up as modules. eg three-obj-loader.
There are a few of these, and some are set up differently from others, some even set up specifically for use with react, so you are going to have to look at how to implement the one you choose. Search for them on the npm site.
An example of using three-obj-loader can be seen as an answer on this stack question.

Unknown plugin "Relay" - React, GraphQL and Relay

I'm a beginner in GraphQL. I just started to follow the tutorial in Here But I'm getting this compilation problem:
Unknown plugin "Relay"
This is my package.json
{
"name": "hackernews-react-relay",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.2",
"babel-core": "^6.5.2",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"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.6",
"promise": "8.0.1",
"react": "^15.6.1",
"react-dev-utils": "^4.0.1",
"react-dom": "^15.6.1",
"react-relay": "^1.3.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"devDependencies": {
"babel-plugin-relay": "^1.3.0",
"relay-compiler": "^1.3.0"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
"relay"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
I'm following step by step the tutorial mentioned above.
OS: Ubuntu 17.04
Node 8.0.0
npm 5.0.0
I've already trying to solve this problem by adding this to babel-presets
"es2015",
"stage-0",
"react"
and this to babel plugins
"babel-relay-plugin-loader"
But nothing works.
Instead of providing a relay option in your plugins definition, you can create a file called for example babelRelayPlugin.js and put the plugin definition there since the plugin needs to load the schema before used.
There you can import the getBabelRelayPlugin pass in the schema and export it back.
import getbabelRelayPlugin from 'babel-relay-plugin';
import schema from '../schema/schema.json';
export default getbabelRelayPlugin(schema.data);
Then use this file in your plugins definition instead.
"babel": {
"presets": [
"react-app"
],
"plugins": [
"./babelRelayPlugin"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
note: I am assuming that both the package.json and the babelRelayPlugin.js files live in the same directory

Resources