Skip to content
This repository has been archived by the owner on Jan 26, 2019. It is now read-only.

Failure importing images #172

Closed
galvesribeiro opened this issue Oct 14, 2017 · 5 comments
Closed

Failure importing images #172

galvesribeiro opened this issue Oct 14, 2017 · 5 comments

Comments

@galvesribeiro
Copy link

Hello folks,

I was trying to follow https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files to import png images but, sadly, I'm getting "module not found".

Can anyone shed a light on what may be wrong?

Thank you!

Appreciate any help!

@pscanf
Copy link

pscanf commented Oct 15, 2017

Probably you need a type definition for the module. For example, for .png images add the following file to your project:

// typings/png.d.ts
declare module "*.png";

This tells the compiler that modules whose name ends in .png exist and export a value of type any:

import src from "image.png";
// module found, src is of type any

If the file actually doesn't exist (because you mis-spelled it for instance) the compiler won't warn you anymore though, but in that case webpack will complain telling you "module not found".

@galvesribeiro
Copy link
Author

@pscanf thanks for the reply.

I found the same conclusion here:

declare module '*.jpg' {
    let _: string
    export = _
}

declare module '*.png' {
    let _: string
    export = _
}

That made the thing work properly. Sorry, I forgot to get back here and close the issue.

Thanks!

@joshtynjala
Copy link
Contributor

I had to find this issue to figure out why I couldn't import a PNG file, even though README.md said that it should be possible.

With that in mind, I'm not so sure that this issue should be closed. I don't mind adding a .d.ts file to my project, but either the .d.ts file should be created automatically for me or the documentation should explain that it's required.

@wmonk
Copy link
Owner

wmonk commented Jan 17, 2018

@joshtynjala fancy writing some documentation in the README?

@joshtynjala
Copy link
Contributor

@wmonk I'll try to look into it tomorrow!

suutari-ai added a commit to andersinno/create-react-app-ai that referenced this issue Jan 25, 2018
…pescript

* 'master' of https://github.com/wmonk/create-react-app-typescript: (265 commits)
  fix typo in changelog
  Update README For 2.13.0
  v2.13.0
  Remove tslint-loader from prod build (again)
  Include TypeScript as devDependency in boilerplate output
  Documented how to define custom module formats for the TypeScript compiler so that you can import images and other files (references wmonk#172)
  v2.12.0
  Update README For 2.12.0
  Update typescript to 2.6.2
  v2.11.0
  Update changelog for 2.11.0
  Fixed problem with tsconfig.json baseUrl and paths
  Update createJestConfig.js
  Update changelog for 2.10.0
  v2.10.0
  Readd transformIgnorePatterns
  Update react-dev-utils
  Update package.json dependencies
  Readd Missing raf Package
  Update JestConfig Creation
  Fix
  Fix Missing Variable
  Fix package.json
  Merge pull request wmonk#204 from StefanSchoof/patch-1
  Merge pull request wmonk#201 from StefanSchoof/patch-1
  Merge pull request wmonk#199 from DorianGrey/master
  Merge pull request wmonk#165 from johnnyreilly/master
  Publish
  Add 1.0.17 changelog (#3402)
  Use new WebpackDevServer option (#3401)
  Fix grammar in README (#3394)
  Add link to VS Code troubleshooting guide (#3399)
  Update VS Code debug configuration (#3400)
  Update README.md (#3392)
  Publish
  Reorder publishing instructions
  Changelog for 1.0.16 (#3376)
  Update favicon description (#3374)
  Changelog for 1.0.15 (#3357)
  Replace template literal; fixes #3367 (#3368)
  CLI@1.4.2
  Publish
  Add preflight CWD check for npm (#3355)
  Stop using `npm link` in tests (#3345)
  Fix for add .gitattributes file #3080 (#3122)
  Mention that start_url needs to be "." for client side routing
  start using npm-run-all to build scss and js (#2957)
  Updating the Service Worker opt-out documentation (#3108)
  Remove an useless negation in registerServiceWorker.js (#3150)
  Remove output.path from dev webpack config (#3158)
  Add `.mjs` support (#3239)
  Add documentation for Enzyme 3 integration (#3286)
  Make uglify work in Safari 10.0 - fixes #3280 (#3281)
  Fix favicon sizes value in manifest (#3287)
  Bump dependencies (#3342)
  recommend react-snap; react-snapshot isn't upgraded for React 16 (#3328)
  Update appveyor.cleanup-cache.txt
  Polyfill rAF in test environment (#3340)
  Use React 16 in development
  Use a simpler string replacement for the overlay
  Clarify the npm precompilation advice
  --no-edit
  Update `eslint-plugin-react` (#3146)
  Add jest coverage configuration docs (#3279)
  Update link to Jest Expect docs (#3303)
  Update README.md
  Fix dead link to Jest "expect" docs (#3289)
  v2.8.0
  Use production React version for bundled overlay (#3267)
  Add warning when using `react-error-overlay` in production (#3264)
  Add external links to deployment services (#3265)
  `react-error-overlay` has no dependencies now (#3263)
  Add click-to-open support for build errors (#3100)
  Update style-loader and disable inclusion of its HMR code in builds (#3236)
  Update url-loader to 0.6.2 for mime ReDoS vuln (#3246)
  Make error overlay to run in the context of the iframe (#3142)
  Upgrade to typescript 2.5.3
  Fix Windows compatibility (#3232)
  Fix package management link in README (#3227)
  Watch for changes in `src/**/node_modules` (#3230)
  More spec compliant HTML template (#2914)
  Minor change to highlight dev proxy behaviour (#3075)
  Correct manual proxy documentation (#3185)
  Improve grammar in README (#3211)
  Publish
  Fix license comments
  Changelog for 1.0.14
  BSD+Patents -> MIT (#3189)
  Add link to active CSS modules discussion (#3163)
  Update webpack-dev-server to 2.8.2 (#3157)
  Part of class fields to stage 3 (#2908)
  Update unclear wording in webpack config docs (#3160)
  Display pid in already running message (#3131)
  Link local react-error-overlay package in kitchensink test
  Resolved issue #2971 (#2989)
  Revert "run npm 5.4.0 in CI (#3026)" (#3107)
  Updated react-error-overlay to latest Flow (0.54.0) (#3065)
  Auto-detect running editor on Linux for error overlay (#3077)
  Clean target directory before compiling overlay (#3102)
  Rerun prettier and pin version (#3058)
  ...
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants