I have a problem in my three js project, I use parcel as a module bundler. I want to import SVGRenderer from 'three/addons/renderers/SVGRenderer.js'. But it looks like parcel cannot resolve this. Any idea how to fix it ?
The error says:
#parcel/core: Failed to resolve 'three/addons/renderers/SVGRenderer.js' from './app.js'
This is the code:
app.js
import dat from 'dat.gui';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js'; // error is in this line
import { Text } from 'troika-three-text';
I don't know how to solve this problem.
When I started project vue3.js , console show me this error.
This import in pinia store.
I tryied change first line with import to
"import Vue from 'vue';" (without curcy braces), but error don't disappear.
import { Vue } from 'vue';
import { defineStore } from 'pinia';
import moment from 'moment';
import _ from 'lodash';
import router from '#/router';
if you are using latest version of vue , vue3
this code
import { Vue } from 'vue';
is no longer global instance
I want to conditionally import react-devtools based on an environment variable but eslint says that I can't import in the body of the module when I try to import react-dom
react-devtools requires that I import it before react-dom so what do I do?
import React from 'react';
import env from 'react-dotenv'
const _temp = env.DEV === "true" && import ("react-devtools");
import ReactDOM from 'react-dom';
import App from './App';
import { RecoilRoot } from 'recoil'
It gives errors on the last three lines. How do I resolve this?
Mine react-navigation drawer is not working, I am getting this error while running the app, any suggestion to fix this problem.
Unable to resolve "react-navigation-drawer" from "App.js"
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {Dimensions} from 'react-native';
import {Feather} from 'expo/vector-icons'
import { ProfileScreen, MessageScreen, ActivityScreen, ListScreen, ReportScreen, StatisticsScreen, SignoutScreen} from './screens';
const DrawerNavigator = createDrawerNavigator({
ProfileScreen,
MessageScreen,
ActivityScreen,
ListScreen,
ReportScreen,
StatisticsScreen,
SignoutScreen
})
export default createAppContainer(DrawerNavigator);
You haven't installed react-navigation-drawer in your project and you are trying to use it.
run yarn add react-navigation-drawer inside your project directory then it should work.
I have a file test_stuff.js that I am running with npm test
It pretty much looks like this:
import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';
const myProvider = (
<MyProvider>
</MyProvider>
);
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Unfortunately, I get the error
/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
^
TypeError: Cannot read property 'createElement' of undefined
at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)
What does that mean? I am importing React from 'react' successfully, so why would React be undefined? It is _react.React, whatever that means...
To import React do import React from 'react' You add brackets when the thing you are importing is not the default export in that module or file. In case of react, it's the default export.
This might apply to your other imports depending on how you defined them.
import React, { Component } from 'react'
This worked for me. I'm not sure why it fixed my version of this issue, though. So if you are someone who stumbled upon this problem and you use create-react-app as your starting boilerplate, this way of importing React will do the trick. (as of Oct '18, lol)
For those who are working ReactJS with TypeScript.
import * as React from 'react';
This error occured to me due to carelessness. It's actually
import React from 'react';
Brackets are for named exports such as this:
import React, { useState, useEffect } from 'react';
This issue occurred while importing React from react, I placed it inside curly brackets.
Please do this:
import React, {useState} from "react";
Instead of:
import {React, useState} from "react";
Trying to use destructor for importing the React object may cause you problems like this import {React} from 'react';.
This might be the cause of the error 90% of the time running this code above.
rather use:
import React from 'react';
And then you can access any member of the React class via:
React.
Change:
import { React } from 'react' to import React from 'react'
Because React is a default export and you don’t need curly braces for any default exports.
If in case you need to import multiple classes from 'react', you can have an alias for them except React. Something like,
import React, * as react from 'react';
React is exported by default in that module, no need {}.
I got this when trying to mock a component when unit testing but was not setting it up correctly
What I was doing that caused the error:
jest.mock("./SomeComponent", () => {
return <div>MockSomeComponent</div>
});
What I needed to do:
jest.mock("./SomeComponent", () => {
return () => <div>MockSomeComponent</div>
});
This error can be occured due to carelessness. Please add
import React from 'react'
It will be resolved after that