unable to import THREE.js in es6

Question

I'm trying to show a three.js scene inside a div using create react app. However, it throws an undefined THREE.

Tried

1. npm install --save three
2. 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"
  }
}

Answer 1

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 .