React-starter-kit: Cant resolve modules

Created on 2 Mar 2017 · 11Comments · Source: kriasoft/react-starter-kit

In webpack config we have: resolve: { modules: [path.resolve(__dirname, '../src'), 'node_modules'], }
But when import Link from 'components/Link'
Found error:
Error: Cannot find module 'components/Link'

question webpack

Source

kuongknight

Most helpful comment

sure, for example if you want to make import Header from 'src/components/Header' works:

// tools/webpack.config.js

// ...

const clientConfig = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, '..'), 'node_modules'],
  },
  // ...
};

const serverConfig = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, '..'), 'node_modules'],
  },
  externals: [
    /^\.\/assets\.json$/,
    (context, request, callback) => {
      const isExternal =
        request.match(/^[@a-z][a-z/.\-0-9]*$/i) &&
        !request.match(/^src\//i) && // module is not external if starts with `src/`
        !request.match(/\.(css|less|scss|sss)$/i);
      callback(null, Boolean(isExternal));
    },
  ],
  // ...
};

// ...

frenzzy on 15 Mar 2017

❤2

All 11 comments

You need to explicitly specify this option for client and server config separately, because webpack mutates this section =/

// tools/webpack.config.js

// ...

const clientConfig = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, '../src'), 'node_modules'],
  },
  // ...
};

const serverConfig = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, '../src'), 'node_modules'],
  },
  // ...
};

// ...

frenzzy on 2 Mar 2017

currently we have:

const config = {
resolve: {
    modules: [path.resolve(__dirname, '../src'), 'node_modules']
  }
}
const clientConfig = {
  // ...
  resolve: { ...config.resolve },
  // ...
};

const serverConfig = {
  // ...
  resolve: { ...config.resolve },
  // ...
};

But it not working

kuongknight on 9 Mar 2017

Please help me resolve this issue :)

kuongknight on 11 Mar 2017

If you want to use absolute paths to your modules you also need to mark your modules as internal here for server-side bundle or copy them manually to the build folder so that build/server.js can find them.

frenzzy on 11 Mar 2017

If you want to use absolute paths to your modules you also need to mark your modules as internal here for server-side bundle or copy them manually to the build folder so that build/server.js can find them.

the link is not working or private - have a similar issue with installing react-office-fabric and then not resolving because of the /src/ in between the path resolve.

Kohze on 12 Mar 2017

👍1

@frenzzy Private links should not be here :-)

langpavel on 13 Mar 2017

@Kohze Are you still interested or this can be closed? If so, reopen please :-)

langpavel on 13 Mar 2017

oops, was a wrong link)

frenzzy on 13 Mar 2017

👍1

@frenzzy can you write sample internals config for src folder?

kuongknight on 15 Mar 2017

sure, for example if you want to make import Header from 'src/components/Header' works:

// tools/webpack.config.js

// ...

const clientConfig = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, '..'), 'node_modules'],
  },
  // ...
};

const serverConfig = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, '..'), 'node_modules'],
  },
  externals: [
    /^\.\/assets\.json$/,
    (context, request, callback) => {
      const isExternal =
        request.match(/^[@a-z][a-z/.\-0-9]*$/i) &&
        !request.match(/^src\//i) && // module is not external if starts with `src/`
        !request.match(/\.(css|less|scss|sss)$/i);
      callback(null, Boolean(isExternal));
    },
  ],
  // ...
};

// ...

frenzzy on 15 Mar 2017

❤2

... and solution for Atom js-hyperclick