Question 72582 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can't import with relative path – Reactjs

Please take a look at this project: react-markdown-editor-test

The editor component can’t import a subcomponent from relative path, e.g this

import { light as lightTheme, dark as darkTheme } from "styles/theme";

results in error

Module not found: Error: Can't resolve 'styles/theme' in '/xxxx/test/moz-todo-react/src/editor'

I’ve tried the following, none of them works:

  1. from "src/editor/styles/theme";
  2. from "./src/editor/styles/theme";
  3. from "./styles/theme";

What was wrong?

Tags:

2

Answers


  1. 0

    Try using /src/editor/styles/theme instead.
    But, if you provided where are you located in the repository would be useful for relative paths.

    Login or Signup to reply.
  2. 0

    This looks like you have copied the source of a project into your own project rather than adding and using it as a dependency. That won’t always work, because 3rd party projects have their own build system, which compiles out certain custom import-resolving logic the author might have chosen to use.

    In this case, in their build system, they have configured it such that paths like styles/theme can be used. This is non-standard. Usually, you would do ./styles/theme. So you can’t build it with your own configuration. Even if you fix this one case, there are many many others. To your build system, these are simply invalid paths.

    Usually, you would add the dependency and then import that dependency. The package published on NPM is the built version, where all the author’s custom import resolving magic is compiled out back to standard.

    As for why ./styles/theme didn’t work either, I suspect there’s some other file also importing it the other way. I had a look and the entire project is based on non-standard import-resolving logic.

    If you really want to copy the source for whatever reason then you’ll have to go through changing every path that’s not a 3rd party import to start with ./. Or, you could configure your own build system to be compatible. But that’s pretty much not possible in create-react-app which allows only very limited configuration. By the way you should know that it’s also pretty stale.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search