Preact-cli: Absolute path for imports

Created on 14 Jul 2019  Â·  5Comments  Â·  Source: preactjs/preact-cli

// relative path
import Hello from '../../../components/hello'

// absolute path
import Hello from 'components/hello'


Do you want to request a _feature_ or report a _bug_?

feature

Build failed!
_✖ ERROR ./index.ts_

Module not found: Error: Can't resolve 'app' in './src'
@ ./index.ts 1:0-30 1:0-30
@ ../node_modules/preact-cli/lib/lib/entry.js
@ multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

_✖ ERROR BabelEsmPlugin: ./index.ts_

Module not found: Error: Can't resolve 'app' in './src'
@ ./index.ts 1:0-30 1:0-30
@ ../node_modules/preact-cli/lib/lib/entry.js
@ multi ../node_modules/webpack-dev-server/client?http://0.0.0.0:8080 ../node_modules/webpack/hot/dev-server.js ../node_modules/preact-cli/lib/lib/ent
ry webpack-dev-server/client webpack/hot/dev-serverWhat is the current behaviour?

what is motivation or use case for changing the behaviour?

create-react-app has this functionality

Please mention other relevant information.

I tried setting _tsconfig.json/_baseUrl to "./src/"
I also tried this:

// <projectRoot>/webpack.config.js
{
  resolve: {
    modules: [
      path.resolve('./src'),
      path.resolve('./node_modules')
    ]
  }
}
question

Most helpful comment

Thanks @prateekbh,

config.resolve.modules.push(env.src)

And setting baseUrl in tsconfig.json fixed the vscode's _module not found_ issue

Are there any plans to make support for this by default?

All 5 comments

Did you tried adding this via preact.config.js?

Thanks @prateekbh,

config.resolve.modules.push(env.src)

And setting baseUrl in tsconfig.json fixed the vscode's _module not found_ issue

Are there any plans to make support for this by default?

Still getting the error in fresh preact create default:

_./src/components/app.js_
Module not found: Error: Can't resolve 'src/routes/home' in '//src/components'

// <projectRoot>/preact.config.js
export default (config, env, helpers) => {
  config.resolve.modules.push(env.src);
};
// <projectRoot>/src/components/app.js

// ...

// Code-splitting is automated for routes
import Home from 'src/routes/home'; // '../../src/routes/home'

// ...

What am I missing?


edit: found it! config.resolve.modules.push(env.src); already starts in src

import Home from 'src/routes/home'; // wrong
import Home from 'routes/home'; // right

Sorry if this isn't the right spot but I feel like this is also affecting how my imports are working with TypeScript. After adding config.resolve.modules.push(env.src);

import Service from 'services/service'; // work but error ts(2307)
import Service from '@services/service'; // doesn't work but no lint error
// preact.config.js
module.exports = function (config, env) {
  config.resolve.alias.src = env.src;
};

this worked for me.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

haggen picture haggen  Â·  3Comments

raphaelbauer picture raphaelbauer  Â·  3Comments

hesselbom picture hesselbom  Â·  3Comments

AlStar01 picture AlStar01  Â·  3Comments

ajay28kumar picture ajay28kumar  Â·  3Comments