Webpacker/Typescript can't resolve rails asset pipeline file

Question

I'm trying to import a file that is in the rails asset pipeline and for some reason webpack can't find it.

Here is my tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": ".",
    "paths": {
      "@images/*": ["app/assets/images/*"],
    }
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

Here is my config/webpack/environment.js:

const { environment } = require('@rails/webpacker')
const customConfig = require('./custom');
const typescript =  require('./loaders/typescript')
const fileLoader = require('./loaders/file');

environment.loaders.append('file', fileLoader)
environment.loaders.append('typescript', typescript)

// Merge custom config
environment.config.merge(customConfig);

module.exports = environment

My config/webpack/custom.js:

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, '..', '..', 'app/javascript'),
      '@images': path.resolve(__dirname, '..', '..', 'app/assets/images'),
      '@components': '@src/components',
      React: 'react',
      ReactDOM: 'react-dom'
    }
  }
};

import "@images/ajax-circle.gif"; in one of my typsecript files gives error 2307 (can't resolve module) and webpack-dev-server is unable to compile with the following error:

ERROR in /Users/brandoncc/dev/my_app/app/javascript/lib/store_management.ts
[tsl] ERROR in /Users/brandoncc/dev/my_app/app/javascript/lib/store_management.ts(1,24)
      TS2307: Cannot find module '@images/ajax-circle.gif'.
webpack: Failed to compile.

It looks like the error comes back to typescript not being able to resolve the file, but I can't figure out why it can't find it.

The question was why I was getting that error. I already solved it though. — Brandon
– Brandon, Commented Feb 27, 2019 at 21:43

Brandon · Accepted Answer · 2019-02-26 15:27:12Z

4

It turns out that I needed to add a definition for the .gif extension.

Creating typings.d.ts with:

declare module "*.gif";

fixed it.

answered Feb 26, 2019 at 15:27

Brandon

1,8952 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

55 Cancri Over a year ago

fixed the problem for me! But why?

Brandon Over a year ago

I haven't used Typescript in a while so I am not 100% sure, but I believe without that declaration, typescript doesn't know to import gif files. I also had to add more modules for other file extensions in that project. I think svg was one of them.

felixmosh · Accepted Answer · 2019-02-26 08:18:08Z

1

If you are relying on typescript paths feature, you need to use tsconfig-paths-webpack-plugin that will resolve the path correctly. Just add that to your webpack config

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
  }
  ...
}

answered Feb 26, 2019 at 8:18

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

1 Comment

Brandon Over a year ago

Thank you for the response felixmosh. It turns out the path itself wasn't the problem, but rather the extension.. Typescript should give separate errors for the two!

Collectives™ on Stack Overflow

Webpacker/Typescript can't resolve rails asset pipeline file

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related