无法解决安装的 Npm 模块

Question

I uninstalled the package @toast-ui/react-image-editor from the server side of my react app because I thought the dependency needed to be client side, so I go and install it client side, and reboot the app and it cannot be found.

Heres my basic folder structure

 -myapp
    -server.js
    -package.json
    -node_modules
    -package-lock.json
    -client
       -package.json
       -node_modules
       -package-lock.json
       -src

I receive this error: "./src/components/images/Editor.js Module not found: Can't resolve '@toast-ui/react-image-editor' in 'C:..\client\src\components\images'"

Following that I consulted

How do I resolve "Cannot find module" error using Node.js?

Can't resolve module (not found) in React.js

Basically I have deleted and installed the individual package, deleted and installed the node_modules on the client and the server run npm cache verify, installed the package on the client only, installed the package on the client and the server, installed on the server only.

and nothing is working, which makes me think possibly its an import error with VS Code,

is there a way to see how npm is trying to import a specific package or any general thing I haven't done for react failing to import a package that's clearly there.

Answer 1

I got the same error. I think there is a problem with the recent version 3.14.3. I went back to 3.14.2 and it worked fine. Here is my sample App.js to get you started, based on the npm page.

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

function App() {

  const myTheme = {
    // Theme object to extends default dark theme.
  };
  
  const MyComponent = () => (
    <ImageEditor
      includeUI={{

        theme: myTheme,
        menu: ['shape', 'filter'],
        initMenu: 'filter',
        uiSize: {
          width: '1000px',
          height: '700px',
        },
        menuBarPosition: 'bottom',
      }}
      cssMaxHeight={500}
      cssMaxWidth={700}
      selectionStyle={{
        cornerSize: 20,
        rotatingPointOffset: 70,
      }}
      usageStatistics={true}
    />
  );

  return (
    <div className="App">
      <header className="App-header">
      <div><MyComponent /></div>
      </header>
    </div>
  );
}

export default App;